UI/UX Case Study

Sarah Putnam 2021

 WHO
This is for people who want to shop for key items without going into a
physical store.

WHAT
A responsive website, web app, and/or mobile app that shows users the
inventory and can be filtered in particular ways depending on their needs.

An online
WHERE
Users can easily shop from anywhere they can connect to the internet,
whether on a mobile device or on a desktop.

succulent shop WHEN

This product will be used most often on commutes to and from work, in the
evenings, during lunch breaks, and on weekends.

WHY
Users don’t have the time or ability to visit physical stores and would rather
buy their goods on the go or from home.
Guiding Principals
We believe that joy and happiness are often found in simple things, and that succulents are a
beautiful and sustainable way to decorate a space and brighten a day.

Traditional flower arrangements will wilt, and decorative items often sit on shelves and gather
dust. Succulents, however, will bring beauty and life to their surroundings for years to come.

Whether they are gifted to someone special, or kept for yourself, we are excited to share our
knowledge and passion for succulents!
Brand Values

Joy Simplicity Playfulness

The unique beauty of our Like the simple geometric
succulents can brighten lines of our plants, our
and bring happiness to any brand is crisp and
space. straightforward. We avoid
visual clutter and fussiness.
We don’t take ourselves
too seriously. We think our
succulents are just more
fun than traditional floral
arrangements.
 Primary Logo

Always featured on a white background,

and in the main succulent green color.

Initial Use Color Options

The logo can be The logo initial can

simplified to an initial be used in white on
for small spaces, a colored
buttons and icons. background.

This may be featured Background color

with or without the can be succulent
circle, but always on a green, or the
white background in secondary brand
the succulent green colors of misty violet
color. and desert pink.
Primary Colors

#A6D5A9 #59585C

For major elements, buttons and text.

Dark grey is used instead of pure
black for text.

Secondary Colors

#F0D9CA #9A98A0

For accent elements. Can be used

as background with white text.
Image Style
• Backgrounds are light and neutral.
• There is minimal visual clutter, and simple
arrangements of products are featured
within vignettes.
• Overall color palette uses earthy pastel
tones.
• Simple line drawing illustrations are used
throughout.
Writing Style
The overall tone is conversational and friendly.
Any directions or guidance is given in a
straightforward manner. Word choice is
casual and often includes humor (and an
intentionally bad plant pun here or there).
Typography
Kandira
Used only for the logo. This font is simple with
rounded contours that mirror the shapes of succulent
leaves. It should never be used for main text body or
headlines.
San Francisco Pro Rounded
Used for all other text. It is a simple sans serif font
with subtle rounded elements that compliment the
logo text and overall visual style of the app. Further
visual hierarchy will be established with font size
• The headlines are SF Pro Rounded in Bold
• Body text is SF Pro Rounded in Regular
 USER FLOW

USER STORIES
• As a new customer, I want to access the
inventory without having to register, so
that I can make sure this store has what
I’m looking for before having to create
an account.
• As a frequent customer, I want to be able
to save my favorite search criteria, so
that I can easily find what is most
relevant to me.
• As a customer, I want to be able to place
multiple items in a shopping cart, so that
I can purchase more than one item at a
time.
 User Testing Molly: 40-55, Teacher
• Didn’t know which product photos went with
what description/price.
• Had to look for checkout button, not enough
Three individuals participated in user testing for contrast.
this design. They used a prototype of the mid-
level wireframes to complete the following task:

Matthew: 30-40, Analyst

“Add three of the same product to your
shopping bag and then checkout.” • Is there are place to see current subtotal of cart
and not just specific items?

Prototype link:
https://balsamiq.cloud/seozz37/pb8u3vz/r75E8 Emily: 30-40, Designer
?f=N4IgUiBcAMA0IDkpxAYWfAMhkAhHAsjgFo
4DSUA2gLoC%2BQA%3D • Is quantity in shopping bag the total of
everything, or the total of each product?
• Wanted to see the specific item confirmed on
the “added to cart” window.
I used the main takeaways from their feedback
to make edits for my high fidelity wire frames.
Low Fidelity Wireframes
Mid Fidelity Wireframes
High Fidelity Wireframes

EDIT EDIT EDIT EDIT

Product photo and More visual contrast More details added to Individual items shown
name/price placed on for the Shopping cart confirmation: product, on elevated tiles
the same elevated tile for button quantity, subtotals. instead of list form.
clarity
High Fidelity Wireframes
High Fidelity Wireframes
High Fidelity Wireframes
Web Design
Thanks You

Thank You!