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

DELIVERABLES

Market Research

Product Ideation

Interactive Design

Usability Testing

Branch_ergtool_cover.png

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 our website is only the first step of that journey. 

 

Using an office chair isn’t always intuitive, and creating an ergonomic environment and building healthy work habits takes practice and guidance. For example, we learned that educating our customers with an ergonomic consultation saves up to 80% of returns and improves NPS.

My design process below. Click to jump ahead to a section.

01 IDENTIFY

Problem

A major opportunity to differentiate the e-commerce experience at Branch is helping customers choose and configure the right products for their unique ergonomic needs. However, there were no features to achieve this. 

02 RESEARCH

Market Research

To better situate this ergonomic tool on the internet, I found similar tools from other furniture companies. I noticed that most designs looked visually outdated and overly technical, which could turn users away from engaging with the experience. 

Ergotron

Screen Shot 2022-10-31 at 8.04.06 PM.png

Uplift Desk

Screen Shot 2022-10-31 at 8.03.33 PM.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.

Screen Shot 2022-11-07 at 1.47.22 PM.png

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.

Untitled_Artwork 25.png

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
 

05 PROTOTYPE

High-Fidelity

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

DESKTOP

TABLET

MOBILE

Try it out for yourself!

 
 
 
 

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.