THE
BRIEF
Esme Learning provides career transforming online executive education by delivering high impact AI-enabled online learning. The current Shopify site had too much content that focused too much on SEO, and not enough storytelling and interactive experience. The navigation was lacking, and displaying all of the classes in a large megamenu that used a large amount of real estate. The large menu was not sustainable for the amount of classes they were adding each year as it would expand the menu further. Additionally, the carting process was confusing for users because unnecessary steps were added to the checkout process.
SERVICES PROVIDED
Web Design
UX/UI Design
THE APPROACH
Identifying the User: Our team identified user pain-points and 3 personas were developed that best described the users of the website. These personas helped us to understand the logic and demographic of Esme’s site visitors. The users needed to be able to browse classes easily without sifting through content and needed to be able to view courses without accessing the megamenu. Users need to checkout easily without re-entering information.
Wireframes + Sitemaps: I created user flows and mapped the journey of the average user. I created preliminary wireframes using Figma focusing on structure and experience.
High fidelity designs: High-fidelity designs were created using Figma. Design systems were created and implemented into a usable style guide. Regular design reviews were coordinated with the development team to make sure that certain interface appearances and experiences were feasible.
THE SOLUTION
A fully-responsive eComm site was redesigned using a bespoke modern interface. The megamenu was removed and the courses are now browsable within the courses tab. This experience gave more real estate to the page so the users could navigate the site without obstruction. The carting process was streamlined, allowing for a seamless checkout experience which led to 10% lower cart abandonment.
