Tools: Figma, Figjam, Adobe Illustrator

Collaborators: Riya Dave, Shivani Gnan, Rebecca Cisman

<aside> 💡 For the first iteration of University of Waterloo’s women+ hackathon, TechNova, I worked in a team of 4 to design an interactive application to serve users by recommending tea types that will support their mental wellbeing.

</aside>

The illustrations used in the application, such as the logo and other graphics were designed using design platforms, such as Adobe Illustrator. The design of the application prototype was completed using Figma and Figjam.

The application is designed using a variety of frames, which can be seen below. The goal of the frame design was to build…

1. ‘Welcome’ page for users to sign-in, allowing them to use customization features.
2. ‘Discover’ or ‘For You’ page to find different styles of tea, recommended on the basis of previous drink favourites.
3. ‘Survey’ form to collect user input on their mood, previous medical history, and personal health goals. This information is then used to inform the user about the style of tea they are recommended to drink according to their input. The app also displays where the user can find these tea styles on the ‘Discover’ page.
4. ‘Spill the Tea’ forum for users to interact and ask questions/chat anonymously.
5. ‘TeaTime’ private journal entries for users to share daily affirmations, and other mental health reflections.

Check out the prototype developed on Figma, incorporating all of these different functionalities. The image on the left showcases how the app would appear on an iPhone.

Figma file showcasing the different frames that were prototyped for the app design.

To demo the application yourself, check out the Figma link below! https://www.figma.com/proto/6WZUay261OVagDDIlKta7e/Levi's-Tea-Shop?type=design&node-id=32-56&t=XRzdVph4HEV63E5E-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=30%3A2&show-proto-sidebar=1&mode=design

Project Challenges: While working on this application, the key challenges faced included…

• Creating a scroll effect on the ‘Survey’ page. This was the first time testing out Figma features for overflow on the prototype screens.
• It was also our first time wire framing so many different prototype screens. It was a great exercise to get familiar with how to keep the wire frames organized.