UX Design | Brand Identity
bottles-bricks-close-up-748777.jpg

'Lette Website Redesign OLD

 

'Lette Website Redesign

 
 

Role:
UX Design
UI Design
Visual Design
 

Device:
Desktop
Duration:
3 weeks
Project type:
Class Project

Methods:
Heuristic Evaluation
User Interviews
User testing
C+C Analysis
IA Card Sorting

Tools:
Pen and Paper
Whiteboard
Sketch
Photoshop
Illustrator
Invision

Deliverables:
User Persona
Journey Map
Site Map
Wireframe
Invision prototype
User Flow

 

 
 

Discover

I conducted my own heuristic evaluation of the site based on Nielson's criteria: learnability, efficiency, memorability, error management, and satisfaction (or delight.) I also did a set of user interviews and evaluated task scenarios for users to complete on the ‘Lette site. Through these methods I gained a lot of useful feedback and observations:

Pain Points
• The navigation was confusing and lead users to dead ends.
• Crucial information about their product, like arrival date and shipping price were missing or hard to find.
• Users would abandon their carts at the end of the purchasing process, surprised by the sudden appearance of a high shipping price.
• Users would want to abandon their carts when required to make an account to proceed.

User Persona and Journey Map
One big area of interest that seemed to resonate with users is that macarons are an accessible, luxurious treat that make a great gift. I took insights from my interviews and created a persona to focus on as a target audience. I also detailed out one task scenario into a journey map to highlight some of the pain points. 

 

 
remy-baudouin-94648-unsplash square.jpg

Sally Thoughtful

Age: 35
Location: Pasadena
Job: Retail and Etsy store

"I can't wait to have everyone over for dinner this weekend." 

She loves buying gifts for others.

Food is a good way to connect with others and show that you care. 

She has frustration buying online when the process feels tedious and inefficient, or when she can’t find information she needs.

 

 
 
 
 
 
 

Define

These insights lead me to focus on the following goals for the redesign:

• Simplify the navigation.
• Streamline the ordering process.
• Reflow information so users can see it when they need it. Specifically, information on shipping and arrival dates.
• Add a guest check out.

 
 
 

Develop

Simplify the navigation:
I used site maps and card sorting to simplify the navigation and make sure the content is structured in a way that considers the most important information first. In the original site map, a wide navigation leads you to pages with a lot of text. I started by running a card sort test with users to prioritize what was most important to the potential ‘Lette visitor.  The new site map condenses the amount of navigation tabs by housing all of the available items for purchase under “Shop Online.” The sub categories “Parties and Events” and “Limited Edition” give ‘Lette the flexibility to expand within these categories as their product list expands. An FAQ page was added at the bottom to answer users questions, so each page an be as straightforward as possible.

 
 
 
 
 
 

Streamline the ordering process:
The new check out process is simplified to one flow, and the choice between shipping or pick up in store is a radio button before you add your item to the cart. One of the biggest and most important pain points to address was users not seeing the shipping price until the final step in the process before payment. In the new process, the shipping price appears immediately once you chose shipping. 

 
 
User flow after.png
 
 

1 the current flow forces users to choose shipment or pick-up before choosing their item.

2 Users don’t get to see the shipping price until the very end of the process.

3 Users get to choose between shipping or pick up at a more convienient point in the flow, and they get to see the price immediately. 

 
 
 

Sketches and Wireframes

 
 
 

Deliver

The deliverable for this project was a mid/hi fidelity prototype of one user flow.

 
 
 

Reflect

As a follow up to the deliverable, I redesigned a few key screens from the user flow in a hi-fidelity mock up. Coming from a background in print design, my first go at this design was clunky and too large for web. I'm learning there's more space between text and boundaries in web than in print, so I can make my text and bounding boxes much smaller. This is a skillset I'm excited to keep working on as I progress in UX.