ROLE

Product Designer

OVERVIEW

Create website design for start up direct to consumer company, GRIP + BAND

DELIVERABLES

Style Explorations, Website Design Mockups, UI Kit, Style Guide

TOOLS

Sketch, Invision

PROJECT LENGTH

One month

 

In the past 10 years, there has been a big change in the fitness industry. It’s grown into an environment where it’s community can be social and express themselves and their milestones. Workout clothes have become more than just practical, it’s a part of one’s identity. In a previously male dominant market, 2019 has seen more women’s athletic designs and collaborations because there’s more growth potential in this new space. 

Enter, GRIP + BAND, a direct to consumer start-up specializing in women’s athletic accessories. The products, designed with functional innovation and elevated designs, hold up to a high quality standard rarely seen in the current market. More than just e-commerce, G+B is a community where collaboration is encouraged. Users, called “Bandmates,” can get involved in different aspects of the company from strategy to designing the next sock. At the start of this project, G+B had a design identity for it’s products but still needed a visual brand. Working closely with the CEO, Shannon Knee, I completed, designed and tested concepts on style, colors, layouts and more. I finalized a look that fit with her vision and user enthusiasm. Elevated designs that are playfully crafted so you can’t help but want to explore. You can see a preview of my final design here and more details on my process below.

The main challenge of this project was to create a company identity for G+B and carry that through to my design visuals for its website launch in Q1 of 2020. My team, which consisted of myself and two other designers, were provided with high level domain research of the current marketplace, a set of wireframes and several logo variations that were used as a jumping off point. It was our job to establish a look and feel that would engage users to not only want to make a purchase but to become part of the community. 

There were no definite design guidelines- colors, layouts and even photography were all up for discussion and each designer took an entirely different route. Through conversations with our client, we nailed down brand adjectives: elevated, retro and approachable. With such broad creative freedom, the objective was narrowing down which direction would showcase the high quality products and while still creating an interesting interface to explore. 

THE CHALLENGE

Wireframes & Logos

 

The assets that were provided at the start of this project were low fidelity wireframes and a collection of logo variations. The wireframes included the website’s homepage, product grid, product page as well as several pages for the backstory of the company and its product. The logos were presented in two different color schemes and several layouts. We were free to explore these color schemes or work up our own.

 
logo primary.png
logo bw.png

To begin, we took a look at direct and indirect competition in the current marketplace. We examined what kind of design decisions they were making and if there were any trends across the board. We took this research into consideration to identify opportunities for G+B to stand out while still identifying in the fitness vertical. 

We found that a majority of the competition have an extremely clean interface with little to interact with other than a purchase workflow. The photography is mostly product shots on white backgrounds. Each brands color scheme is simple - including large amounts of negative white space with accents of black and a variation of a blue. 

With G+B being more than just a traditional e-commerce website, we found that there were opportunities for the colors to be a bit more adventurous and layouts that feel more playful all while keeping a clean aesthetic.

THE APPROACH

 

Design Principles

To nail down our aesthetic, we created three principles that would influence our design decisions.

 

Elevated Energy

Use a luxurious feel that reflects the products and the athletic energy they represent. The design should feel sophisticated and premium but still approachable for all users.

Simply Seamless

Intuitive design patterns that minimize any confusion while navigating the content heavy site. The design should be minimal and clean.

Creatively Collective

The design will encourage users to engage with the site in different ways. The design will make the user feel welcome as Bandmates and will be excited to interact with their community.

Style Exploration

In order to gain insight into the G+B’s audience aesthetics, each designer created three divergent style directions to test. Our client provided us with direct to consumer branding styles that she was interested in exploring such as Billie, Recess and Baboon to the Moon

I based my design concepts on her brand inspiration examples, the existing logo colors and market research we had conducted. What resulted is the following three designs directions - each with their own identity.

Retro Millennial

Playful Pastel

Luxury Bold

Testing Methodology

 

Objectives

During this project, we conducted desirability and usability testing with our target audience. We gained crucial information that guided our design decisions moving forward. Our objectives were to determine:

- Does the design encourage the user to engage?

- Would the design assist users to achieve their goals?

- Is the design trustworthy?

Audience

Our target users were women between the ages of 22–45 who take boutique fitness classes, who care about style and are willing to pay more for premium products and curate their wardrobe selectively. These are women accustomed to shopping and buying from social media, and care about staying on top of the latest trends.

THE DISCOVERIES

 

For my designs, the testing showed that my Retro Millennial approach was the most successful. Users felt that the brand seemed extremely approachable and were calling out the retro look that our client responded to in kickoff conversations. It was generally agreed that the movement and aesthetic of the design and photography was really interesting while staying elevated but the colors needed to pop a bit more. 

The Playful Pastel approach, based on the primary logo, was described as feeling young across the board. The users felt the color scheme was targeted to a junior audience they did not identify with but were still intrigued by the layout of the content.

Users felt that my third approach, the Luxury Bold design, was much too intimidating and associated it with a high fashion editorial. Using this feedback, I moved forward with my site screens pulling aspects from both the Millennial and Pastel approaches. 

Hi Fidelity Design 1.0

 

The Design

While putting together my first screen design, seen here on the right, I had a lot to consider. While there were no previous brand guidelines, I wanted to align the client’s aesthetic inspirations (like Billie) with a mix of my two design approaches. After analyzing the wireframes in more detail, I knew that there was going to be a lot of content and the design would need some kind of visual interest to keep a user engaged. 

Keeping my Elevated Energy and Simply Seamless design principles in mind, I knew that I wanted the site to have a feeling of movement - breaking up content with color blocking. The colors, based on the testing feedback, were too muted and needed a pop. I decided to take the secondary client logo and tweak the hues for a more impactful vibrance.

The homepage was designed to feel interactive. I wanted to display the content in a way that felt fun and playful while staying informative and clean. I decided to create a wave feature that would showcase different boxes as you scroll down the page, separating each section from the next. Check out my first iteration below.


The Testing

Overall, the second round of testing was positive with all users interviewed. The main takeaway I received was that the colors could still use more emphasis.

The users commented on how the design helped guide their eye through the content - referring to how I laid out elements and grouped them with this color blocking feature. They were engaging with the text and the imagery consistently - not losing interest as they scrolled through the homepage. It was clear that the design was functional and there were no blockers.

 
 
Homepage v3 WEBSITE.png
 

“I love the wavy page breaks. It has a really retro feel that guides my eye through the site.”

— Amanda Miller, User Tester

THE SOLUTION

 

For my final high fidelity screens, I designed six of the major navigational pages including the homepage, product grid, product page and three more about the company.

*All of the imagery used in these designs were for placement purposes only but mirrored the general style anticipated for production.

Homepage

 

The homepage is the most important page on the site. I designed a page that demanded attention and encouraged exploration. At first, I included a hero image carousel with CTA’s to direct to other parts of the site. Most users expressed that they were most interested in shopping on the site as opposed to reading about the brand. So, just below the header, you see the products above the fold. 

I included some visual interest with the wave container boxes so separate the content as you scroll the long page. Below the fold, the user can explore more about the brand, the community of Bandmates as well as press reviews and social media.

 
 

Product Grid & Product Page

 

Since the client was going to be launching with just 3-5 products, I wanted the product grid to feel more editorial and less like a traditional e-commerce site. The idea was to make the products feel more exclusive as opposed to limited options.

The product page continues using the color scheme in a way that enforces hierarchy. I used the wave of color blocking to guide you down the page as before while the product information stays static on the left.

I wanted to make sure that these pages were clean and there were no blockers for a user to make a purchase. The grid page has that editorial blocking to emphasize exclusivity as well as uniform product photography. When you hover over a product, a lifestyle photograph is displayed with an option to Quick View product details. There is also a prompt to get involved with the brand with a “Design our next collection” CTA.

 

Our Name + Mission, Our Socks, Our Band

 

The biggest challenge for the three brand pages was to display a large amount of content in a way that was digestible and interesting. I carried through the color blocking method to break up large amounts of copy in sections. On the Our Socks page, I experimented with using imagery as the section divider as opposed to just the color. 

The Our Band page also needed to showcase large amounts of copy for each individual in a way that did not feel intimidating. I decided to make cards for each Bandmate and break the content into three per row.

CONCLUSION

 

I learned a great deal working on GRIP + BAND. Having the creative freedom to design without a brand defined was definitely a challenge for our team but it came with great reward. The design I produced fits with the initial client ask, it’s elevated, retro and approachable and user testing showed that our target audience was excited to interact.

For future recommendations, I would start to incorporate some microinteractions. Some ideas would be a moving graphic when you hover over a product image, scrolling features or illustrations. I would also suggest having an edit team take a look at the copy and break down some of the content heavy sections. There seemed to be a lot of repetition and could be cleaned up.