Ironhack’s Prework Challenge2: Wireframing and Prototyping
buy me a pie
The task
For the second challenge of the Ironhack UX/UI Bootcamp, our task was to analyse the user flow by “reverse engineering” an app we often use or are familiar with.
I decided to use the same app and screenshots to describe the user flow as I had used for the design exercise: Try to imitate 5–7 screens of an app!
Since I put a little effort into getting to know Figma by learning about automatic layout and building components, I hoped to save some time in the end by reusing the components. In addition, it was a very good exercise to dive deep into the design language of my chosen app.
The app
buy me a pie is a shopping list app, simple as a paper list, but with full integration on my computer, smartphone and smartwatch. The list can be shared between different accounts, so who ever is first in the supermarket, knows to bring toilet paper.
- no more paper lists left on the kitchen table, no more forgotten items to buy or double purchases.
- thanks to the live synchronisation, you will instantly be informed if somebody has changed the list.
- free hands while being shopping because of the smart watch integration.
„buy me a pie“ is an app that is very much reduced to its purpose, even if there are a few additional features for organising the shopping lists, the user flow of “adding an item” is certainly one of the most often used.
Inspecting the iOS version of the app, it was also obvious that the app tries to copy the look of an native iOS app to give the user a familiar feeling about the workflow. (This is also a learning from my former design practice.)
The tool
As in our last challenge it is all about empathising with our user and find a user centered perspective.
Task Analysis is a process to find out about the usability of an user interface, by asking the following questions:
- What your users’ goals are; what they are trying to achieve
- What users actually do to achieve those goals
- What experiences (personal, social, and cultural) users bring to the tasks
- How users are influenced by their physical environment
- How users’ previous knowledge and experience influence:
- How they think about their work
- The workflow they follow to perform their tasks
The user journey
My user persona is a female,mid-thirty, a freelance Web Developer, working mostly at night and she loves to drink cocoa at any time of the day, so she is eager to never running out of cacao. At 2 a.m. this morning she opens the cocoa tin for a nightcap. Her practised eye immediately sees that the remaining cocoa powder is enough for one more drink in the morning at most. Knowing that her partner usually goes shopping during the lunch break, she…
- …quickly opens the app , sees his list preview ( maybe different lists for different occasions)
- …chooses a list
- …taps in the INPUT field
- the keyboard shows, types the first letters …KA
- the most used items show up, the user selects “KAKAOPULVER” and add the item
- the item is added
- … suddenly she realises that she was editing the wrong list. she taps the item off the item is crossed out
- she goes back to “My lists” to choose the right one.
This ist how the screens look like:
I scribbled some Lo-Fi Wireframes to visualise the user flow. Paper and pencil helped me to reduce the images to the essentials, but also to see where additional verbal explanations were needed.
The prototype
I have never done before a „click dummy“ or prototype therefor I tried to keep the steps of the user flow to the minimum, even if there were still one or two additional steps not necessary but logical. Maybe some stuff for future iteration ;)
Wireframing for the chosen app turned out to be not as easy as I hoped. The app is a bit text heavy and because of this fact I decided to keep some key words in order not to have to develop additional symbolism.
Here is definitely space for improvement, but here is the result of my first prototyping exercise.
If you want to do the journey by yourself, don’t hesitate to try my prototype.
What I learned from this task:
This task was really fun.
The exercise of dissecting step by step a workflow that you don’t think about in everyday life was really challeging. But I learned once again how limited my knowledge is so far. I developed ideas and discarded them again because I simply don’t have the necessary skills yet. Nevertheless, I am a little proud of what I have achieved and I am desperate to learn more, can’t to start the bootcamp.
Thank for your time
