GRIT is a tobacco less chew with nicotine in it made from mint leaves. We redesigned the start-up’s website.

Overview

The Problem

The Grit Chew was designed to attract tech-savvy businessmen who are looking for a high quality tobacco free alternative. The website is not reflecting the desired user which is causing a decrease in website traffic and business. How might we improve the Grit Chew website so that it appeals to their target customers and our stakeholders feel successful in communicating their brand identity?

The Solution

1) Refine brand identity
2) Highlight competitive advantage
3) Make mobile website more accessible and functional

Tools

Miro, Figma, unDraw, Adobe Photoshop, Adobe XD, Google Forms, Google Slides, Google Sheets

User Research

User Interviews/Surveys

We were given user interviews from our stakeholder. We reviewed 8 of them and conducted one of our own as well as interviewing our stakeholder.

Key takeaways from our stakeholder interview:

• target audience: educated, white collar, tech savvy, urban area, aged 21-40

• competitive advantage is their target audience

• prides itself on the feel, flavor, how long it lasts and nicotine content

• majority of the website traffic comes from mobile

After our stakeholder interview we had a clearer understanding of who this product is for and the vision of the brand but we still needed to know more about our user.

We also conducted a survey of our own to answer some questions about what the user was looking for in a tobacco alternative. Since we did not know much about the product or the industry we had to do a lot of research on the product itself. From this information and our user interviews we created an empathy map and affinity diagram.

Empathy Map

Key takeaways:

• flavor, taste and feel are very important

• most have tried or want to quit (therefore would be willing to try an alternative)

• nicotine is important even in an alternative

Competitor Analysis

After having a good grasp on our user we needed to explore the products and industry more. We conducted a competitor analysis with tobacco chew, tobacco less chew and other tobacco alternatives and products.

How could we make GRIT stand apart? What made them special and how could we build a website to represent that? We did a SWOT analysis to see how GRIT was stacking up to the competition.

SWOT Analysis

Definition & Ideation

Heuristic Evaluation

After we had a good understanding of our user, the product and our competition, we took a look at the current website. Our stakeholder didn’t provide much instruction on how he wanted it to look or a color palette so we were able to have some creative freedom and really focus on it reflecting our user.

Site Map

After our heuristic evaluation we started on our site map. We made some key changes in the top navigation by consolidating our FAQs, About and Contact pages all into one page since there was not a large amount of text for each. We added product pages to give more room for images and information about the product. We also added a sign up/in page because our stakeholder informed us of their plans to start a rewards program for users.

Wireframes

After we had a general idea of our pages, layout, and content we began to sketch our designs and build out wireframes.

Prototyping

Once our site map and wireframes had been completed we were ready to start on a lo-fi prototype. I worked mainly on the desktop version with one other teammate. When we started prototyping we wanted to remember that we were going for a sleek design that would attract a tech savvy user.

Lofi Prototype

Style Guide

After our lofi prototype we needed to create a style guide before moving on. We pulled the gold color from the logo and selected neutral dark colors to pair with it. We decided on rectangular buttons and cards to give the site a more masculine look. The images picked are a reflection of our user, the product and where it all started. We chose clean, but strong fonts to represent the brand.

Midfi Prototype

With our style guide done we created a midfi prototype. We added animations to make it feel interactive and as if the users could see themselves using the product. The biggest challenge at this stage was color choices and keeping the website light. A lot of the competitor’s websites were dark and while we were using dark colors we didn’t want the website to feel dark. We needed it to stand out from the competition.

Hifi Prototype

After our midfi prototype we conducted a usability test. All of our users were able to complete the tasks in the usability test so we knew the functionality of the site was good. We also did accessibility testing and made iterations on text and background colors.
Here is the home page of the final prototype vs the original site:

Final Thoughts

The biggest obstacle on this project was time. With only 3 weeks to redesign the site we had to hit the ground running. We had the advantage of user interviews already being conducted but no one on the team had ever used any kind of chew. We had to do a lot of research to understand the user and the subculture of chewing tobacco. We could have benefited from conducting our own user interviews.

We also needed to do more testing. We should have tested the orignial site first. We only did one usability test during prototyping and could have benefited from doing a/b or 5 second tests.

For future iterations on the site our stakeholder wants to start a rewards program so we gave him a sign in/up page that could be expanded as well as product pages for more information and pictures for the product pages.

*Part or all of this project was used by the GRIT Chew team that won 3rd place in the Texas Venture Labs Investment Competition.