YOGGU!

DO YOUR GUT SOME GOOD

My role: UX & UI Design, Developement
Duration: 6 Weeks
Tools: Figma, Shopify
Year: 2023

Yoggu! is a Vancouver-based company that specializes in crafting thick and creamy coconut yogurt using only natural ingredients. They are also dedicated to revolutionizing the food industry with conscious consumption.

I had the opportunity to collaborate with FLATSIX technologies on this project, refining the user experience and optimizing the website. Shoutout to Aly Amlani for trusting me with this exciting project.

PROBLEM

Taking a deeper look into the original website was crucial in identifying areas for improvement. With our redesign, our intention was to shift from an e-commerce site to an informative site that would prominently showcase Yoggu!'s new product packaging.

HOMEPAGE

Remove all full width imagery hero photos
Replace with simple text and imagery to right 
How do we make this section more engaging 

Add a heading, that these are the highlights of the yogurt
Update all imagery with new packaging photos
Change CTA's to "Explore Yoggu!"
Refine this section with new imagery & copy 
Add certification logos
Remove blog

INGREDIENTS

Refine navigation bar 
Add heading 
Remove this section 
Remove hovering  and add list instead
New imagery for the ingredients 
Cut down copy 
Add heading
Add logos for each certification
Refine this section with new imagery & copy 
Add certification logos
Add section of stockists

RESEARCH

〰️ limitiations 〰️ sitemap 〰️

Due to the project's primary focus on enhancing the user experience for an informational website, the research phase was limited in scope and depth. However, the insights gathered provided valuable direction for refining the website's functionality and user interface.

Maintaining awareness of limitations and deliverables during the research phase ensures that the design stays within project constraints, preventing solutions that go beyond the scope.

DELIVERABLES & LIMITATIONS

SITE MAP

To support the transition, we created a new site map that clearly outlined which pages needed to be removed and redesigned.

IDEATION

Based on the research and analysis done, I visualized a minimal and clean website. Due to the nature of the business, the website would have to be developed using a platform that was easy to be maintained with future employees.

〰️ wireframes 〰️

WIREFRAMES

FINAL PRODUCT

〰️shopify full developed site 〰️

WANT TO LEARN MORE ABOUT MY PROCESS?