top of page

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

BranchApp_COVER.jpg

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 

User_Check.png

USEFUL

Empathize with our personas and validate what reminders they need
Like.png

SIMPLE

Reduce user friction and make it easy to iterate and maintain
Chart_Line.png

PROGRESSIVE

Start simple. Repeat it. Then add more complex elements.
Star.png

GAMIFIED

Provide incentive to keep engaging with the app
Screen_Shrink_Arrow.png

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.

Routines - Home 1.png
Routine.png

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

DimensionsCalc-Desktop.png
Dimensions Calc-Final.png
InteractiveErgCalc-Desktop.png
Wireframes

05 PROTOTYPE

High-Fidelity

Dimensions Calc-Final.png
Dimensions - Tablet.png
Dimensions - Mobile.png

DESKTOP

TABLET

MOBILE

Try it out for yourself!

Problem
Research
Ideation
Prototype

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.

bottom of page