This project was designed as a part of the Essentials of Interactive design-IDD 501 course during my master's in UXIX at Jefferson University.
'Larabar' is an energy bar-selling company that produces amazing, tasty, and delicious bars that are made with 100% real ingredients. Larabars were available easily in the market at affordable prices. But the only problem is that there is no E-commerce presence on the existing website.
Whenever people want to buy Larabars, they have to visit nearby stores or if they want to buy them online, they have to order them through online retail stores like Amazon, Walmart, etc. This takes away the true essence of the brand which is real goodness. So, our team worked on bringing an E-Commerce presence to the existing website that helps our consumers buy Larabars directly on-site whilst immersing in the experience that our re-designed website provides.
| Time Duration | My role | Tools | Scope | Team |
|---|---|---|---|---|
| 14 weeks [Jan-Apr 2022] | UX Research | Figma | Research Analysis | Sanjana Shah |
| UX Design | Miro | Heuristic evaluation | ||
| Prototyping | Baymard Institute | Baymard analysis | ||
| Wireframing | Low-fidelity wireframes | |||
| Usability testing | High-fidelity prototypes | |||
| Usability testing |
In our design process, we have done an intensive UX sprint for this project. On a mission to create seamless experiences for Larabar customers, we realized that there is more to be done to existing elements than we anticipated.
We conducted a heuristic evaluation for the current website using the Baymard analysis tool to understand UX performance benchmarking, and identify usability issues. Then with user engagement, we elicited UX outcomes so we can give what user really wants to purchase protein bars on this website. After making a plan on how to move forward, the team began iterative design-building cycles.
The main objective of the project was a responsive web prototype with element-level interactivity. We used Heuristics to evaluate existing usability ness and used them to redesign the website whilst integrating E-Commerce presence so that users can have a seamless shopping experience. All deliverables were designed to allow Larabar to expand its website with visual and structural cohesion.
Link to Product Documentation.
The Baymard tool is used to find out usability issues, create the state of art user experiences and measure how the UX performance stacks up against leading E-commerce sites.
You may be wondering if we were to just redesign and integrate an E-commerce presence, why are we bothering to evaluate at all? For the purposes of the project, this evaluation serves a number of benefits.
1) We understood the overlying faults in the website that have not been caught.
2) We also wanted to use the evaluation as a vehicle to communicate the relationship between usability, visual design, and user experience for our users.t
3) Finally, it helped shed ineffective design thinking that may linger from the rendition of the existing website