ALICE DAI

Forrest Yoga Wireframe and Branding Guide

Part of monthlong In-Video Impressions web design internship using Adobe Indesign and Illustrator. Created initial design for a customizable yoga website after an intensive research period to determine essential components for user experience. Below is a run through of my design process.

Step 1: User experience research

Essential components of a good customizable yoga mat website, as researched from existing competitors and well known lifestyle brands.

Branding elements

  • Customization is key make sure the first thing the users know is that they can customize their yoga mats. Offering multiple ways to customize (size, material, thickness, art) is a huge plus since other websites normally focus on just the art, this allows us to cater to a wide range of yoga people since the more advanced users will take advantage of these extra optimization options and the beginners will feel like the website has expertise.
  • Strong mission statement to draw the user in to point number 1, a short slogan
  • Aesthetically cohesive and very visual since we are selling a lifestyle and a vibe. We have to have amazing photos (refer to the list of sites with good vibes on the last page)

Technical and design elements

  • Good user interface for customizing essential if user goes through with process. A confusing customization tool is frustrating and unusable. Customizing provides an inevitable barrier to purchase since it takes extra time and thought, so creating a very user friendly tool is essential from guiding customer from browser to buyer.
  • Provide guidance like a personal trainer would, to help customer decide which mat is best suited for their needs. This means adding very helpful descriptions that describe what different mat thicknesses and sizes and material are used for. Good for the beginner and gives the site credibility to the seasoned yoga user. This is something I didn’t see in many sites and would give our site an extra boost.
  • Extremely clear about the products you can work with. Some websites sold just yoga mats, but others sold multiple different items that were yoga related. When there are multiple items, the flow of the website has to work on reducing confusion and clutter while also clearly advertising multiple different types of products.

Community engagement elements

  • Reviews/press for reliability and to build hype
  • Instagram presence/connection with customers to help connect brand to “real life people.”
  • Examples of previously created products so user is inspired

Step 2: Initial Sketches 

Watched documentaries on the history of yoga and branding videos from athletic and lifestyle companies to create a mood map and quick sketches on potential website designs. Utilized In-Video Impressions audience data to inform user-centered design.

Step 3: InDesign and Illustrator designing

Designed more detailed wireframes to get a better sense of style, mood and color for the brand. 

Landing page wireframe for Forrest Yoga

Step 4: Branding guide

In addition to wire-framing, I also like creating branding guides to help the designer and the customer understand the vision for the company look. These guides were inspired by Google Fiver designer Eli Block's design guides.

Extra design guide 

For this internship with In-Video Impressions (IVI), I also practiced redesigning IVI's logo and created a design guide to reflect a more modern and design-oriented look for the company. I utilized the shape of the company's acronym, IVI, as well as existing company colors of blue and orange.

Using Format