Branch
ROUTINES APP
Helping customers develop healthy and productive work routines through habit-tracking and reminders
ROLE
Product Design Intern
TIMELINE
Internship:
May 2022 – Present
Project: 5 months
TOOLS
Figma
Adobe Illustrator
DELIVERABLES
Research & Ideation
Wireframing
Prototyping
Usability Testing
Project Overview
Branch helps teams and remote workers furnish inspiring offices that promote healthier and more productive work. But purchasing a Branch chair or desk from the website is only the first step of that journey.
Using an office chair isn’t always intuitive, and creating an ergonomic work routine and building healthy habits takes practice and guidance. Our vision for the Branch app is to create a helpful and engaging digital experience that helps users better meet their productivity and ergonomic goals. Previously, Branch has taken two stabs at an MVP for the app, and my role as the product designer for this project was to redesign the two primary tabs, Routines Home and Profile, with an end-to-end user experience.
My design process below. Click to jump ahead to a section.
01 IDENTIFY
Problem
The previous MVP included five experiences: (1) an onboarding flow, (2) a workspace tab with interactive product assembly / adjustment guides, (3) an ergonomics tab with workstation setup quizzes, (4) a standing tab with a simple timer to track standing time, and (5) a user profile to track stats from these and future experiences.
These experiences provide a helpful educational experience in teaching users how to use their furniture and set up their workspace. But none meaningfully engage users on an ongoing basis. To remedy this, Branch was looking to redesign the app around a compelling set of experiences called Routines: a simple, engaging way to develop and track research-backed ergonomic and productivity habits. By giving users an evergreen reason to use the app, we could increase engagement and make the app much more impactful for users.
REDESIGN CRITERIA
USEFUL
Empathize with our personas and validate what reminders they need
SIMPLE
Reduce user friction and make it easy to iterate and maintain
PROGRESSIVE
Start simple. Repeat it. Then add more complex elements.
GAMIFIED
Provide incentive to keep engaging with the app
EXTENSIBLE
Curate a hierarchy of content that can support future additions
01 IDENTIFY
MVP Analysis
To begin, I familiarized myself with the previous MVP and all related Figma files to get an understanding of what I was working with. I evaluated the interfaces and created a list of pain points I could immediately spot.
03 IDEATION
Brainstorming
Taking note of what was currently on the market, I conducted a brief brainstorm to identify recurring key and come up with ideas for more Branch-specific and nice-to-have visual components.
04 IDEATION
Sketches
After discussing priorities with my supervisor and getting the okay to move on, I began sketching rough drafts to lay out elements on the page and curate the user flow through visual hierarchy.
04 WIREFRAME
Mid-Fidelity Wireframes
Given the component library and design system in place at Branch, I was comfortable jumping to mid-fidelity wireframes.
I proposed three interactive experiences — two based on their standard webpage style and another based on their scroll-animated Ergonomics 101 flow. Each flow included six previously prioritized features.
1. INTRO / DISCLAIMER
2. HEIGHT INPUT
3. ILLUSTRATED CALCS
4. DOWNLOAD CTA
5. SOCIAL SHARE
6. PRODUCT RECS
Conclusion
KEY TAKEAWAYS
During this quick turnaround project, I learned to prioritize and rapidly visualize product features in a short timeframe. Initially, I was nervous about presenting my ideas at earlier ideating stages, but I realized that receiving feedback and being able to build on advice from there allowed me to get to designing more specific features, faster. The most rewarding part of the experience was definitely being able to use my design on the website with all the calculator logic built-in.
NEXT STEPS
Since there are still minor discrepancies between the live webpage and my design, our team will continue to QA and communicate with the engineers to ultimately achieve a pixel-perfect execution.
ROOM FOR IMPROVEMENT
Although part of the goal was to create a simple tool, the feature could still be more representative of the unique user. For example, individual variations such as gender and body type are not considered in the calculation (we've included this in our disclaimer). However, factoring in these traits could make for a more tailored user experience.