The Quell
I like exercising, but I also like gaming. When time is scarce, I have to pick one or the other. But what if I didn’t have to? This enticing possibility was what motivated me and my friends to create a website for Quell, a tech company hoping to claim its place as pioneers in the immersive fitness gaming market. The Quell System uses haptic resistance bands that connect to an external console to enable players to get fit while punching their way through the enemies in a virtual adventure world.
My Approach: The Pedagogical Design Process
As a long-time teacher, my approach to design is uniquely pedagogical. I think of the user as my student, and I, the teacher/designer, must construct the website in such a way that that the user is “taught” how to navigate the interface. A good teacher uses a student-centered approach to teaching, much like how a good designer should create an interface that is user-centered. If you want to take a closer look at how this process exactly works, visit the Hertz page of my website, located under projects!
In the context of this problem, I thought about how I could “teach” the user about The Quell and convince them of the fact that The Quell is a worthy purchase via the subliminal path that the interface naturally leads the user on. Much like how the most enjoyable of learning experiences are those that occur absent of one’s volition.
The Challenge
Since the Quell is still in development, there is very little media that the company can use for advertising. How do we design a website that effectively promotes a product that users have never even seen before (without using “official” company media)?
My first attempt at designing a logo!
(Created in Procreate)
The Solution
Identify our primary users and design the website in such a way that it feels familiar, thus priming them to like the product without even having seen it before. Since the Quell combines gaming and fitness, our target audience is likely to be gaming geeks and fitness freaks alike. Gamers are probably more accustomed to dark interfaces with bright colors while athletes would like to see videos and images of people actually using the product to get fit. By appealing to their known interests, we can encourage users to envision the product becoming a part of their pre-existing routine.
Sketches, Wireframes, and Prototypes, Oh My!
As a group, we came up with various sketches, consolidated them into one wireframe, and converted that wireframe into an interactive prototype using Figma.
Design Choices
Home Page: Give it Impact
First impressions are important, especially when it comes to startups that can’t rely on a strong reputation that makes their users stick around. I selected this image to be the homepage because I felt that it really leaves a striking impression.
2. The Quell: What They’re Looking For
After viewing the home screen, users will wonder what the Quell can offer them. On this page, we placed images that we felt would excite the user about the Quell and persuade them into considering purchasing it.
3. One-Press Purchase: It’s That Easy
The Quell comes in packages, so it doesn’t make much sense for there to be a “cart” because one user is unlikely to purchase more than one package. To capitalize on the user’s decision to buy the Quell, we made a button for each package that instantly takes the user to the payment page before they dwindle too long on the decision and decide not to buy.
The First Critique
Using our interactive prototype, we asked some of our fellow peers to try it out and provide us with some advice. We also submitted the prototype to UserTesting.com for further feedback.
Problem
Solution
1. Reconsider the information architecture. Seeing a payment page so soon after being introduced to the novel product feels too sudden and is likely to turn the user off.
1. We added more information to the Home page (see below) and a “How It Works” page between the Home page and the Pre-Order page that the user can be better acquainted with the product before buying it.
2. The “fitness” appeal needs more love. The broad appeal of the website caters to gamers while the product is geared toward both fitness enthusiasts and gamers.
3. Replace the Lorem Ipsum with real information to make the website feel more realistic. Include more information about each package so that users know what they’re buying
2. We included more information about the fitness side of the Quell to appeal to fitness enthusiasts. The How it Works page (see below) also elaborates on how the Quell will actually help them get a real workout using a simple 3-step infographic.
3. Replaced the Lorem Ipsum with real information to make the website feel more realistic. Include more information about each package by adding an extra page before the purchase page so that users are informed about what they’re buying and can feel assured.
The Final Iteration
We incorporated all our feedback and created the finalized version of our high-fidelity prototype below!
*NOTE* Since for this project we weren’t allowed to use any of the media released publicly by Quell, we borrowed some images from various sci-fi movies :)
Points for Improvement
I believe that our website could be improved upon in terms of “stand out-ability”; it resembles the bulk of its kind without any wow-factor to set it apart. Since it is a gaming start-up, in the future I would like to give it a more “modern” edge by adding some animations such as a video that plays automatically right from the home screen. Although some of our website’s shortcomings may be due to the fact that we weren’t allowed to use any official Quell media, I still believe that the overall structure of the website could be made more distinct. I also think that the font and color choices can also be improved upon as red text on a black background presents itself as an accessibility issue.
Key Takeaways
Through this project, I was met with the challenge of creating a website to inform and advertise for a product that was still in development. Although it was difficult to make up for the lack of “official” media, it allowed us to focus on the structure and flow of the information architecture independent of pictures and videos. I realized that for websites that serve an informative purpose such as ours, it’s especially important that the information is fed to the user in an order that makes sense, and that the information also guides the user smoothly to the next course of action which in our case was to pre-order The Quell.