'Lette Website eCommerce Redesign
Overview: 'Lette Macarons is an LA based Macaron shop with several brick and mortar sites, as well as a website to order macarons and other services online. They have a great company message and quality products, but the eCommerce aspect of the current 'Lette site is hard to use, and could be hindering their online sales.
Challenge: Through UX research, pinpoint user frustrations with the order online process and define goals to redesign the user flow for purchasing online.
Solution: I found through research the whole architecture of the site needed to be redesigned, as well as the ordering online user flow. I redesigned the 'Lette site with with new information architecture, new ordering flow, and a new "build a box" flow.
Role: UX Design, UI Design, Visual Design.
Type: Class Project, 2 weeks.
Platform: Responsive Web.
Deliverables: User Persona, Journey Map, Site Map, Wireframe, Invision prototype, User Flow.
Tools: Pen and Paper, Whiteboard, Sketch, Photoshop, Illustrator, Invision.
Methods: Heuristic Evaluation, User Interviews, User testing, C+C Analysis, IA Card Sorting.
• 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.
Macarons are an accessible, luxurious treat that make a great gift.
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.
Illustrated Customer Journey Map
• 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.
Simplify the navigation:
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.
Sketches and Wireframes
The deliverable for this project was a mid/hi fidelity prototype of one user flow.
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.