UX Design
Forest
A productivity app that encourages users to stay focused and remain engaged in the present moment.
Forest’s current UX is limited. I identified an opportunity to grow the capabilities of the Apple Watch’s role in the Forest ecosystem by introducing the mobile “Grow a Tree” user flow to the Apple Watch UX.
Objective
To make the UX of Forest on the Apple Watch more useful and usable
Role
UX Designer
Context
How Forest Works
Forest uses gamification to incentivize users to remain productive. To “grow a tree” in Forest means to start a productivity timer that’s meant to be distraction-free time away from your phone.
Here’s how you currently grow a tree on Forest via the iPhone:
Users select the amount of time they’d like to remain focused for.
Then, they can further customize the timer by choosing what virtual plant they’d like to grow and for what purpose (i.e. ‘Work’, ‘Brainstorming’, or a custom tag).
“Grow a Tree” on the Apple Watch
Growing a tree is the main feature of Forest. However, this user flow is only available on the mobile Forest experience.
If users attempted to grow a tree via their Apple Watch, here’s what users see:
Analysis of Forest UX on Apple Watch
Users open to the Forest watch home screen, which details their history of past trees grown. Any trees grown will be visually planted in the plot of land, and their total productivity minutes (measured in minutes) is amounted at the bottom left.
Once users click on the plot of land, they’re led to a screen that says “Start planting today!” There’s no actions left for the user to take.
The current UX of Forest on the Apple Watch is not useful or usable. The watch experience is not useful because users aren’t able to take meaningful action nor are they given direction for what they could do.
Further, the Forest UX for the Apple Watch is not usable. Forest helps users boost their productivity by incentivizing them to grow virtual trees as they try to work. The text prompt “Start planting today!” provides no functionality or purpose towards boosting users’ productivity.
The current Forest UX is limited.
In the Apple Watch environment, users are led to a “Start planting today!” screen that provides no direction or functionality for which users can interact with to progress in the user flow of utilizing Forest to boost their productivity.
I see an opportunity to make the Forest Apple Watch interface more useful and usable by integrating the “grow a tree” feature to the watch.
The Opportunity
Design
Recreating the Design System
Because Forest is an existing app, I found that an integral part about translating the core “growing a tree” mobile experience to the Apple Watch was maintaining the UI design, brand consistency, and language.
This visual translation required a proper reconstruction of the Forest design system.
Forest Design SystemForest’s design assets are not fully publicly available so I had to personally identify the app’s brand colors, reusable components, and even recreate some of the components myself.
I recreated Forest’s design system on Adobe XD and published it as a library so I could easily reuse components to create consistently designed screens.
Forest Circular Timer Recreated by My Pen Tool :)As I mentioned earlier, many of Forest’s design assets are not publicly available, so I realized quickly that I didn’t have access to one of Forest’s notable components—the circular timer with soil.
I saw this initial problem as an opportunity to push my boundaries as a designer! Prior to this project, I had no experience with iconography, and I was very clumsy with the pen tool.
I’m proud to share that I successfully recreated the circular timer (pictured to the right) using the pen tool! This was a mini creative challenge I greatly enjoyed from this project.
Smaller Screens, Same Experience
Aside from recreating Forest’s design system for the watch, I also faced an interesting challenge of designing for smaller screens.
As I started creating early wireframes, I quickly realized the difficulty behind retaining the features and ease of navigation of the mobile Forest experience for its smaller watch counterpart.
Below highlights the progression of this design challenge:
Low-Fidelity Wireframe Ver. 1
Here, my two primary focuses were including all the features needed to grow a tree and determining an optimal visual organization of these features.
Though all the features were visible and on paper look organized, I realized that on an actual watch face, these buttons would be too small. Moving forward, I needed to be more mindful of how I could balance maximizing limited screen space while including the features necessary to grow a tree.
Low-Fidelity Wireframe Ver. 2
Here, I identified the timer as the most important visual component of the user flow so I decided to make this front and center.
However, I still had trouble finding an effective way for users to navigate through the process of customizing their timer.
I considered dividing each step into its own screen or conversely, trying to fit everything into one screen by having “secret” buttons. However, I recognized that too many screens or lack of clear CTAs would frustrate the user.
High-fidelity Wireframe
Here, I found a balance of fitting everything into one screen while maximizing screen space.
I decided to make the process of growing a tree confined to one screen via a vertical scroll. The mobile Forest experience only uses one screen to grow a tree, so I wanted to maintain that structure consistency so that users feel like they can set up a timer just as quickly on the Apple Watch.
The vertical scroll also helped me maximize screen space. I stretched the buttons from end-to-end to create the largest possible touchpoint for watch users.
Final Prototype
The button below leads to the final Forest prototype. Feel free to click around and explore the app!
Wrap-Up
Final Screens
Pictured here is an overview of the completed screens for Forest! These are the final Forest Apple Watch interface screens I designed after incorporating user feedback, like from the example above.
Takeaways
This was my first UX case study, and I truly learned a lot from it! Below are two key takeaways I learned from Forest:
Documentation is essential!
Documentation is an essential part of the design process. I found that documenting my design process was particularly helpful when I spent some time away from Forest. Referring to my documentation was an efficient way to refresh my thinking without losing time figuring out the context of where I left off.
Consider the cost-benefit trade-off of incorporating new tools
Incorporating new tools proved to set me back in my project timeline as I dedicated some time to learning Adobe XD. However, I enjoyed the extra challenge this time because I had the opportunity of becoming familiar with an additional design tool!