UX + UI Design | 2 Months | iOS NATIVE APP
DESIGN A POSTURE MONITOR
Backbone is the first smart posture support that aims to help people look and feel more confident. The product raised $400,000+ from 6,100 backers on Kickstarter and was recently funded by Tandem Capital. The goal of this design was to create an experience that motivate people to stick to their training sessions and to achieve their daily goals.
We were on a tight deadline due to the shipping date Backbone promised its first backers. The app paired with a sensor so the design also had to match external interactions.
I worked with the founder, 2 developers and also turned to the director of product at Tandem Capital for advisory.
AGILE DESIGN PROCESS
CUSTOMER PROFILE: INVEST TIME AND EFFORT
From customer interviews, I identified 2 types of personas, Will and Isaac to help us define the end-to-end experience. They became the subject of great debate. One wanted an automatic experience while the other preferred guidance.
Backbone Labs wants to help everybody achieve good posture. For a product that hasn't reach product market fit yet, it's more important to design for one customer instead of many (lesson from Airbnb) and then scale at another stage. We chose Isaac over Will because he has more at stake and hence he will likely invest time with Backbone.
BRAND POSITIONING: UNIQUE
Next, I mapped out Backbone's competitors in this spectrum to decide with the team the brand's strategic placement.
After considering the associations of the name and the vision for Backbone, I recommended the team to position the brand towards the unique side of the spectrum. This created an opportunity for the Backbone brand to be more energetic than its competitors.
CREATING A UNIQUE BRAND
In this information architecture, I focused on providing customers the essential functions that will help them track their posture and also motivate them to continue improving.
BRAINSTORMING & SKETCHING
Given the tight deadline for the first release, I skipped low fidelity wireframes and went straight to high fidelity wireframes from sketching. I gathered the best ideas from several rounds of Crazy 8s with the team.
ITERATING ON CONCEPTS
There were two challenging section in the experience that required more iteration beyond sketching, the posture visual and dashboard.
POSTURE: MAKE IT VISUAL BUT KEEP IT VALUABLE
"From day 1 we want to set the customer up for success."
A lot of the solutions in the market offer only "alerts" when the customer is already having bad posture. Backbone recognizes posture is not easy and to improve it, it will take time and effort. I explored several solutions to train people to be more self conscious of their posture.
DASHBOARD: LESS IS MORE
Before creating visualizations, I outlined what data the sensor can collect. In this process, I uncovered the sensor for release in December is not able to store data. While the engineering team came up with alternatives, I focused more on developing the visualization for the day instead of trends.
DESIGNING HIGH FIDELITY SCREENS
This first prototype helped me realized that I spent a lot of time on structure and I fell short on brand consistency. The Backbone app was turning into Yelp! I went back to make sure the Backbone energy resonated across the entire customer journey.
USABILITY TESTING & RAPID ITERATION
I conducted usability tests to get feedback from real users. I selected 8 tasks from onboarding, monitoring and dashboard. 3 participants from the study had 3 medical conditions (Scoliosis, Acid Reflux and Sciatica) related to bad posture and gave more in-depth feedback which influenced the next iteration significantly.
ONBOARDING: SOLID START
ONBOARDING: DEVICE SET UP
I clarified the instructions for pairing the sensor to the app by adding a visual of the action and eliminating the connect button.
POSTURE VISUAL: IMPROVE VISUAL CUES
DASHBOARD: ALTERNATIVES FOR MEANINGFUL STATS
We decided to save the dashboard feature for another release due to the constraints of the sensor. But I still had to figure out another way to give a personal record. I looked into what we can do after each session ended.
The Backbone team is currently implementing the design to release in January. The Backbone brace and sensor will be available on Amazon early next year. Stay tune!
Despite the tight deadline, I created short feedback loops with the Engineers through in-person stand up meetings, Zeplin and detailed specs. Before consensus and handoffs of final screens, it was important to get the Engineering perspective to make sure the solution I proposed was feasible within the time constraint. The meetings were short so Zeplin provided a space where Engineers could review the work more thoroughly.
REFLECTION: ON LOW-RISK PROTOTYPING
In this project, I sacrificed low fidelity wireframes. I thought it would be much easier to go straight to high fidelity wireframes and juggle decisions related to the structure and visuals at once. However, I discovered they are essential to the process, the designer and the stakeholders.
Low fidelity screens make it easy for the designer to create a tangible prototype quickly. In this case, visuals and interactions took time away from structure when I developed the high fidelity prototype. Pen and paper sketching somewhat compensated for this shortcoming. I also became aware of how much I rely on low fidelity, in addition to task flows, to think through the logic of structure.
Every time I presented to the founder and engineers, I noticed the feedback was unorganized even when I said, “Today we’re only going to focus on structure.'" Low fidelity wireframes put that invisible wall that narrows the point of focus for stakeholders. It's best to tackle one point at a time rather than all at once.
Going forward, I will keep them.