Good on You App: Reverse Wire framing exercice

The ‘Search Brand’ flow of ‘Good on You’ app

I chose to work on Good on You app because I use it often to check on fashion brands ethics to make a purchase. I want to understand how it leads to a redirected sale.

I think the Sustainable lifestyle market is gaining momentum and growing. However, it is hard for the common consumer to find and choose brands that matches their style, lifestyle and ethics. Therefore there’s a need for tools and exciting informative platform to simplify that journey.

Task Analysis: What overall tasks are users trying to accomplish on the Search brand user flow of ‘Good On You’?

• Checking a brand’s ethics
• Decide to shop or not

How are users are completing that task :

• Using the ‘Good on You’ search engine
• Reading ‘Good on You’ content

UI Elements

• Search bar
• List boxes
• Button
• Icons
• Drop-down lists
• Text Links
• Fixed bottom bar menu
• Textfields

Wireframing a basic flow: I used sketch to mid-fi wireframe with the fantastic UI kit from Ironhack

I am really excited to start using Invision to prototype, however due to technical issues and shortness of time, I could only preview my prototype on Sketch. And here it is.

☺️ Prototyping is a really smart tool that I enjoyed using.

😞 I confused userflow with lo-fi wireframing but I chose a very simple userflow so it didn’t stop me from performing the mid-fi wireframe

• Owning a UI Kit is key to be efficient
• Knowing the terminology of UI elements is critical to structure all the layers
• Patience is a key element to success :)

Thanks for reading