An intro to Wireframing with Ironhack’s Challenge 2
Welcome back to UX Diaries; a series of articles in which I document my learnings, thoughts, and tasks as a student at Ironhack’s UX/UI course.
In this article, I’ll share my process of creating the wireframe of simple user flow in Jour; a mindfulness app, and my learnings from this experience. I’ve taken this challenge upon myself as part of my prework for Ironhack. Hope you enjoy reading it!
My process
As I’ve mentioned before, the app that I chose for this task was Jour and the reasons behind my decision were rather easy:
- As a relatively new user, I’m still testing it to see whether it is a tool that can improve my life and I thought looking at it through the lens of UX Design would be interesting.
- The product’s main value/service is to provide a journal for cultivating mindfulness. So, it has a unique user flow to the wireframe.
- I used the same app to practice copying UI elements in Figma
- It is visually pleasing :)
After determining which App to use for my challenge, I took screenshots of the user flow for the main function of the app; journaling the day.
The user flow for daily journaling:
- User opens the app
- Tap on the CTA button
- Selects the appropriate “feelings card”
- Selects the activity that is responsible for the feeling
- Taps continue
- Write down the answer to the question and taps on the check icon at the bottom right.
- Save the daily journal.
Before exporting the screenshots into Figma, I sketched a low fidelity wireframe of the app to get a better sense of the necessary components to make the flow work. Once I got the bare minimum understood, I started working on my medium-fidelity wireframe on Figma!
Since this wireframe was medium-fidelity, my aim was to show icons and use content when it was necessary to make the flow understandable but leave the stylistic/branded parts (typography, rounded corners, color) and details regarding the content (writing each and every emotion or activity in cards, motivational messages) bare. For instance, I used the gift icon for the “Share Jour with a friend” functionality on the Home page like the original app because putting a solid box instead would be too ambiguous for this wireframe.
However, I used the solid boxes in the bottom menu because they were labeled. This way, when this wireframe would be presented, the team can focus on the flow without being distracted by the stylistic choices or the drafted content.
While wireframing, I mainly used Ironhack’s Wireframing kit. However, since I also copied the UI elements of the Jour app for a previous assignment, I also used a few components from my own assignment.
Takeaways from challenge 2
Overall, this was a very useful and fun challenge for me. I realized that it is more complicated than I thought to figure out what is necessary and a priority when wireframing. However, sketching before jumping onto Figma definitely helped in that regard. I would like to practice this more in. my own time. as well.
Speaking of Figma; using it is an absolute joy, even as a person who has no background in design. I’m really looking forward to getting more fluent in using it.
Once again, thank you for taking the time to join me in my UX Design journey. I appreciate and look forward to your comments, questions, and feedback!
