Cup
My Role
UI designer - Designing UI elements of the application
Duration
February 2023 - March 2023
Responsibilities
Create Design System
Paper and Digital Wireframes
Low Fidelity and High Fidelity Prototypes
Iterating on designs
Tools
Pen
Paper
Photoshop
The Product
The Cup app is a initial design concept for an application that makes it easier for people to find and order the cheapest cup of coffee from the shop that is closest to them.
The Problem
With inflation and the high cost of getting coffee on the go, young adults need a quick and easy way to find the cheapest cup of coffee in their area.
The Goal
To create a concept for an application that makes it easier to find and purchase for coffee no matter the store.
Project Overview
Starting the Design
Mood Board
To begin this project, I gathered a number of photos, colors and a font that I felt would represent the app I was creating. I then combine all those elements into a mood board that represented the look and feel I was going for with my app.
Design a Logo
Utilizing Illustrator, I created a logo for my app. I used colors from my mood board and customized a typeface. so that it would fit into the design I was trying to achieve. I also simplified the name from my mood board because I tried to fit the logo into the first name of the app and it didn't work well.
Pattern Library
After completing my mood board, I then used Illustrator to create a pattern library of the buttons and elements for the application. Using the colors and typeface I selected in my mood board, I created high contrast buttons and buttons in different states.
Paper Wireframe
After creating a simple design system in illustrator and photoshop, I then created simple wireframes for my application. I came up with six different designs that represented initial design of the six different pages of the application.
Digital Wireframes
I took the paper wireframes and turned them into low fidelity wireframes. I did my best to make the designs one for one and when I could not I iterated on the design to make it work better.
Mockup
The final step for this project was to create a High Fidelity Prototype/Mock up of the application. Here I used all elements of the pattern library to create a cohesive application for finding and purchasing coffee.
Impact:
This application was designed with the idea of helping find deals on coffee quickly and easily. I hope that the concept can one day be turned into an actual application or its features be incorporated into other applications.
Going Forward
What I learned:
This project helped me with my UI design process. From creating mood boards to help guide the project to thinking of an issue I could solve through design. This project helped me use different applications photoshop and illustrator to create a cohesive application.
Next Steps:
Since this application design was for a class project in a class focused on UI design process, my next steps would be to continue the design with UX design process of Emphasize, Defined, Ideate, Prototype and Test. This will help me ensure that this concept is a viable and user friendly application.