Challenge 2: Wireframing an app
Ironhack’s Prework: Sarah Gargouri_Challenge2
The second Ironhack pre-work challenge is to work on wireframing. Wireframing is a way to give a simple visual representation of how the flow of an app or website we are creating will be. It is in other words their design skeleton.
I chose to work on the app of the brand WESTWING, a German e-commerce company created in 2011 in Munich, selling furniture and decoration accessories. They sell their own collection but they also give access to limited private sales from other brands.
To achieve this challenge, I decided that the task I would complete on the app would be buying an item, in other words, the add to bag flow. Indeed, as this app’s main objective is to sell products to consumers, I wanted to see how easy and efficient it would be, as a consumer and then as a designer.
From the moment when I landed on the app’s main page until my item was in my cart, ready to be bought, I captured all the screens appearing at every step of the process which led me to have 5 in total. This process is what we call the user flow.
After getting the screenshots I started sketching them on a paper.
Sketching
Sketching gave me a first idea about how I would create my wireframes on Figma.
Then, I started wireframing with the help of a wireframing kit provided by my school and containing the most common elements necessary to wireframe (icons, buttons, etc.), in order to facilitate the creation.
WIREFRAMING
- Main page
When we go on the app, we directly see the current private sales. Here, the main UI elements I had to reproduce were: icons, headers, images and text.
2. Accessing a private sale
On the second screen, we are on the page of a private sale where we can see the products’ list appearing at the bottom. The UI elements here are the same as on the first page.
3. Item selected from the products’ list
On the third page, we are on the page of an item that we will add to our cart. Here, in addition to all the UI elements we could find on the two first screens, we can see new ones which are a dropdown button and a CTA (call to action) button.
4. Confirmation of add
The fourth page is the exact same as the third one, the only difference being that a pop-up window appears on top of the page, showing the user that the item has been correctly added to his cart. To demonstrate that, we have the add of a banner and a new icon followed by text.
5. Cart page
The item I have selected previously is there, in the cart, waiting for payment. Nothing new in terms of UI elements, we can find the same ones as on the other pages.
My learnings
Among the three main types of wireframing — low-fi, mid-fi and high-fi — the one illustrated here is low-fi, supposed to be the simplest. It is the structure of the app that is aimed to be shown, not its beauty.
Indeed, wireframing WESTWING’s app felt quite simple as per different perspectives:
- as a user, the process to buy an item is not complicated at all; the app felt very easy to use throughout the different pages and there was not too much information.
- As a designer, I could observe that the wireframe reflects the user experience. The pages do not contain too many UI elements, which were almost the same during all the flow.
- However, even if this app seems to be simple, I was not always confident during the wireframing process. For instance, I was not sure if I had to simplify all the icons or not. It is not always evident to know which information needs to be highlighted among others. All things considered, wireframing, despite its simplicity is quite challenging!
