Helping you eat better!
Pocket Market
Role: UI/UX Designer, Visual Designer
(March 2023 - June 2023)
Our informatics project was about creating and designing an application of our choice. My team chose to create an app to help make grocery shopping easier and efficient both time and money!
My role as a visual designer, focused on designing and creating visuals that would help the user use our app with comfort and ease.
Our brainstorming table with ideas for accessible eating
It all starts with an inspiration...
As our whole group came together and tried to find a problem that we can design and solve, we found a common problem that plagued us in everyday life: grocery shopping. We brainstormed on what problem we wanted to solve and voted on the one that was the most feasible.
It also struck us was that it was something that we all experienced with, shopping for a food that is not consistently priced. As college students, we wanted to find the most affordable priced food items.
Developing a Problem Statement
After we found a problem that we want to solve, we needed to craft a problem statement so that we can pitch our ideas to others. By being able to condense our problem into a problem statement, it gives a clear direction on what we wanted to accomplish. We ended up with:
Our company, Munchies, is developing a supermarket price-crossing mobile application to help budget grocery shoppers solve the issue of buying overpriced groceries at one market when its much cheaper at another with a platform that allows users to look up specific goods and display what all nearby supermarkets are pricing.
Planning
Every successful project needs a plan! Our team organizer, Sana, created a spreadsheet that documented our tasks a schedule that we should complete them in. The spreadsheet also served as a main hub for all of our work to be put into one place for review and discussion.
Knowing your Competition (Competitive Analysis)
Researchers: Sana Trieu, Kevin Luu, Vanna Vuong, Xu Wang (Carson)
Our researchers of our group conducted a competitive analysis on different apps that provide a similar service to Pocket Market. We used this data as a scaffold on what our app can focus on and how to provide a platform where people can get the best deals on their groceries while also knowing the fastest route to get there. We noticed that many of the apps lacked direct access to grocery stores and their goods or had few stores to pick from. Our competitive analysis drove many of our discussion on how to design our app as well. Below is the spreadsheet that showed what we looked at in each application we researched on.
User Research
Researchers:Vanna Voung, Kevin Luu, Xu Wang (Carson)
After conducting a competitive analysis and discussing it as a group, it was time to do some user research. Our researchers, conducted user research using different IDEO methods: shadowing, surveying and interviews to study on people who go grocery shopping and to understand their personal experiences.
Personas
Designer: Sana Trieu
In addition to storyboarding, creating personas were a way for us to visualize our main audience of our mobile app. The first one is a college student that was modeled by Sana's personal experiences. The second one was modeled after a non-English speaker from our user research. Each persona describes what their frustrations and motivations towards shopping.
Storyboarding
Designed by me!
I drew up couple stories on how people would use our app and the basic functions of our app. Creating storyboards helped us as a team to understand how people would interact and use our app for their needs. It also gave us an idea what else we wanted to add for our app.
Design Workshop
After our preparation work in towards designing our app, it was time to hold a design workshop. We came together as a team to discuss details of Pocket Market's app design and functionality. We started with creating a logo for our app in which we pitched different ideas that culminated in Vanna creating a finalized design for our app. Afterwards, we discussed accessible features that our app can have such as having colorblind accessible color palettes integrated in our design motivated by one of teammates, Kevin who has colorblindness! Overall, our workshop laid a concrete ground work for what our app is going to do and what it would look like.
Having trouble seeing it? Use this figma link to view it on the website!
Prototyping
Designers: Vanna Voung , Kevin Luu, Me
In preparation for our design workshop, Kevin, Vanna and I created some lo-fi prototypes or what we thought Pocket would look like and flow. We presented our prototypes during our design workshop for further discussion on what features we want for the app to have. My low-fi prototype was heavily inspired by Amazon's mobile app layout where it was simple yet also very funcational. We created lo-fi prototypes in figma and then we finalized a design that we liked best and turned it into a hi-fi prototype.
Clikc on the image to also see the design workshop figma page!
Final Product (Hi-Fi Prototyping)
Designers: Kevin Luu, Vanna Voung, Me
With all the research, analysis and designing, we put it all together into one hi-fi prototype that is a window to what the app would function like if it was real! Pocket Market was a large journey for all of us and as a team we learned the inner workings on designing an application to solve problems. It was a learning experience for me and I enjoyed learning the process in designing an app to improve people's lives.
You can test it here right below!
Having trouble with interacting with these embeds? Use this prototype link to directly interact with the prototype! Use this figma link to view the editor!