Golshid Yousefi
UX Designer

Posture Wings

Advanced Bra Performance


Website Redesign

What is Posture Wings?

Posture Wings is a revolutionary bra with patented features and advanced engineering, designed to relieve back and neck pain caused by poor posture.

What is the business status?

After over 10 years of design and development, Posture Wing has perfected their design and have done the research to prove that their design is superior to any other products out there. However, at this stage, Posture Wings has only produced 100 prototype bras and lacks the investment capital to start mass production.

Company Mission

To provide a real solution for women with back and neck pain caused by bad bras. 

You can click here to check the Digital interactive prototype.

PROJECT OVERVIEW
Posture Wings

Objectives

We were tasked to design an e-commerce website as a platform for Posture Wings to directly sell their bras to customers. However, after initial ideations and development, we realized that the e-commerce platform that the client is asking us to design will not benefit our client at this stage. Our objective was re-evaluated to be designing a platform that can benefit Posture Wings in their quest to get investors and customers.

The project entailed developing a well-researched business strategy for the client that included a complete overhaul of their website to develop brand recognition and incorporate a smoke-test to be used for future decision making, marketing, and fundraising.

Design  Goals

  • Increase awareness about the harms of bad bras
  • Introduce Posture Wings as the ultimate bra
  • Develop a database of potential customers
  • Attract and Recruit investors

The Process
Posture Wings
DISCOVER


Business Analysis

Research has shown that most women do not wear a suitable bra, therefore they are inflicting pain on shoulders, back muscles, and spine that negatively affects every aspect of women's lives.

Posture Wings revolutionary design provides comfortable support for breasts, spine, and shoulder, allows freedom of movement, and reduces bouncing.

Our client’s restrictions are:

1. The client has no funding to be used in mass production and/or marketing.

2. Posture Wings bra cannot be branded as a health product due to tight regulations and restrictions governing the medical claim coding.

Heuristic Evaluation
Posture Wings
Posture Wings
Posture Wings
Online Survey & Major Outcomes
Posture Wings

To set the research in the right direction, our next step was to craft an online survey to research the experience of our possible users, discover their needs, and unpack the insights.

There were a total of 19 questions (#5 “I don't buy sports bra” was the screener question). We received a total of 248 responses. We followed up with 11 participants.

Contextual Research
Google photo. I was afraid to take photo and make people uncomfortable.

Google photo. I was afraid to take photo and make people uncomfortable.

My Observation

Most people that wear sport's bra:
  • The 30s and 40s age group
  • Employed
  • Regularly exercise
  • Have a healthy lifestyle

So, I decided that my persona is a professional woman in her late 30s that is very health conscious; she is well educated and very comfortable with developing and new technologies.

Competitive & Comparative Analysis
Posture Wings

I conducted thorough research of potential competitor and discovered a few brands that have similar products and e-commerce experience that is comparable to our goals.

Alignmed.com is their biggest competitor.

Also investigated Third Love, Intelli Skin, Adore Me, and of course Victoria Secret.

Posture Wings

Comparative Analysis

How's the competition different?

In our Competition review, we confirmed that the Posture Wing product is very different and revolutionary.

Posture wing has some strong points that other brands lack and we decided to promote this strong point to compensate for minor disadvantages such as lack of retail or product variety.

Posture Wings

Competitive Analysis

The Competitor's Websites

I also conducted analyses of would be competitive websites. Obviously, we knew our website lacks many features. But, we learned what features our potential competitors are providing on their website.


DEFINE / ANALYSIS

After our research was completed, we came up with a lot of valuable data and we discovered many problems. The next step in our design process is to analyze the data and define the major design problems that should be addressed in our design.

Affinity Mapping
Posture Wings

For creating our persona and see what are our pain points and our potential solutions, we conducted affinity mapping


The outcome for Affinity Mapping

  • We found out: Cost and fashion design are the major pain points of our product.
  • Lack of review and unprofessional website are the major pain points of our website.
  • Quality and Function are the strong points of our product.

Posture Wings
Persona
Our representation of the target audience is captured by the data gathered in our research.

Our representation of the target audience is captured by the data gathered in our research.

Meet Kate

  • Kate is a 37- year-old professional mom of a 3-year-old daughter.
  • She is an activist and supports women-owned businesses.
  • She buys high-quality items from reliable websites, and she cares about not wasting her time in stores and unreliable websites.
  • She is always searching to find the right sports bra for running.

The website will be redesigned based on Kate’s needs and preferences.


Posture Wings
Posture Wings
The Smoke Test

My team and I decided to use the smoke test Technique to gather data about people who can be our potential customers.

What is the smoke test?

  • Smoke tests comprise little more than a well put together landing page centered around a strong call to action (“CTA”).
  • It’s a method of providing users with an insight into your product alongside an option to purchase or sign-up.
  • Behind the scenes, the product may be in its infancy or may not even exist.

Our Primary Goal

  • To collect information
  • Not to sell the product.

DEVELOP

According to what Kate needs

For developing the idea we considered A Scenario to respond to our Persona's needs, and we conducted the user flow to show her journey through Reserve Her Bra.

Flow Diagram

Scenario & User Flow

The journey Kate takes to explore the website and reserve the bra.

Posture Wings
Information Architecture
Posture Wings

Card Sorting

We asked our users to categorize related items based on their priorities and classification. While we were conducting cart sorting we observed that every single person is categorizing and sorting the cards in a completely different fashion and we realized that people’s mind works in very different manners based on their priorities and backgrounds.

After the card sorting insights, we roughed out a site map to help us focus on the users’ mental model of the site.

The frame of reference is always “what does the user need? What will make this process easier and more pleasurable for them?”

Site Map
Posture Wings
DESIGN

Sketching & Prototyping


Ideation
Low-Fidelity Prototype

Low-Fidelity Prototype

Refinement Based on Usability Testing

  • Logo home page
  • Not too much description
  • Details under the images
  • User like to see the price
  • Social media
  • Looking for contact us
  • Educational Video
  • Find my fit - Need sizing chart
  • Our Story
  • FAQ
Posture Wings
Mid-Fidelity

Mid-Fidelity "Home" Page

Second Iteration Refinement

  • Presale in our primary navbar
  • Added Size Chart in “Find My Fit” page
  • Added a 2minutes video about the importance of using a suitable bra
  • Read other women experience with bad bras (Empathy with users), but the user looked for a section to share their story as well
  • Prefer to see the bra colors side by side
  • The footer should be the full length of the page

Third Iteration Refinement

  • Removed “pre-sale” and changed to “Reserve your Bra” to avoid users feeling they had to pay
  • ”Added “Contact Us”
  • Added “FAQ”
  • Moved logo to the center top
  • Added social media channel
  • Added a section for other women to share their story and their experience with bad bra
  • Moved white and black side by side
  • Added “Subscribe” and get $25 off
  • Footer full width

Mid-Fidelity

Mid-Fidelity "Product" Page

Second Iteration Refinement

  • Added a picture to illustrate the posture while wearing a good vs. bad bra
  • Too much text
  • Added a picture to show the engineering for comfort and support
  • The picture is small and needs the description
  • Added a section to show the steps that need to be taken for reserve the bra
  •  Should not use the term pre-sale which is confusing

Third Iteration Refinement

  • Users want to first see the product picture and description
  • Made the photo bigger
  • The added text under the photo
  • Changed “How the pre-sale workS” to “How the reservation works”
  • Added “Subscribe” button and get $25 off in all three pages

Mid-Fidelity

Mid-Fidelity "Reserve my bra" Page

Second Iteration Refinement

  • Should not use the term pre-sale which is confusing
  • Users wanted more photos of the product

Third Iteration Refinement

  • Removed “pre-sale” and changed to “Reserve your Bra” to avoid users feeling they had to pay
  • Added multiple photos
  • Added content cards

DELIVER
Posture Wings

Remember the Smoke Test?

When a product may be in its infancy or may not even exist, a smoke test is a useful method of providing people interested in the product with insight into your product alongside an option to purchase or sign-up.

Our call-to-action is for people to sign up to be among the first people to be able to buy the product when it's manufactured. We are not asking for a deposit, just a name, and email address. As an extra incentive, we're offering $25 off. We'll also use A/B testing to find test offers.

Posture Wings
Digital Wireframing
Posture Wings

High-Fidelity Prototype

For the hi-fi prototype, we designed 3 pages: Home, Product, and Reserve My Bra.

Stuart did a great job leading the visual design effort and developing excellent visual designs that very well complemented my interaction design work.

Posture Wings
Interactive Design Process

Digital Prototype 

You can click here to check the Digital prototype.

Posture Wings
REFLECTIONS

Result:

The design solutions resolve many of the heuristic problems we initially found, so the website is measurably more usable!

What did I learn?

  • I was able to apply user experience design thinking and marketing methods across the site to create a site that is useful to users and will also provide the client with a marketing tool.
  • As a team member, I learned how constant communication with the team and the client plays an important role specially when the project is in its early stage and even content is not available to use.
  • As an interaction designer, I learned from user testing that how simplicity and intuitiveness are important in a content-heavy website, especially for our users who consider time as a very valuable resource. They needed as less distraction as possible while they were using the website to be able to focus on the data they were getting.

Next Step:

  • A/B offer testing
  • Targeted FaceBook advertising
  • Create a community online through social media sites (Facebook, Instagram, Twitter, etc.)
  • Start blogging (forward articles, bio-mechanical science, women’s rights, etc)
  • Keep in touch with interested users via e-newsletters or emails
  • Sell existing stock to responders
  • Consider a company name change and rebrand