Redesigning Dynamic Coffee Roasters’ Website: Brewing Social Impact with Every Sip
OVERVIEW
This case study showcases my work as a UX/UI designer for Dynamic Coffee Roasters, a socially conscious coffee roasting start-up based in Pittsburgh, Pennsylvania. The project focuses on redesigning a website that not only sells premium roasted coffee but also tells the inspiring story of empowering underdog farmers from Honduras. By removing intermediaries and ensuring fair prices, the website aims to connect coffee lovers with the journey from seed to cup, fostering a sense of community and sustainability.
Timeline: 2 week design sprint - March 2023
Tools: Figma, Google Forms, Google Workspace, Maze Usability Testing
Methodologies: User Research, Competitor Analysis, Persona Development, Information Architecture, Wireframing, Visual Design, Usability Testing, Accessibility Considerations
Team: 3 UX/UI Designers - including myself
PROJECT SUMMARY
The Dynamic Coffee Roasters website redesign project revolved around creating a powerful online platform for a socially conscious coffee roasting start-up. With a key focus on empowering the farmers from Honduras, from whom they directly source their coffee, the project aimed to highlight the brand's ethical practices and commitment to fair trade. Additionally, the stakeholders sought to enhance the user experience by seamlessly incorporating information about their coffee lab's cupping classes, facilitating easy enrollment and a better shopping experience for their products. The ultimate objective was to elevate the website's user experience while effectively communicating the start-up's ideals and principles.
USERS & AUDIENCE
The primary audience consists of coffee enthusiasts who have a genuine passion for exploring and experiencing premium coffee blends. They seek unique, high-quality coffee products that are ethically sourced and support sustainable practices. These users appreciate the artistry behind coffee roasting and are interested in learning about the coffee's origin, flavor profiles, and brewing methods. The website also attracts socially conscious consumers who actively support businesses with ethical and fair trade practices. They are driven by a desire to make a positive impact on the world through their purchasing decisions. Lastly, the website caters to wholesale customers, such as cafes, restaurants, and specialty shops, seeking to source premium coffee in large batches. These wholesale buyers are interested in partnering with Dynamic Coffee Roasters to provide their customers with exceptional coffee offerings that align with their brand's image and values.
ROLE AND RESPONSIBILITIES
As a member of the team, my responsibilities included conducting interviews with stakeholders to gather essential insights and understand their vision, goals, and expectations for the website redesign. I also had a role in designing a comprehensive survey aimed at gaining valuable insights into consumers' preferences and expectations. Through thorough research and heuristic evaluations of the current website, I identified pain points and areas of improvement, guiding our team in making data-driven decisions to enhance the user interface and overall usability.
Utilizing my design skills, I brought the brand's story and offerings to life by visualizing captivating designs and creating key website pages, including the product display page, the wholesale inquiry page, and the classes offered section. I tailored the wholesale inquiry page to provide a seamless and user-friendly experience for businesses interested in bulk coffee orders. I also skillfully presented the coffee lab's cupping classes, ensuring that users could easily access information about class schedules, details, and enrollment procedures.
Recognizing the importance of accessibility, I conducted extensive research to develop an inclusive carousel component that adhered to accessibility norms, making the website more user-friendly for all visitors.
PROCESS
Interview with Stakeholders
Competitive Analysis
Heuristic Evaluation
Buyer Persona
Problem Statement
Redesign Scope
Information Architecture (IA)
Lo-fi Wireframes
Mid-fi Wireframes
Prototype
User Testing
Final Review
INTERVIEW WITH STAKEHOLDERS
An initial interview with the stakeholders was conducted to understand their goals, vision and objectives for the website redesign. By actively engaging with key stakeholders, we gained valuable insights that laid the foundation for shaping the project's direction, that’s why we met with them a couple more times. These interactions served as our compass, guiding us through the design process, and providing a clear understanding of what the project would entail.
COMPETITIVE ANALYSIS
A comprehensive competitive analysis was conducted to gain valuable insights into the coffee industry and its prevailing standards. I did a thorough examination of the two main competitors' websites and their digital presence. With this, we sought to understand their product offerings, design strategies, and user experience; this analysis helped identify opportunities for differentiation and potential gaps in the market.
HEURISTIC EVALUATION
My team and I conducted a thorough evaluation of the current Dynamic Coffee website, employing the renowned Nielsen Norman Group Jakob's Ten Usability Heuristics. Each heuristic was rated on a scale of 1 to 5, with 5 indicating the most severe issues. We determined the most pressing usability concerns that necessitate immediate attention to enhance the overall user experience. These critical issues revolve around Visibility of System Status, Flexibility and Efficiency of Use, and Aesthetic and Minimalist Design Approach.
BUYER PERSONA
Our buyer persona is Logan Reed, a coffee enthusiast working in the tech world. By catering to the preferences and needs of buyers like Logan, the redesigned Dynamic Coffee Roasters website can forge a strong and lasting connection with its target audience, creating a loyal customer base of coffee enthusiasts who appreciate the brand's commitment to ethical practices and exceptional coffee experiences.
PROBLEM STATEMENT
Dynamic Coffee Roasters, a socially conscious coffee roasting start-up, faces challenges in providing a seamless and engaging online experience for its target audience. The current website lacks clear messaging, has usability issues, and fails to effectively showcase the brand's commitment to ethical sourcing and farmer empowerment. Additionally, the absence of a functional Point of Sale (POS) system hinders online sales, and critical product and service listings are missing.
REDESIGN SCOPE
The scope of the redesign project aims to create a user-centric website that not only provides a delightful and informative coffee exploration experience but also effectively communicates Dynamic Coffee Roasters' ethical principles and commitment to empowering underdog farmers. By addressing these key areas, the redesigned website will establish itself as a trusted platform for coffee enthusiasts seeking exceptional coffee products and educational resources, while supporting a meaningful social and environmental impact.
INFORMATION ARCHITECTURE (IA)
By structuring the website's content using this information architecture, users can easily navigate through the different sections, access relevant information, and explore the premium coffee blends, cupping classes, and wholesale options offered by Dynamic Coffee Roasters. The organized layout will ensure a seamless and enjoyable user experience, while effectively communicating the brand's values and mission to empower underdog farmers and promote ethical sourcing.
LO-FI WIREFRAMES
Lo-fi wireframes served as a foundation, providing my team and me with valuable insights into the direction of the mid-fi wireframes and high-fidelity prototype. Balancing ease of use and visually appealing content, these wireframes allowed us to envision the website's structure and layout effectively. The information architecture played a crucial role in guiding our design decisions, ensuring a clear understanding of the project's objectives and what needed to be achieved.
MID-FI WIREFRAMES
Utilizing Figma, we crafted the mid-fi wireframes with meticulous attention to detail. Our primary focus was on refining the content from the lo-fi wireframes and ensuring a seamless user experience, all while delivering visually captivating content. By leveraging Figma's design capabilities, we struck a balance between user-centric functionality and aesthetic appeal, creating a compelling foundation for the website's development.
PROTOTYPE
The hi-fi wireframes and prototype for the new Dynamic Coffee Roasters website left us immensely satisfied as a team. Addressing all major pain points, we prioritized inclusivity by incorporating essential accessibility features. The proposed website fulfills all stakeholders' requirements and vividly portrays the heartwarming stories of farmers, showcasing the company's genuine care and commitment towards them. We are confident that the new website will not only captivate users but also resonate deeply with the brand's values and mission.
USER TESTING
The user testing phase, conducted using the Maze Usability Testing platform, yielded promising results, highlighting the prototype's potential for success. Our primary focus during testing was to ensure users could add products to their cart and complete the checkout process effortlessly. The outcomes were encouraging, with 8 out of 10 users accomplishing the mission seamlessly. These positive results reaffirmed our confidence in the prototype's user-friendly design and its capacity to deliver a hassle-free shopping experience for potential customers.
FINAL REVIEW
In a final meeting with the stakeholders, my team and I showcased the prototype for the redesigned webpage. The stakeholders' positive response was evident as they expressed genuine delight in how we presented the heartwarming stories of farmers and highlighted the coffee farms they support. The prototype's alignment with their vision and objectives resonated with them, leading to their enthusiastic approval. With their green light, we delivered a fully functional and visually appealing prototype, enabling them to set the wheels in motion for their refreshing new website.
CONCLUSION
The Dynamic Coffee Roasters website redesign project has been an invaluable learning experience, providing me with insights into e-commerce design standards. Working closely with stakeholders, I grasped their needs and desires, which guided us in delivering a prototype aligned with their vision and user expectations. I am confident that the redesigned website will captivate visitors with its aesthetically pleasing design and offer a seamless coffee exploration journey. I look forward to the company implementing our design and witnessing the positive impact it will have on their business.