This piece is a product of course pre-work that I have completed as part of my admission to Ironhack Miami’s UX/UI Bootcamp in Miami beginning on June 8th, 2020. I’ll be posting future coursework here on Medium during my attendance in the program. To any reader with experience in User Experience Design: any tips, feedback, and suggestions on my process or prototyping are warmly welcome.
The second module of Ironhack’s UX/UI prework challenged me to reverse wireframe an app or website experience of my choice. I chose Forest, an app that is essentially a gamified timer that helps users “stay focused, [and] be present.” I wanted to work with Forest because I enjoy the styling of the app and because I use it regularly to track the time I spend working on tasks (like this post!). Also, the makers of Forest have partnered with Trees for the Future to plant real trees every time a user spends the in-app currency received as rewards — and I think that’s pretty cool.
Context: The central functionality of Forest works something like this:
- The User “plants” a tree at the beginning of their focus session
- User ignores their phone while working/focusing. Returning early and leaving the forest App will “kill” the tree planted at step one (dead trees remain in the user's forest forever, but you can spend in-app currency to remove them)
- If the user does not interrupt the “growth” of the tree by leaving the app, a tree appears in the user’s forest at the end of the timer.
For the specific user flow that I decided to wireframe, I chose the steps necessary to complete the task of adding a description to a completed tree in the user's Forest. This is not a feature I have used before, but I would like to begin using it to track exactly what I have been working on and to set goals at the start of working sessions.
Here is a first look through the User Flow to add a description to a tree
In total, it takes four clicks/taps for the user to navigate from the home screen of the app to the description text-box field for a given tree. Along the way, the user is only presented with one decision to make: which tree to add a description to (the user can also choose to add a color-coded label during this flow, but let’s focus on adding a description for the sake of simplicity). In this case, I chose to make this decision via the overview/timeline (4th pane from the left), however, a user can also make this choice by tapping on the desired tree in the forest (3rd pane from the left). Along the way, the user interacts with multiple buttons, a sliding menu, an activity feed (timeline), and a custom text field within a pop up modal. (Here is a fun guide to UI interface terminology for anyone wondering what the heck a “modal” is: )
With the user flow analyzed and the UI assets inventoried, it was time to take a stab at the wireframe.
Deconstructing this experience into its most basic components was a fun and surprisingly challenging experience. It would be easy to look at a wireframe and think it must not be too difficult to make one due to the simplistic appearance that defines this type of design. It would be easy, and it would be a mistake. In fact, the simplicity of the wireframe’s appearance is exactly where the challenge lies. In my wireframe, for example, I experimented with 4 or 5 different styles of rectangle + image icon combinations before settling on the current design in pane 4. I found myself reworking the design choices again and again because I was not sure if someone unfamiliar with the Forest app would understand what I was trying to convey — and conveying ideas is precisely the point of a wireframe.
Bonus: Here is my attempt to create the same user flow using Sketch.