Wireframing Challenge — Choose is my choice

Screeshot of Choose Desktop Landing Page

Some background

As part of the required Prework prior to a UX/UI Bootcamp that I will attend at Ironhack Paris, I’m going to “reverse-engineer” a selected user flow on the app of my choice in mid-fi wireframes and prototype them using Figma.

The app I chose to work on for this challenge is called Choose.

Logo Choose

Choose is a French app, created by three childhood friends. As they say about themselves, they want to make people discover incredible brands and stories that share the same meaning and values.They designed their app for their generation: simple, human and with an amazing customer success.

Why did I choose Choose ? :)

Several reasons made my pick this app for the reverse-engineer challenge :

• It’s my favorite app when I want to discover new, ethical brands in order to make some cool gifts to my family and friends
• I love its straightforward UI, no frills, just useful, efficient and attractive design
• The purchasing flow is smooth and intelligent

This last motive, besides, explains that I picked the purchasing flow to go through this challenge.

This user flow consists of 6 screens (up to the “Confirm my order” here as “Finaliser ma commande” CTA button) as follows :

Let’s start wireframing these !

First of all, I’m going to perform a short Task analysis and inventory the UI elements in order to be very clear on the navigation flow I will work on.

Task Analysis with medium granularity

Buying a product on the Choose app

1. On the “Sales” Screen, browse the brands by scrolling down
2. Click on the picture/ name of the brand you choose
3. Scroll down to see the different products
4. Click on the one product you want to buy (Here, the user also has the choice to go back on the previous screen if he wants to choose another product)
5. Swipe to the right to see the different images of the carrousel
6. Scroll down in order to learn more about the product (description and delivery details)
7. Add the product to your basket
8. Click on the basket tab
9. Review the product in your basket and finally click on the “confirm my order” button (The last action won’t be taken into account in the prototype)

Now, let’s make a list of all the UI elements we find on these screens. Making this list is going to prevent from forgetting important components when I will design wireframes.

Inventory of the UI elements

Input controls :

• Buttons (Screens 5 and 6)
• Dropdown (Screen 6)

Navigational components :

• Carousel (Screen 5)
• Icons (every screen)
• Tab Bar (every screen)

Informational components :

• Text (In real text + lorem ipsum style) (every screen)
• Tags (Screen 1, 2 and 3)
• Notification (Screen 6)

Some of them won’t be used in the user flow I’m working on, and therefore, I won’t prototype them for now.

For the purpose of my own learning, I will of course keep editing and improve this prototype over the weeks. Depending on when you’re reading this story, my prototype will be more or less hi-fi. Feel free to check the evolution. 😉

Low-Fi Wireframes

As you can see, on these wireframes I chose to keep most of the text as it is, because at this point of my process, it was still hard for me to decide whether this content was crucial or not to be displayed in order to understand the screen.

Time to get down to serious business !

What a wonderful tool Figma is ! I have to say I’m really impressed by its wholeness and efficiency of use. Whether it is the magic in the newbie’s eyes or not, I really loved this exercise and I can’t wait to master this tool more and more.

However, it was not an easy road for the newcomer I am. Here is the biggest learning this challenge taught me :

Think about prototyping when you’re designing, you fool !

I wish I had been aware of this before starting to design… It would have kept me from many mistakes and headaches. Hopefully, Figma is such human-oriented that it is very convenient to back up and change whatever doesn’t fit.

For example, its’ only when I had to extend my screen in order to display some more scrollable content that I really understood what constraints was about … If you ever had to do that, I think you will know what I mean. 😉

And, Voilà !

You can see the final (for now) prototype of the purchasing flow of the Choose App here. Feel free to make any comments or advice !

Also, I discovered (afterwards) a super nice plugin (Wirebox) that directly wireframes your hi-fi content into low-fi wireframes, thanks to this really nice article from UX Collective Chanel on Medium. Make sure to check out all these cool plugins if you want to upgrade your designing and prototyping routine.

Thanks for reading !