Cargo is designed with the interest of assisting consumers by giving them the option to find cheaper and higher quality products in stores within their area.
In a time where prices seem to only rise we want to make sure that costumers are confident they are saving the most money, and also are buying products that meet their standards.
Cargo is designed with the interest of assisting consumers by giving them the option to find cheaper and higher quality products in stores within their area.
In a time where prices seem to only rise we want to make sure that costumers are confident they are saving the most money, and also are buying products that meet their standards.
Role
Role
Led the team from the initial idea for the app to final designs.
key focus areas included user research, project scope development, high and low fidelity wire framing.
Led the team from the initial idea for the app to final designs.
key focus areas included user research, project scope development, high and low fidelity wire framing.
Program
Program
Rutgers Creative Labs Fellowship
Rutgers Creative Labs Fellowship
Timeline
Timeline
October - December 2024
October - December 2024
Tools
Tools
Figma, Tableau, R programming
Figma, Tableau, R programming
Team
Team
1 product designer
4 ux designers
1 product designer
4 ux designers
Ease your mind and your wallet
Ease your mind and your wallet
Problem Statement
Problem Statement
We were tasked with coming up with an app idea in a week timeframe. A lot of good ideas were thrown around but we had trouble coming up with something both unique, and needed. Our main question was what app could have the most positive impact on the largest amount of people? During this brainstorming phase we discussed what problems many people share and spending was something that came up frequently. Food prices alone have climbed 31% in 6 years (nerdwallet) . We then used that idea to start the basis of the app.
The Problem: Users don't have a simple way to price compare and the current available price comparison methods usually don't account for the diverse preferences the population may have.
We were tasked with coming up with an app idea in a week timeframe. A lot of good ideas were thrown around but we had trouble coming up with something both unique, and needed. Our main question was what app could have the most positive impact on the largest amount of people? During this brainstorming phase we discussed what problems many people share and spending was something that came up frequently. Food prices alone have climbed 31% in 6 years (nerdwallet) . We then used that idea to start the basis of the app.
The Problem: Users don't have a simple way to price compare and the current available price comparison methods usually don't account for the diverse preferences the population may have.
Survey Analysis
Survey Analysis
Want to see the whole research process? click here.
Want to see the whole research process? click here.
Insights
Insights
1
Found that groceries and clothing were top spend categories, suggesting cost-saving recommendations should prioritize these areas first.
Found that groceries and clothing were top spend categories, suggesting cost-saving recommendations should prioritize these areas first.
2
Found categories that users were interested in seeing in the app. Some including Groceries, Health and Beauty and Household Products
Found categories that users were interested in seeing in the app. Some including Groceries, Health and Beauty and Household Products
4
An overwhelming majority of potential users care about savings, also price compare before purchasing.
An overwhelming majority of potential users care about savings, also price compare before purchasing.
3
Majority of potential users don’t have a specific app they use to price compare.
Majority of potential users don’t have a specific app they use to price compare.
Competitor Analysis
Competitor Analysis
Compares Gas Prices
Navigation on app
Rewards system
Customer reviews
Only focuses on gas
Depends on user input
Price tracking
Rewards system
Privacy concerns
Doesn’t update coupons
Only online price comparison
Easy to use
Notifies you of deals
Customer reviews
Accurate data
Isn’t a price comparison app
Highlights paid advertisments
Barcode price comparsion
Deal notification
Versatile covers lots of retailers
Limited price comparison options for food
Depends on user input
Ideation
Ideation
Based on the survey data we were able to separate our ideas into three different groups. We wanted to focus on defying features that would differentiate our app from other major apps.
Based on the survey data we were able to separate our ideas into three different groups. We wanted to focus on defying features that would differentiate our app from other major apps.
Low Fidelity Wireframes
Low Fidelity Wireframes
We produced some wire frames just to see roughly the design of the app. We wanted to make sure we hit most of the functionalities as some of the screens generalize.
We produced some wire frames just to see roughly the design of the app. We wanted to make sure we hit most of the functionalities as some of the screens generalize.
"Design System"
"Design System"
I put design system in quotations because we didn't have time to come up with a more formal design system. Since some group members were new to both Figma and designing we wanted to make the process as simple as possible. Focusing on the core concepts color scheme, font and typographic hierarchy.
I put design system in quotations because we didn't have time to come up with a more formal design system. Since some group members were new to both Figma and designing we wanted to make the process as simple as possible. Focusing on the core concepts color scheme, font and typographic hierarchy.
Buttons Green
Buttons Green
#538536
#538536
Text - sub heading
#365F1F
Text - sub heading
#365F1F
Text - paragraph
#808080
Text - paragraph
#808080
Text - Heading 1
Text - Heading 1
#56A25E
#56A25E
Text - Heading 2
#000000
Text - Heading 2
#000000
Main Green
Main Green
#56A25E
#56A25E
Color Scheme
Font Style: Inter
Typography
h2
h2
30
Text sizes
h1
36
h3
24
h4
19
paragraph regular
16
paragraph small
10
bold
bold
bold
bold
regular
regular
General font weight
bold
Item names (general)
Profile information
store description information
General Uses
Names of Pages..
Names of Pages..
Profile information and other small but important details.
Items (specific)
We wanted to make sure there was clear consistency in the typography. Listed below are the the most common use cases for each font size and weight.
We wanted to make sure there was clear consistency in the typography. Listed below are the the most common use cases for each font size and weight.
High Fidelity Wireframes
High Fidelity Wireframes
Design Iterations
Design Iterations
Due to fact we had limited time and weren't able to conduct user testing our goal was to make the app design as simple as possible. The design changes below reflect that.
Due to fact we had limited time and weren't able to conduct user testing our goal was to make the app design as simple as possible. The design changes below reflect that.
Simplification of Nav Bar
Simplification of Nav Bar
We decided to simplify the top panel and move the filters to the bottom of the screen as a FAB. The reasoning behind this change was to make everything more simple and neat.
We decided to simplify the top panel and move the filters to the bottom of the screen as a FAB. The reasoning behind this change was to make everything more simple and neat.
Saved Page Changes
Saved Page Changes
We wanted to keep everything on one page instead of the user having the scroll through. Simplicity is key. We also added a search option at the top so users can quickly access the items they are looking for.
We wanted to keep everything on one page instead of the user having the scroll through. Simplicity is key. We also added a search option at the top so users can quickly access the items they are looking for.
Highlights
Highlights
Specific Filters
Specific Filters
We wanted to ensure that the user is able to compare products based off their specific needs. Every category has specific filters so the user gets the cheapest product while accounting for their personal preferences.
We wanted to ensure that the user is able to compare products based off their specific needs. Every category has specific filters so the user gets the cheapest product while accounting for their personal preferences.
Map View
Map View
Interactive map that shows all gas stations in your area. These are color coded so that users are able to see what the cheapest and most expensive option. A list option is also available if users prefer that method over the latter.
Interactive map that shows all gas stations in your area. These are color coded so that users are able to see what the cheapest and most expensive option. A list option is also available if users prefer that method over the latter.
Personalized Saved
Personalized Saved
Want to track certain products? Cargo allows you to track prices and organizes them by category in a singular saved page. The user will also be notified if prices go down on a certain product they have saved.
Want to track certain products? Cargo allows you to track prices and organizes them by category in a singular saved page. The user will also be notified if prices go down on a certain product they have saved.
Reflection
Reflection
Time Restraints and Team Experience
We had just two months to take the app from research to final presentation, meeting only once a week for about an hour. This limited schedule required us to use our time efficiently and prioritize tasks accordingly.
Some team members were new to Figma, so we intentionally slowed the pace to ensure everyone understood the process. This not only kept the team aligned but also created an opportunity for shared learning and collaboration.
Time Restraints and Team Experience
We had just two months to take the app from research to final presentation, meeting only once a week for about an hour. This limited schedule required us to use our time efficiently and prioritize tasks accordingly.
Some team members were new to Figma, so we intentionally slowed the pace to ensure everyone understood the process. This not only kept the team aligned but also created an opportunity for shared learning and collaboration.
Key Takeaways
Key Takeaways
Set specific goals for each team member
Assigning clear goals to each member helps avoid open-ended tasks and keeps the team moving efficiently. When everyone is familiar with the software, this process is straightforward. Since some members were new to Figma, it became more challenging to set tasks effectively and required additional guidance.
Set specific goals for each team member
Assigning clear goals to each member helps avoid open-ended tasks and keeps the team moving efficiently. When everyone is familiar with the software, this process is straightforward. Since some members were new to Figma, it became more challenging to set tasks effectively and required additional guidance.
Importance of Face-To-Face Interaction
This experience highlighted the value of in-person meetings for discussing strategy. Even meeting twice a week can be enough to align the team, strengthen communication, and build rapport.
Importance of Face-To-Face Interaction
This experience highlighted the value of in-person meetings for discussing strategy. Even meeting twice a week can be enough to align the team, strengthen communication, and build rapport.
Testing after each stage (if time permits)
Conducting testing after each stage so that we can make changes as we go. This allows us to really center the user and essentially take them with us each step of the way until the final product.
Testing after each stage (if time permits)
Conducting testing after each stage so that we can make changes as we go. This allows us to really center the user and essentially take them with us each step of the way until the final product.