Stuart Gordon
UX and Visual Designer
Made with

Posture Wings

Advanced Sports Bra

Posture Wings product models
Posture Wings product models

Case study

Overview: Posture Wings™ is a startup athletic bra manufacturer producing patented garments that are bio-mechanically engineered to reverse poor posture.

The Problem(s): Even though the initial run of its flagship product sold out, producing a second production run and setting up an e-commerce site is not financially feasible at this juncture. The company needs investment capital to grow.

The Solution: Develop an informational "smoke-test" site to generate product interest, capture leads, and set up a nurture campaign to demonstrate to potential investors the high demand for the product. 

Deliverables: Customer research, an interactive wireframe, a hi-fi prototype, a new website, and marketing strategy.

My role: Strategic Vision, Visual Designer, Information Architect, Interaction Designer, and Project Manager. Teamed with another UX Designer who performed in-depth user research and tested the interactive wireframes.

Time frame: 2 Weeks

Research
Whiteboard brain dump

Whiteboard brain dump

Current-state analysis

To develop a concrete, executable road map that would address the bulk of the business points, my colleague and I dove in to understand the complexities forming online bra sales.

Posture Wings has a unique product that differentiates itself in the marketplace:

  • Comfortably supports breasts, spine, and shoulders.
  • Allows freedom of movement.
  • Improves posture while reducing bounce.
  • Increases muscle strength and memory.
  • Reduces disk and joint inflammation.
  • Reduces back pain.

Website homepage before redesign.

Website homepage before redesign.

Previous website analysis

Observations
  • Posture Wings logo and branding are not present.
  • Navigation terms are not user-focused.
  • It’s unclear what the actual product is or what it does.
  • No clear hierarchy of information.
  • Textual content is disjointed.
  • Photography does not highlight the product.
Conclusion
  • A total overhaul and redesign of the website is 
needed to establish brand credibility online.
Approach plan
  • Analyze the existing market and establish target audience.
  • Develop a "smoke test" marketing strategy to capture leads.
  • Present the bra as comfortable.
  • Highlight the product's revolutionary benefits.
  • Create a community through social media.
  • Target interested female buyers.
  • Attract investors by collecting data.

“Finding the right bra is totally life changing!”
— Chelsea H.
Posture Wings

Online Survey

To set the research in the right direction, our researcher crafted an online survey to discover our user's 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 243 responses and followed up with 11 participants one-on-one.

The researcher conducted affinity mapping to uncover more product perception insights.

Important factors users consider when purchasing bras online:

  • Cost
  • Quality
  • Features
  • Design

Users perceive Posture Wings as:
  • Expensive.
  • Unavailable for purchase.
  • Not fashion focused.
  • Current website not trustworthy.
Solutions:
  • Emphasize quality over price.
  • Employ smoke test strategy.
  • Focus on athletic market.
  • Position as high-end engineered garment.
  • Redesign the website.

Competitive Comparitive Analysis
Alignmed.com (competitor) site audit

Alignmed.com (competitor) site audit

Competitive Analysis

  • I conducted thorough research of potential competitors 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.

Information Architecture
Card sort participant
Card sort participant

Card Sort

I compiled navigation terms and held a total of 6 closed card sorts. I asked participants to group the terms in a way that made sense to them if they were going to a learn about a new-to-them product on a bra site.

I learned user's want to get to the product features quickly and what risks there might be to sign up on the waiting list. Less important was the inventor's story or product's history.

Posture Wings

Site map

Based on the survey, interviews, competitor analysis, card sort, and all collected research, I formed a mental model of how the Posture Wings site should work and created the site map.

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

Smoke test strategy

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 painful 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.

How to sell something when you have nothing

The Smoke Test strategy

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 produced. We are not asking for a deposit, just a name, and an email address. As an extra incentive, we're offering $25 off. We'll also use A/B testing to find test offers.

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

Prototype development
Wireframe of the home page after lo-fi iterations were incorporated
Wireframe of the home page after lo-fi iterations were incorporated

Digital wireframe testing

After lo-fi paper prototype testing was concluded, we were made aware of several design flaws.

We iterated many versions and incorporated changes into the digital prototypes.

Design flaws I learned of during user testing
  • Users were looking for homepage or “home”
  • Prefer to see the bra colors side by side
  • The footer should be full length of the page
  • Want to see guarantee policy & social media channels
  • Users want to see the product pictures large and concise text description

  • Text blocks were too dense

Fixes made from user input
  • Moved logo to center top
  • Added social media icons
  • Moved white and black side by side
  • Added guarantee section
  • Footer full width
  • Made the photo bigger

  • Added subscribe

  • Added guarantee

  • Added content cards

  • Added text under the photo

  • Moved "Reserve My Bra" to far right

Visual Design

The goal: Increase the perceived value of Posture Wings through design simplicity.

After the researching, planning, sketching, and wireframing, now it’s time to visualize all the ideas and add a nice sheen to all that is planned.

Color swatch studies

Color swatch studies

Color studies

I tested 4 proposed color palettes that centered around the Posture Wings brand color.

Palette 1 was considered too neutral by most testers

Palette 2 was considered too masculine

Palette 3 was not feminine enough. One user suggested adding pink, which I had considered but discarded because I thought it to be pandering to the female market.

Palette 4 added a light pink and tested favorably with the test pool.

Posture Wings

UI color palette

After the initial 5 base colors were picked, I refined the palette further and chose complementary tints, neutrals, text, and alert colors. 

Posture Wings

Font palette

I tested several font combinations and the font that scored highest with testers was Josefin Sans.

I used this font for headlines, and Open Sans for subheads, body copy, buttons, fields, and alerts.

Hi-fi development

Once I tested out all usability mistakes, I started designing the final screens in Sketch.

Layout development

From testing, we learned users prefer to scan a page with lots of pictures and short, concise copy. I created strips of information starting with the hero banner and simple styles with one or two headings and short paragraphs.

Then, I included other content elements like testimonials, lists, links, etc. That gave me a quick brand style guideline that gelled the site design continuity.

The main headline, subheads, and text (copywriting by Lisa Halpern) effectively focus on the pain-point and the solution provided by Posture Wings garments.


Next Steps

Keep evolving

  • 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.