UX/UI | Front-end Development | Information Architecture
Jaspers Coffee
Company
Acorn Strategy
Tools
Figma, Shopify, and Agile workflows.
Role
Lead UI designer and Technical Consultant
Deliverables
Manage a website migration and redesign along with the integration of coffee subscriptions, and a starter subscription to enhance recurring revenue opportunities.
Year
2022
The Jasper’s Coffee project had a significant conversion impact by transforming their online store into a revenue-driving platform. By enhancing the user experience with intuitive navigation and compelling storytelling, the redesign increased customer engagement, streamlined the purchase process, and positioned the brand as a premium player in the competitive coffee market.
End-to-end Website Migration & Redesign
Overview
This project focused on redesigning and migrating an e-commerce website to optimize user experience and drive business growth. Key improvements included a responsive design, enhanced accessibility, and the introduction of features like detailed product descriptions and a loyalty program ("Keeb Points") to boost customer satisfaction. The launch successfully improved the brand's competitive edge, strengthened community engagement, and increased conversion rates.
My Contributions
Throughout the project, our primary objective was to enhance user experience by refining navigation and collection filters, thereby streamlining product discovery and searchability.
My responsibilities included a comprehensive redesign of the homepage, optimizing the hierarchy of collections, within the navigation, and implementing intuitive product sorting filters.
As a lead UI designer, I also served as a developer and main point-of-contact for the duration of the project. During the migration and redesign, I -
Conducted user research and competitor analysis to identify opportunities for differentiation and inspiration for optimized functionality.
Designed wireframes and high-fidelity prototypes in Figma, focusing on intuitive navigation and compelling product pages.
Developed responsive layouts with optimized user flows for seamless desktop and mobile experiences.
Integrated a subscription feature for recurring coffee deliveries, improving customer retention and boosting sales.
Collaborated with developers to implement the design, ensuring pixel-perfect execution and usability testing before launch.
Product and collection setup.
Website audit and optimization strategy.
Add features and functionality to the store that require custom code, and custom-built apps.
Research
We started our research with heuristic evaluations, competitor analyses, and benchmarking to guide our design decisions. This helped define the site's features, functionality, structure, and content flow. Market research and user feedback shaped the improved design, while large-scale photography and unique elements enhanced the look and usability of the site.
Competitor Analysis
By analyzing the functionality and UX of competitor websites, we gained valuable insights into their tech stacks, strengths, and weaknesses. This helped us identify opportunities to differentiate Jasper’s Coffee and enhance the overall user experience. Our goal was to ensure the website migration included an updated tech stack and modern UI design patterns, setting the merchant up for success in a competitive market.
During the benchmarking process, we identified key UI design patterns and third-party features from competitors that informed our approach.
Information Architecture
We analyzed the website's information architecture and product structure to understand how users access and navigate the site. By reviewing the layout, labeling, and product details, we identified areas for improvement to ensure users can easily find what they’re looking for.
By creating a clearer structure and simplifying navigation, we aimed to deliver a more user-friendly sitemap that enhances the overall browsing experience.
Wireframes & Revisions
We began by creating low-fidelity wireframes for the e-commerce product and collection pages, focusing on key user flows like browsing, filtering, and adding products to the cart. These wireframes served as the foundation for collaborative discussions with the client, allowing us to refine the structure and layout based on their feedback. Through several iterations, we optimized the design to highlight product details, improve visual hierarchy, and simplify navigation.
Taxonomy Implementation
Translating sitemap and UX requirements into refined website mockups, then seamlessly integrating them into the navigation and collection filters during development.
Typography Guidelines
During the process of migrating and redesigning the outdated website, our main hurdle was the lack of a clear style guide.
By collaborating closely with the stakeholders, we utilized their two existing fonts to create updated UI guidelines. This ensured consistency across the website, revitalizing its visual appeal and reinforcing the brand's presence.
Our typography guidelines ensure consistency in fonts, spacing, and brand colors for a cohesive and recognizable design.
Color Guidelines
In the redesign process, I made strategic use of the existing brand colors to maintain consistency and reinforce brand identity.
View Live Project
By refining navigation and enhancing product discoverability, we've laid the foundation for a seamless browsing experience through thoughtfully merchandising the site to improve ease of navigation and make products more easily findable.
The successful implementation of coffee subscriptions, starter packages, and redesigned product pages allows customers to easily sign up for recurring deliveries of their favorite products.
Through strategic integration of upsells, product reviews, and loyalty programs, we've not only enhanced conversion rates but also fostered long-term customer loyalty.
The technical integrations, rigorously tested and flawlessly executed, ensure a robust and reliable online platform.