‘Lette Macarons is a business specializing in Parisian macarons. I pursued the opportunity of redesigning the user experience and user interface of their E-commerce website.
My Role: User Experience & Interface Design, User Research
Duration: 2 weeks
Tools Used: Sketch, Invision
The Challenge
Potential customers are dissatisfied with the complicated, time-consuming process to purchase macarons online.
The Solution
Streamline the check out flow in order to optimize the user’s experience — done by minimizing the options in the primary navigation and simplifying the method of choosing macarons for purchase.
The Research
Conducting research was an iterative process through out this project. While the research began with looking at the site, the competitors, and the current users, utilizing research methods such as usability testing was essential up until the current state of my prototype.
The initial step was conducting a heuristic evaluation. I utilized the LEMERs methodology to identify flaws and rated them by severity—from cosmetic problems to catastrophes.
Interviews
Users of the site were interviewed to gain insight into pain points and opportunities for improvement.
“Dragging each macaron into the box is a complete waste of time.”
“...so frustrating.”
“This site looks shady.”
User Persona
I created a user persona to determine the type of person for which I’d be designing.
Meet Tania. Tania’s goals and pain points guided my design decisions to ensure that I was consistently targeting the needs of the end user.
Journey Map
Visualizing Tania’s experience.
The Design Ideation
Site Mapping
I conducted open card sorting to redesign what was evidently a major flaw: the navigation.
The new site map is intended to optimize the information architecture by prioritizing what the user would like to see while also considering what the company would like to accomplish.
The primary navigation went from 8 options to 3. Swipe to see the original.
Wireframes
Low Fidelity
I used paper wireframes as a low fidelity prototype to gauge how the user would interact with my designs and to further guide my implementation.
What I did with what I learned from users:
Included a notification when the user has filled their gift box
Inputted a new page upon completion of purchase rather than a modular pop up
Included further personalization of shipping options
Medium Fidelity
The medium fidelity prototype was made with the intention of communicating design concepts, showcasing the hierarchy of elements on each page, and to gain a better understanding of functionality.
What I did with what I learned from users:
Adjusted sizing to suit the information hierarchy
Further emphasized buttons
Optimized hotspot locations
Capturing the Mood
Curating a mood board aided in the visual design of the high fidelity wireframes. I found it important to stay true to ‘Lette Macarons’ vision while providing a modern twist.
The Prototype
The insights gained through the research and usability testing have resulted in the latest form of the prototype—experience it for yourself.
Original site for reference: https://www.lettemacarons.com/
Reflections
This project was essential to me as it greatly improved my ability to provide modern solutions while still remaining true to an existing business’ values and vision.
Moving forward, I would like to continue testing the usability of the site and continue improving and iterating on the designs.