Overview
|
Compriceable is a mobile platform designed to help low-income families save money in a way that fits their needs and constraints. With the personalization of crucial factors, shopping and saving can be easy. For Everyone.
|
Project Description
|
For every person, grocery shopping is an important part of life. However, not everyone has the same shopping privileges. Many low-income households are limited not only by their budget, but also by how far they can travel to shop and the different stores they can go to. The current applications available don’t combine all the functionality one would like to see in a single app, nor do they take into account personal restrictions. We believe this can be changed and seek to make such an application a reality.
|
Project Details
|
Class Project: Intellectual Foundations of Informatics - INFO 200 (January 2019 - April 2019)
Type: Mobile UX Design Tools: Balsamiq, Figma, InVision, Survey, Interviews Role: While the entire team worked on all parts of the project, I led the project and was heavily involved in the User Selection, Research, Personas, Low and High Fidelity Mock ups, and the Interactive Prototype. Compriceable was an 8-week project for INFO 200, an undergraduate course at the University of Washington. Want to learn more? Scroll down to learn more about Compriceable as well as the process we took to create our final project! |
Design Process
Defining a Problem
For every household, grocery shopping is necessary in daily life. However, each family’s income affects the ability to pay in grocery stores. Therefore, it would be good for low-come families if there is an application that can compare the prices of goods between different grocery stores. By doing so, families will have more options and can choose the best one with the same amount of money. At the same time, the app needs to be customizable as families with low budgets may not have the ability to travel far or to multiple stores.
|
|
User Interviews & PersonasTo learn more about our users, we conducted both an online survey and in-person interviews. Based on our results, we created three personas representing user’s needs and characteristics. The results showed that we need to find a solution for those who are not able to go to various stores for various reasons, as these are stakeholders who seek a solution from our application. Our results provided information and problems and suggestions from different groups of people, segmented by age, occupation, and income. With this knowledge, we can find the best way to benefit all who will utilize our application.
|
Key Insights
|
|
|
|
|
Our Solution
Our final solution, Compriceable, gives the user a better shopping experience by saving them time and money. After entering the app, the user is shown a home screen displaying the items currently in their cart and a list of stores. The user can then search for items to add to their cart, select variations of that item based on nutritional information, select personalization options to tailor their shopping experience, and can select the route option they feel is best. The app features a unique color scheme and voice controls to help improve the user’s experience and provides a universal design. Altogether, Compriceable offers unique functionality, is fun and easy to use, and saves the user both time and money, rewarding them while they do so.
|
|
Low Fidelity WireframesWe came up with the different features of each idea that we liked and quickly drew our ideas up on paper where we could make quick modifications and edits. We then got critiques from possible users and our TA. We focused on the look of the application as well as the interaction design, trying to make the application as intuitive as possible while sticking to common design standards. We also looked at making the application more accessible for different users. Once we liked our design, we created our final low-fidelity wireframes on Basalmiq.
|
High Fidelity Mock Ups
We made our high fidelity wireframes with an emphasis on button size (once again, to promote accessibility) as well as adding colors and pictures to make the application more welcoming for users! In our report, we emphasized the user centered value that we want our app to solve. We critically analyzed our problem and received feedback from peers.
We were also intentional with our font, color choices, and our design language to help make the application better and more usable to people while also standing out! More information on these choices can be found on Page 22 of the
Final Report Deliverable (located below).
We were also intentional with our font, color choices, and our design language to help make the application better and more usable to people while also standing out! More information on these choices can be found on Page 22 of the
Final Report Deliverable (located below).
|
Compriceable Home
|
Compriceable Shopping Preferences
|
Compriceable Store Options
|
Compriceable Rewards
|
Compriceable Search
|
Compriceable Trip Completion
|
Meet Compriceable
Main Features
|
Shopping Preferences
The main feature of Compriceable is the Shopping Preferences option. This page allows user to truly personalize their shopping experience to fit their lifestyle. They can select how far they can travel and mode of transportation to get stores that are in an accessible distance to them, as well as a maximum number of stores to visit. Finally, users can set any allergies or dietary restrictions that they or their family may have. |
|
|
Shopping Options
Based on the items on a user's shopping list and their preferences, the user will be give the best option, as well as other potential options, to decide where to shop. This allows the user to see what the distance and costs of supplies are in the stores around them. If needed, the next page also provides the user with directions to the store. |
|
Rewards
Saving money is hard, so you should be rewarded for doing so! By using Compriceable, users not only save time and money, but they can earn rewards to redeem at their favorite store as a thank you for choosing our app! Who knew saving money could be so rewarding? |
|
Final Report Deliverable
For the final deliverable, the team created a final report. The final report covered our entire design process, from our problem statement to our final interactive prototype. It included all our design choices, such as color, typography, and reasoning behind all our features.
Interactive PrototypeTest the Interactive Prototype on the Left to navigate through Compriceable!
|
|
Reflection
Overall, I was really proud of how my first project turned out. While I have previous experience wireframing and creating high fidelity prototypes, this is the first project I conducted from end-to-end where I got a say in the problem space, conducted research, and designed a solution. It was also the first time I led an interdisciplinary team.
All our decisions were backed by the data we collected and were carefully thought out. We created an application based on our user's needs and aimed to help solve major gaps in the shopping experience for everyone. To build on my work on Compriceable, I would want to conduct more user research and usability testing to make sure our application is meeting user needs. While we based all our decisions based on data, more usability testing would provide feedback directly from our user group. I would also work more on the flow of the application and redesign the typography and iconography of the application for a more modern look.
All our decisions were backed by the data we collected and were carefully thought out. We created an application based on our user's needs and aimed to help solve major gaps in the shopping experience for everyone. To build on my work on Compriceable, I would want to conduct more user research and usability testing to make sure our application is meeting user needs. While we based all our decisions based on data, more usability testing would provide feedback directly from our user group. I would also work more on the flow of the application and redesign the typography and iconography of the application for a more modern look.