STACKS
Case Study
Helping users find the right gas station
Objective
Stacks is looking to create a mobile app to help consumers find fuel savings. Through research, we need to identify user expectations and frustrations and then design an intuitive interface reflecting these findings. Being a new company, we will also need to create a logo and branding.
Solution
The majority of users base fuel purchasing decisions off savings and proximity. We discovered safety was also a concerning factor and decided to display a safety rating for each station. This is especially beneficial when traveling in an unfamiliar area and can easily be turned on or off. Ratings are derived from consumer feedback, obtained by a very simple and brief survey, building trust within the Stacks users. We also display clear instructions for obtaining the discounts as well as a running total of each users savings, encouraging customer retention.
Challenge
The research and define phases will be critical in determining the necessary features that consumers value. We also will need to validate the concept of Stacks to ensure the premise of combining discount programs is in fact desired. The interface design will need to be clear and organized, highlighting the most prioritized elements so users can quickly make decisions.
Background
With all the fuel discount programs available, it is a challenging and time consuming task for people to identify where they can capture the largest savings when filling up. To solve this problem, Stacks wants to simplify the process and calculate the best deals for their users. The Stacks app is not a replacement for current gas rewards programs, but acts more as a calculator, determining users true cost at gas stations. Stacks often finds its users greater savings by combining, or stacking, deals on top of other deals.
Research/Empathize
Secondary Research, Competitive Analysis, Interviews
Goals
• Discover how/why people currently choose where to purchase gasoline
• Identify any frustrations and pain points with the current process
• Understand the current discount programs and competitors, searching for areas of improvement or any unmet needs
• Receive feedback on Stacks concept
Process
Starting with secondary research we will learn the trends and challenges within the fuel industry, identify competitors and familiarize ourselves with current discount programs. To start understanding the current process of selecting a gas station we will interview participants who have used an app within the last two weeks to search for fuel savings. We'll then complete a second round of interviews searching for insight about why consumers make the choices they do and where in the process there might areas for improvement.
Market Research/Competitor Analysis
Interview/Summary Results
Research Findings
• People often use apps to search for savings, especially when planning long trips
• Gas prices have a history of being watched
• People will adjust routes to pass a gas station where they know they can save
• The distance users are willing to go out of their way, fluctuates with savings
• People prefer to find stations on their route, looking for convenience
• People are concerned with safety, especially in unfamiliar areas
• Users have felt mislead, but they trust user feedback
• People's needs and priorities change and they like to select and see all options
• It's common for customers to be on their phone waiting for their car to fill up
• User feedback validated the concept and benefit of Stacks
Define
Using the information discovered during research we built a persona and empathy map to keep us focused on the target customer and empathize with their goals and frustrations.
Persona
Empathy Map
We created the following problem statements and then went through ideation and storyboarding rounds, in order to brainstorm a variety of solutions. After reviewing all ideas, we identified the best versions and then worked through the specifics. To finalize our newly defined plan we created a user flow. We then had a solid outline to use as a guide throughout the design phase.
Problem Statements
How might we help people decide where to stop for gas?
In an unfamiliar place, how might we help out users find a safe gas station?
How might we help people save money on fuel?
Ideation & Storyboarding
User Flow
Branding
Before we designed the interface we needed to create a logo and develop company brand standards. The S's in the logo have negative spaces taken out giving the letter a stacked look. They also resemble dollar signs which further connect the idea of savings to the name. The logo icon uses stacked coins and a fuel pump to reiterate the idea of fuel savings.
For the colors, we chose a modern shade of green for the connection to money and savings and also selected two shades of blue to promote a feeling of reliability and trust.
Design
Using the branding developed, we moved forward with the interface design and created a prototype. The prototype follows the user flow taking the user through setting up an account, connecting a loyalty program, selecting a gas station and completing the survey. A few notable features included are...
• We chose to use a pop-up over the map so we could get users to the value page as quickly as possible. This will help minimize exit points while a user is initially testing the app out.
• We included a way to put in a destination and find stations along your route.
• We highlighted the safety rating and created a toggle for this element, as well as cash prices (which we discovered was a frustration point within competitors sites.)
• We included a tips page that walked the user through distinctive features since the Stacks concept is different than other fuel savings apps.
• We also included instructions that outline the savings and the necessary steps to receive the full discount
High Fidelity Designs
Testing
Using Marvel, we created an interactive prototype then performed usability testing and analyzed the results.
Goal
We needed to determine if a user could successfully sign up for an account, find a gas station and complete the survey. We also focused on finding any areas of frustration or confusion during the flow.
Process
We did in person usability testing on a mobile device, with three participants who all currently use a gas savings program. We gave participants the task of creating an account, finding the best gas station to fill up at and successfully saving money. We then observed how they went through the flow, asking them to think out loud in addition to answering any follow up questions. We then summarized our findings and combined them into an affinity map so we could identify and iterate on the most important areas needing improvement.
Affinity map
Findings
Users had no problems completing the flow. We achieved a 100% completion and 100% error free rate. The interface design was well received, buttons were clear, logo was liked, the majority of new elements were understood correctly and the concept was further validated. We did find certain areas where users hesitated or were looking for validation. These ares are listed below.
• Participants initially questioned what a safety rating was, but understood after the survey
• Participants understood the price displayed was the discounted price, but they would have liked to see the original price as well. This would also help them determine if the price at the pump was accurate or not for the survey.
• The ability to see how much each program was saving them individually was discussed
• Map icons were too small for 2 out of 3 participants, 1 participant missed the location dot
• Participants liked the short survey and having quick yes/no answers
Improvements were made primarily to the tips, map and instructions pages. We moved the tips page in front of the preferences, and explained the safety rating there. We also included extra information on the instructions page about the current pump price and discounts connected to each program. Additional design changes were made that should help users more confidently understand the information displayed.
Conclusion Summary
In addition to the "stacked" discount program concept, we were able to identify an unmet need and included safety ratings to be utilized in unfamiliar areas. These differentiating factors, along with the advanced filters and user feedback, help Stacks more fully inform their users. Giving them the ability to see all available fuel discounts in one convenient place, saves customers time and frustration. Users will enjoy seeing their savings grow and build trust the more they use the app. Stacks has made finding fuel discounts convenient and improved upon the current user experiece.