'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 executed design on a new 'Lette site with with new information architecture, new ordering flow, and new web design. For fun, I also redesigned select screens twice, once sticking to the current branding set by 'Lette, and once with my own brand design for 'Lette.
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.
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:
• 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.
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.
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.
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.
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.