Asixth Coffee Startup

Designing a mobile app to connect food enthusiasts through shared dining experiences, from concept to prototype.

Role

Product Designerr

Role

Product Designerr

Role

Product Designerr

Industry

Food & Beverage

Industry

Food & Beverage

Industry

Food & Beverage

Duration

1 year

Duration

1 year

Duration

1 year

Stage 1: Market Research and Competitor Analysis

Comprehensive Market Research: Initiated the project with extensive market research, focusing on the specialty coffee industry. This included analyzing customer preferences, digital behaviors, and emerging trends in the coffee market.

Competitor Analysis: Conducted a detailed analysis of key competitors, particularly Blue Bottle Coffee and WatchHouse. Blue Bottle's website was known for its minimalist design, emphasis on high-quality imagery, and strong brand storytelling, while WatchHouse excelled with its modern design and community-driven content. Identified opportunities for Asixth Coffee Company to differentiate itself by offering more personalized content, enhancing the user journey, and integrating interactive elements like brewing guides.

Customer Insights: Through surveys and interviews with potential and existing customers, we gained insights into their expectations from a coffee brand's website. Key findings highlighted the importance of easy navigation, detailed product information, and educational content on coffee brewing techniques. There was also a growing interest in subscription services and sustainable sourcing.

Value Proposition Development: Synthesized research and competitor analysis to craft a strong value proposition for Asixth Coffee Company. Positioned the website as a comprehensive coffee experience, focusing on storytelling, a seamless shopping experience, personalized product recommendations, and a robust educational section for coffee enthusiasts.

Stage 2: Concept Development and User Flow Design

Conceptualization and Ideation: Led brainstorming sessions with the design and strategy teams to develop innovative ideas that aligned with Asixth Coffee Company’s brand identity and customer needs. Concepts included features like virtual coffee tastings, customizable subscriptions, and an integrated community blog.

Competitor-Based Adjustments: Refined the conceptual approach based on the competitor analysis, balancing aesthetic appeal and functionality. The goal was to offer a more personalized experience and richer educational content compared to Blue Bottle and WatchHouse.

User Persona Development: Created detailed user personas representing different segments of the target audience, such as:

  • The Casual Drinker: Seeks a simple, convenient shopping experience with occasional educational content.

  • The Coffee Aficionado: Desires detailed information on coffee origins, brewing methods, and the opportunity to explore different blends.

  • The Ethical Consumer: Prioritizes brands that emphasize sustainability and fair trade practices.

User Flow Design: Mapped out user flows for key interactions, ensuring intuitive navigation and enhancing user satisfaction. Key flows included:

  • Product Discovery: Simplified pathways for users to explore and learn about coffee blends.

  • Subscription Setup: Streamlined process for creating and managing coffee subscriptions.

  • Educational Content Navigation: Easy access to brewing guides, coffee stories, and sustainability information.

  • Checkout Process: Optimized for speed, security, and conversion, with clear calls to action.

Stage 3: UI Design and Prototyping

Wireframing and Initial Prototyping: Developed detailed wireframes using Figma, focusing on a visually appealing, user-friendly interface. Ensured the design was responsive and optimized for various devices, particularly mobile.

Design Language and Aesthetics: Selected a warm, earthy color palette and clean, modern typography to reflect the brand’s artisanal qualities. Integrated high-quality images and video content to create an immersive experience, showcasing the coffee-making process and the story behind each blend.

Competitor-Inspired Refinements:

  • Blue Bottle Influence: Emphasized minimalist design, clear navigation, and product-focused content for an engaging user experience.

  • WatchHouse Influence: Incorporated community-driven elements like user-generated content, customer reviews, and social media integration to build community engagement.

High-Fidelity Prototyping: Developed high-fidelity prototypes that showcased key features, such as:

  • Dynamic Home Page: Featuring rotating hero images, quick access to popular products, and highlights of Asixth’s coffee philosophy.

  • Product Pages: Detailed profiles for each coffee blend, including origin stories, tasting notes, and brewing tips.

  • Subscription Interface: An interactive tool for customizing coffee subscriptions, with options for blend preferences and delivery frequency.

  • Educational Section: Rich multimedia content on coffee brewing methods, sustainability practices, and the art of coffee.

Iterative Design Process: Conducted multiple rounds of design reviews and user testing to refine the prototypes. Adjusted elements based on feedback to improve navigation, content accessibility, and overall user experience.Stage 4: Development, User Testing, and Iteration

Frontend and Backend Development: Led the development phase, ensuring that the UI/UX designs were accurately implemented. Utilized Kotlin for mobile optimization and Laravel for backend development. Focused on creating a responsive, high-performance website that delivered a seamless user experience across devices.

Admin Dashboard and Roaster Development: Contributed to the development of the admin dashboard, providing an intuitive interface for managing product inventories, tracking customer orders, and analyzing sales data. Developed the roaster section, allowing Asixth Coffee Company to efficiently manage their coffee roasting process and inventory.

Feature Exploration and Optimization: Explored and implemented new features to enhance the website, such as personalized coffee recommendations and an interactive brewing guide. Worked on optimizing the website for SEO, ensuring faster load times and improved search engine rankings.

User Testing Sessions: Organized user testing sessions with a diverse group of participants to gather feedback on the website’s usability and appeal. Utilized both in-person and remote testing methods to collect a broad range of insights. Analyzed feedback to identify usability issues and areas for improvement, leading to design iterations that enhanced functionality and overall user experience.

Iteration and Refinement: Implemented design changes based on user feedback, focusing on improving ease of use, streamlining navigation, and ensuring that the website met the needs of its diverse user base. Conducted additional rounds of testing to validate these changes, ensuring a polished final product.

Stage 1: Market Research and Competitor Analysis

Comprehensive Market Research: Initiated the project with extensive market research, focusing on the specialty coffee industry. This included analyzing customer preferences, digital behaviors, and emerging trends in the coffee market.

Competitor Analysis: Conducted a detailed analysis of key competitors, particularly Blue Bottle Coffee and WatchHouse. Blue Bottle's website was known for its minimalist design, emphasis on high-quality imagery, and strong brand storytelling, while WatchHouse excelled with its modern design and community-driven content. Identified opportunities for Asixth Coffee Company to differentiate itself by offering more personalized content, enhancing the user journey, and integrating interactive elements like brewing guides.

Customer Insights: Through surveys and interviews with potential and existing customers, we gained insights into their expectations from a coffee brand's website. Key findings highlighted the importance of easy navigation, detailed product information, and educational content on coffee brewing techniques. There was also a growing interest in subscription services and sustainable sourcing.

Value Proposition Development: Synthesized research and competitor analysis to craft a strong value proposition for Asixth Coffee Company. Positioned the website as a comprehensive coffee experience, focusing on storytelling, a seamless shopping experience, personalized product recommendations, and a robust educational section for coffee enthusiasts.

Stage 2: Concept Development and User Flow Design

Conceptualization and Ideation: Led brainstorming sessions with the design and strategy teams to develop innovative ideas that aligned with Asixth Coffee Company’s brand identity and customer needs. Concepts included features like virtual coffee tastings, customizable subscriptions, and an integrated community blog.

Competitor-Based Adjustments: Refined the conceptual approach based on the competitor analysis, balancing aesthetic appeal and functionality. The goal was to offer a more personalized experience and richer educational content compared to Blue Bottle and WatchHouse.

User Persona Development: Created detailed user personas representing different segments of the target audience, such as:

  • The Casual Drinker: Seeks a simple, convenient shopping experience with occasional educational content.

  • The Coffee Aficionado: Desires detailed information on coffee origins, brewing methods, and the opportunity to explore different blends.

  • The Ethical Consumer: Prioritizes brands that emphasize sustainability and fair trade practices.

User Flow Design: Mapped out user flows for key interactions, ensuring intuitive navigation and enhancing user satisfaction. Key flows included:

  • Product Discovery: Simplified pathways for users to explore and learn about coffee blends.

  • Subscription Setup: Streamlined process for creating and managing coffee subscriptions.

  • Educational Content Navigation: Easy access to brewing guides, coffee stories, and sustainability information.

  • Checkout Process: Optimized for speed, security, and conversion, with clear calls to action.

Stage 3: UI Design and Prototyping

Wireframing and Initial Prototyping: Developed detailed wireframes using Figma, focusing on a visually appealing, user-friendly interface. Ensured the design was responsive and optimized for various devices, particularly mobile.

Design Language and Aesthetics: Selected a warm, earthy color palette and clean, modern typography to reflect the brand’s artisanal qualities. Integrated high-quality images and video content to create an immersive experience, showcasing the coffee-making process and the story behind each blend.

Competitor-Inspired Refinements:

  • Blue Bottle Influence: Emphasized minimalist design, clear navigation, and product-focused content for an engaging user experience.

  • WatchHouse Influence: Incorporated community-driven elements like user-generated content, customer reviews, and social media integration to build community engagement.

High-Fidelity Prototyping: Developed high-fidelity prototypes that showcased key features, such as:

  • Dynamic Home Page: Featuring rotating hero images, quick access to popular products, and highlights of Asixth’s coffee philosophy.

  • Product Pages: Detailed profiles for each coffee blend, including origin stories, tasting notes, and brewing tips.

  • Subscription Interface: An interactive tool for customizing coffee subscriptions, with options for blend preferences and delivery frequency.

  • Educational Section: Rich multimedia content on coffee brewing methods, sustainability practices, and the art of coffee.

Iterative Design Process: Conducted multiple rounds of design reviews and user testing to refine the prototypes. Adjusted elements based on feedback to improve navigation, content accessibility, and overall user experience.Stage 4: Development, User Testing, and Iteration

Frontend and Backend Development: Led the development phase, ensuring that the UI/UX designs were accurately implemented. Utilized Kotlin for mobile optimization and Laravel for backend development. Focused on creating a responsive, high-performance website that delivered a seamless user experience across devices.

Admin Dashboard and Roaster Development: Contributed to the development of the admin dashboard, providing an intuitive interface for managing product inventories, tracking customer orders, and analyzing sales data. Developed the roaster section, allowing Asixth Coffee Company to efficiently manage their coffee roasting process and inventory.

Feature Exploration and Optimization: Explored and implemented new features to enhance the website, such as personalized coffee recommendations and an interactive brewing guide. Worked on optimizing the website for SEO, ensuring faster load times and improved search engine rankings.

User Testing Sessions: Organized user testing sessions with a diverse group of participants to gather feedback on the website’s usability and appeal. Utilized both in-person and remote testing methods to collect a broad range of insights. Analyzed feedback to identify usability issues and areas for improvement, leading to design iterations that enhanced functionality and overall user experience.

Iteration and Refinement: Implemented design changes based on user feedback, focusing on improving ease of use, streamlining navigation, and ensuring that the website met the needs of its diverse user base. Conducted additional rounds of testing to validate these changes, ensuring a polished final product.

Stage 4. User testing and iteration

  • Organized user testing sessions with a diverse group of participants to gather feedback on the app's usability and appeal. Utilized both in-person and remote testing methods to collect a wide range of insights.

  • Analyzed feedback to identify usability issues and areas for improvement. Implemented design iterations to address user concerns, enhance the app's functionality, and improve the overall user experience.

Stage 5. Final presentation and handoff

  • Compiled and presented a comprehensive project report to the internship team and stakeholders, detailing the design process, user testing findings, and final app design. The presentation highlighted the app's potential to foster social connections through shared dining experiences.

  • Prepared and delivered design specifications and assets to the development team, ensuring a smooth handoff and providing support during the initial stages of app development.

Reflections

Stage 5: Final Presentation, Handover, and Ongoing Maintenance

Final Presentation and Handoff: Compiled and presented a comprehensive project report to the Asixth Coffee Company team, detailing the design process, user testing findings, and the final website design. The presentation emphasized the website’s potential to create a strong digital presence and engage coffee enthusiasts.

Design Specifications and Asset Handoff: Prepared and delivered detailed design specifications and assets to the development team, ensuring a smooth handoff. Provided support during the initial stages of website deployment, assisting with any technical or design-related issues.

Project Handover: Successfully handed over the project to the Asixth Coffee Company team, providing comprehensive documentation and training to ensure they could manage and update the website independently. The handover included guides on using the admin dashboard, updating content, and managing the roaster section.

Ongoing Maintenance and Feature Exploration: Took responsibility for maintaining the website post-launch, ensuring all features continued to function smoothly. Regularly explored and suggested new features to keep the website current and engaging for users. This ongoing involvement ensures that the Asixth Coffee Company website remains a top-tier platform for coffee lovers, continually evolving to meet their needs.

Reflections

Stage 5: Final Presentation, Handover, and Ongoing Maintenance

Final Presentation and Handoff: Compiled and presented a comprehensive project report to the Asixth Coffee Company team, detailing the design process, user testing findings, and the final website design. The presentation emphasized the website’s potential to create a strong digital presence and engage coffee enthusiasts.

Design Specifications and Asset Handoff: Prepared and delivered detailed design specifications and assets to the development team, ensuring a smooth handoff. Provided support during the initial stages of website deployment, assisting with any technical or design-related issues.

Project Handover: Successfully handed over the project to the Asixth Coffee Company team, providing comprehensive documentation and training to ensure they could manage and update the website independently. The handover included guides on using the admin dashboard, updating content, and managing the roaster section.

Ongoing Maintenance and Feature Exploration: Took responsibility for maintaining the website post-launch, ensuring all features continued to function smoothly. Regularly explored and suggested new features to keep the website current and engaging for users. This ongoing involvement ensures that the Asixth Coffee Company website remains a top-tier platform for coffee lovers, continually evolving to meet their needs.

Other projects

Create a free website with Framer, the website builder loved by startups, designers and agencies.