Elizabeth Hom's UX Portfolio

ElizabethHom
U X D e s i g n e r
Portfolio

Unafraid of the impossible, I am a
hardworking, problem solving,
committed and an enthusiastic
person. I became a UX designer,
because it combines my analytical
and creative mind. I enjoy stepping
into the shoes of the user and
creating personas, journey maps,
wireframes and prototyping
potential designs.
When I am not designing, I enjoy
reading mysteries, baking and
watching Doctor Who.

Through my various experience in graphic design and business, I strive to
bring the two together to create a better experience for the user.
I am adaptable in delivering the end product to whatever the project
objectives are.
User Centeric Design Process
Research Design Test Iterate

CLIENT RESPONSIVE WEBSITE PROJECT:
Redesign of Reserve.com
MOBILE APP PROJECT:
Creation of JBF Eats Native App
DESKTOP PROJECT:
Integrating Video AMA Feature onto
Quora.com
5
11
17
UX
Projects

CLIENT RESPONSIVE WEBSITE PROJECT:
Redesign of Reserve.com
5

Overview
Client
This was a 2.5 week project done in August 2015 for General
Assembly User Experience Immersive Course.
The objective was to redesign the current Reserve website to be
responsive across diﬀerent devices.
Reserve is a restaurant reservation app that focuses on creating a
personalize experience for it’s users.
My Role
As project manager, I made sure my
team stayed on task and motivated
them through obstacles. I analyzed
and synthesized competitive and
user research that was collected. I
created and updated the research
report to submitted to the client.
Problem
There are currently an
abundance of reservation
apps in the marketplace, how
can Reserve stand out from
other apps?
Opportunity
Reserve has an amazing app
with great customer reviews.
How can we translate the
experience from their current
customers onto their website in
order to tell an eﬀective story for
potential users.
Project Manager/ Researcher
6

1. Enter mobile number to
recieve link to app store
2. Overall process of app
3. Featured Cover Restaurants -
click brings user to
restaurant’s website
4. Apply button for restaurants
5. User download
6. Press publications
2
4
6
3
1
5
The Process
Competitive Analysis User Research Ideation Wireframes
To better understand the market, we
conducted competitive analysis on ﬁve
companies and compared it to the current
Reserve website. We conducted a layout
comparison to understand how information is
laid out on key pages and a site map to
understand the information architecture.
We conducted usability testing on the
current Reserve website and created
a heuristic analysis of the Reserve
website and it’s competitors.
Something the Reserve website failed
to due is consistency; the language
was inconsistent and users found it
hard to navigate the website.
Scale:
0 = No Pain
1 = Minor Confusion
2 = Somewhat Confused
3 = This is Terrible
4 = Very Painful (Would not use)
7

Interview Quote Findings Feature
Research at a
glance
Overall Information
of how the app
works
“ I like keeping up with
what’s new and what’s
interesting. I think if
someone took the time
out to write any article
suggesting an
experience then I think
people will try it out.”
Read through and
explore new feature
Trustopinionsfrom
peoplearoundthem
Genuine
Reviews
“I know of it or I’ve
used the desktop
version so it made
sense for me to get the
mobile.”
Find apps based on
familiarity and daily
usage
Website offers
same function as
the app
“ Once I get the
information from
someone, I’ll research it.
I’ll go to the app store,
I’ll see the reviews, I’ll
also look at the
screenshots, see
whatever is there.”
Detailed information of
features of the app
“I feel like I’m missing
information so I rather
trust someone who has
already experienced it.
My peers have momre
credibility than the
reviews.”
Dennis
Benjamin
Dora
The Process
We created a survey to ﬁnd potential users.
From the survey respondents we interviewed 8
people in order to better understand their
behaviors. Our goal was to understand why
they downloaded an app and how they found
out about the app. From these interviews we
were able to identify three personas.
8

Confusion of fuction;
“only mobile or both
desktop and mobile”
Picture better idenitfy
that this is a mobile
app
Users prefer
locations of
restaurants on
home page
More than one
review more
helpful
User did not know how to get
out of window; “x” or “close”
button needed
The Process
We identiﬁed features based on the personas created and
prioritized them with the MoSCoW (Must, Should, Could,
Would Not) method. We sketched and designed potential
ideas and created a prototype to test.
9

Website Home Page
1
4
5
3
2
1. Carousel of pictures and
special promotions/events
2. Get Started button- pop up
appears to download and/or
sign up for email alerts
3. Overview of process
4. Available locations- click new
page with list of restaurants
5. Carousel of user reviews
1
3
2
4
1. Menu drop down when tap-
navigation sticky
2. Get started drop down to
download and/or add email
3. Tap to view list of resturants
4. Based device either opens in
apple store or google play store
Tablet Home Page
1
3
2
4
1. Menu drop down when tap-
navigation sticky
2. Get started drop down to
download and/or add email
3. Tap to view list of resturants
4. Based device either opens in
apple store or google play store
Resturants
1
Slider to bring
user to diﬀerent
area
Mobile Home Page
The Process
http://2fbeub.axshare.com/home.html
Prototype Link
10

MOBILE APP PROJECT:
Creation of JBF Eats Native App
11

Overview
Client
This was a 2 week project done in July 2015 for General
The objective was to create a new app for the James Beard
Foundation.
The James Beard Foundation is a charity organization well connected
within the food industry, with a core mission to educate the public on
nutritious and sustainable eating.
My Role
As a UX designer, I was involved
throughout the process of
creating the app. I conducted an
in-depth analysis of competitors
along with a business analysis of
the client. I created personas
based on user interviews and
was part of the process of
creating hi ﬁdelity wireframes.
Problem
People don’t always make
nutritiously informed choices
when they eat and drink out. As
we continue to experience a
growing trend of people cooking
at home in order to eat healthy,
what tasty meals can “at-home
chefs” make with their kitchen’s
existing ingredients?
Opportunity
By making use of existing
ingredients in the fridge and
pantry with meals inspired by
James Beard Foundation
recipes, people can eat
nutritious, delicious, and
sustainable meals at home.
UX Designer
12

The Process
To better understand the market, we conducted
feature analysis on six apps. We created user
flows of these apps to calculate the number of
steps it took to find a particular recipe based on
ingrediets. We further researched how non
profit companies gain it’s donations and the
process of how users donate.
Non profit donation flowCompeitors user flows
Highlighted features to include in JBF app
13

The Process
Interview Quote Findings Feature
“ I usually modify a recipe to match my own
preferences.”
Dietary restrictions Nutritional value chart
“I just cook to make sure I'm eating, but I
would love to cook to please my tastebuds…
there is so much good food out there”
Delicious recipes Chef curated recipes
“I take the time to make a good dish, so I can
take the time to enjoy it more than once.”
Thoughtful cooking My favorites
“I will compare a few different recipes from the
top search results- to see what looks good &
what is the highest reviewed- but most
importantly, does it have the ingredients that I
have or can I make easy substitutions.”
Substainability Search by existing ingredients
Sally
Dana
Nancy
We created a survey to ﬁnd potential users. From the survey respondents we
interviewed 9 people in order to better understand their behaviors. Our goal was
to understand how they searched for recipes and why they choose that particular
recipe. From these interviews we were able to identify three personas.
14

The Process
Confusion of “Level”
slider. We needed to
create clear visual clues
to indicate that they
could change the level
of diﬃculty on the recipe.
Users were going
directly to the search
bar. They were also
confused between the
cook-time and cook-
time scroll bar.
Confusion after selecting
a main ingredient. Users
wondered why their
choices didn’t show up
when they were back on
the main search screen.
Edited our design to match
that of the HIG standards
with white screensliders,
slide navigation, and global
navigation.
15

The Process
1. Select Seasonal or Healthy
**seasonal selection will ask to turn on
your location in order to use***
2. Drag circle to select difficulty
3. Drag circle to select cook time
4. Tap on categories to select multply
options. Options appear next to title
once selected
1
2
3
4
1. Static navigation bar to scroll
to each section
2. Favorite this recipe,
notification will show you have
favorite recipe
3. Chef name linked to chef
profile page
4. Nutrional Icons identify what
the recipe contains- contains,
dairy, nuts, vegetarian and is
gluten free
5.Editable serving size to adjust
number of ingredients
6. Nutrional Information on the
recipe: such as fat, sodium,
calories
7. Reviews button scrolls to
review section
8. Add ingredients onto your
shopping list
3
4
1
2
5
6
7
8
1. Select Ratings or Aphabetical
to sort recipe list
2. Tap recipe box to see recipe
1
2
1. Follow chef, notification
pop
2. Select an event, sponser
link “Open Table” to reserve
seat.
3. List of recipes created
for the chef - doubles as a
navigation to that recipe
2
3
1
1. Tap section to
contribute to JBF
1
16
https://invis.io/DT5CXK6ZX
Prototype Link

DESKTOP PROJECT:
Integrating Video AMA Feature onto
Quora.com
17

Overview
Client
This was a 2 week project done in July 2015 for General
The objective was to integrate a new feature on to the existing
website.
Quora is a question-and-answer website where questions are
created, answered, edited and organized by its community of users.
My Role Problem
Quora’s opportunity is the
ability to foster a community of
known experts. This feature will
strengthen the connection and
communication among the
community by implementing a
visual question and answer
platform.
Opportunity
With the growing popularity of
AMAs (ask me anything) format,
Quora is looking to integrate this
format as a live video to monetize
on their website.
UX Designer
As a UX designer, I was involved
throughout the process of integrating
the new feature onto the existing
website. I conducted an in-depth
analysis of competitors and
interviewed potential users. I created
personas based on user interviews
and was part of the process of
creating hi ﬁdelity wireframes.
18

The Process
Reddit- 7 task- 2 pages-1 pop up
Reddit Home
Page
Submit
New Text
Post
Log In Sign In
Click Sign
In
Submit to
Reddit Page
Type Title
Type Text
“questions”
Type “Are
You Human”
code
Click
Submit
Yahoo Answers- 5 task- 3 pages
Yahoo
Answers Home
Page
Submit
Questions Log In Sign In
Click Sign
In Answer Page
Type Text
“questions”
Click
Submit
Quora- 6 task- 3 pages 1- pop up
Quora Home
Page
Log In Log In Sign In
Click Sign
In
My Quora
Page
Ask A
Question
Click
Submit
Ask Question
Type
Question
Reddit
Howcast
Yahoo
Answers
Ads
Native Ads
To better understand the
market, we conducted
feature analysis on five Q &
A websites. We created
user flows of these
websites to calculate the
number of steps it took to
ask a question. We further
researched ad placements
on websites and how
information is laid out
through lay out comparison.
Competitors user flows
Feature analysis
Lay out comparison
19

The Process
We created a survey to ﬁnd potential users. From the
survey respondents we interviewed 5 people in order to
better understand their behaviors. Our goal was to
understand how they searched for answers and or ask
questions online and why they choose that particular
answer. From these interviews we were able to identify
three personas.
The Moderator
“I love using the internet to
spark discussion. Call my an
idealist but I believe in respect
and order, even online!”
The Knowledge
Seeker
“I want to get things
done, be smarter, and
have better toys.”
The Fangirl
“I'm blogging this.”
20

The Process
Unclear meaning of award icons
Unclear meaning of green outlines
around social icons
Live chat directly next to
video is overwhelming -
sidebar distracts from video
“Current question” call out
header mistaken for an ad
We identiﬁed features based on
the personas created and
prioritized them with the MoSCoW
(Must, Should, Could, Would Not)
method. We sketched and
designed potential ideas and
created a prototype to test.
21

The Process
1. Hover state includes pop up bubble with
most recent alert message. Click to view full
page of current + previous notifications.
2. Creates visible edit boxes around profile
picture, job title, interests, and bio categories
3. Toggles to personal calendar view of
events
4. Hover state reads “Join now” to click
directly to event page
5. Clicks to event page to edit RSVP status
1. Toggles back to linear view of personal
schedule
2. Clicks directly to event page once live
3. Hover state reveals “Remove” messaging.
Clicking on hover state will remove event.
1. Automatically updates when new question
is addressed (determined by moderator)
2. Toggles to tab containing event details/
description
3. Hover state reveals pop- up bubble with
detail of moderator’s bio + role
4. Click arrow to hide side bar and expand
video
5. Clicks to user profile
6. Click expands video to full-screen mode.
Current question call- out is shown as text
within full-screen video
7. Type to reveal automated keyword drop-
down pop-up of similar questions previously
asked
8. Click to upvote comment and increase
visibility of question
1. Click arrow to reveal side-bar menu
2. Click on question to or search icon to
jump to specified question within chat stream
3. Click “Submit” to enter question to appear
first in live chat stream (identified in different
background color) for others to upvote/
downvote
3
1
2
4
5
1
2
3
1
8
2
3
4
5
7
6
2
1
3
22
https://invis.io/U63IETC7F
Prototype Link

23
Email:
ehom91@gmail.com
Linkedin:
linkedin.com/pub/elizabeth-hom/73/14/a91
Past Work:
elizabethhom.crevado.com/
Contact
Me

Elizabeth Hom's UX Portfolio

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Elizabeth Hom's UX Portfolio

Similaire à Elizabeth Hom's UX Portfolio (20)

Dernier

Dernier (20)

Elizabeth Hom's UX Portfolio