Branch
ERGONOMICS TOOL
Helping customers choose and configure the right products for their height
ROLE
Product Design Intern
TIMELINE
Internship:
May 2022 – Present
Project: 2 weeks
TOOLS
Figma
DELIVERABLES
Market Research
Wireframing
User Interface Design
Responsive Breakpoints
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
INTUITIVE
Create an easy and straightforward tool that requires little explanation
LONG-LASTING
Inform new users and help them and improve ergonomics for the long run
FUNNELED
Provide guidance that caters to users with different needs and 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
UPLIFT DESK
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.