Branch

ERGONOMICS TOOL

Helping customers choose and configure the right products for their height

ROLE

Product Design Intern

TIMELINE

Internship:
May 2022 – Present 

Project: 1 week

TOOLS

Figma

DELIVERABLES

Market Research

User Interface Design

Device Breakpoints

Branch_ergtool_cover.png

Internship Overview

Branch is an e-commerce company that sells premium ergonomic furniture for remote workers and office teams of all sizes. The furniture line includes ergonomic chairs, standing desks, workstations for teams, conference room furniture and more — all with a focus on quality, comfort, and affordability.

 

As the Product Design Intern, I design webpages that improve the DTC and B2B user journeys on the Branch site.
Some features I've worked on include a sustainability calculator widget, showroom booking pages, ergonomic tools, a lead-generation / social proof page. In addition to web design, I also redesigned the Branch mobile habit-tracking app. 

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. 

Project Goals:

Check_Double_Big.png

INTUITIVE

Create an easy and straightforward tool that needs no explanation
Arrows_History.png

LONG-LASTING

Help users save information and improve ergonomics for the long run
Filter.png

FUNNELED

Provide guidance that ranges from general to specific to cater to users with different goals

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.