UI Case Study
TravelCents
About the Project
As part of an intensive design course through BrainStation, I was tasked with completing a project. I created TravelCents, an expert budgeting and expense-tracking app designed to help travelers keep track of their expenses and stick to their budgets while on the go. This project involved creating a visually appealing and user-friendly mobile app interface. The process included researching and selecting a suitable color palette and typography, creating wireframes, designing high-fidelity mockups, and incorporating feedback from user testing to refine the final design.
UX Researcher, UX/UI, Visual Designer
My Role
Duration
2 months (February 7th/2023 - March 26th/2023)
Tools
Figma, Excel, Paper &pencil, zoom meeting, FigJam, Slack
Visual identity story
Brand development:
After incorporating the necessary revisions based on user testing, the prototype is now ready for high-fidelity design. However, before proceeding with the design, I will first focus on developing the brand. This will ensure that the visual elements of the prototype align with the brand's identity and messaging, resulting in a cohesive and impactful design.
Words that embody my brand
As a travel and savings-focused brand, I've chosen specific words that effectively communicate my message and identity. By incorporating these words into my design, I can create a visually compelling and consistent representation of the brand.
Refreshing
Peaceful
Calm
Natural
Happy
Moodboard:
Color
I created a moodboard to establish the brand identity of the TravelCents app, using selected adjectives to inspire and explore various design ideas.
Brand color:
I selected these colors based on their ability to convey a sense of refreshment, peace, calmness, naturalness, and happiness, which aligns with the overall branding and user experience goals of the TravelCents app.
Color palette:
For my design, I applied the 60-30-10 rule, which is a widely recognized principle in the design industry that suggests using a specific ratio of colors for a balanced and cohesive look. Specifically, I allocated 60% of the color palette to the dominant color, 30% to the secondary color, and 10% to the accent color.
Primary colors- for the chart, categories list background,
Accent colors- Active and inactive buttons, drop-down, tap bar icons, Small icons
Neutrals- search, texts
Supporting colors (not used on the task)- Information, error, warning...
Brand name ideas
As the brand is focused on the themes of budgeting and traveling, I undertook a brainstorming process to generate potential names that reflect these themes in a clear and concise manner. The aim was to identify a name that would effectively communicate the brand's purpose and resonate with its target audience.
-TripTight
-PennyVentures
-MoneyMiles
-WanderWallet
-TravelCents
-Tripcoin
Chosen brand name
TravelCents is a clever and catchy name for a budgeting and traveling app that could resonate with users for several reasons. It is Memorable, Descriptive, Unique, and Branding potential.
-TravelCents
Wordmark
To further enhance the TravelCents brand, I explored a variety of fonts and their weights, ultimately selecting those that conveyed a sense of professionalism, sophistication, and style. These fonts are clear and easy to read, ensuring a seamless user experience for the app's target audience.
I selected Raleway Semibold due to its clean and contemporary design, making it highly legible and visually appealing to a younger and tech-savvy demographic. Its balanced weight and width allow for easy readability, while its modern sans-serif style aligns well with the overall aesthetic of the TravelCents brand.
Logo ideation
After finalizing the wordmark font for the TravelCents brand, I proceeded to create a visual representation of the brand by sketching a logo. The logo was designed to be simple yet memorable, reflecting the app's focus on budgeting and travel.
According to a ScienceDirect study, “brand logos lead to a stronger memory in the user’s psychological makeup than brand names”. Therefore I chose to make a more distinct logo by manipulating the size of the logo and the font size
Grid and spacing
TravelCents is optimized for the iOS operating system, specifically for the iPhone 14 Pro Max model.
Column width- Auto
Type- Stretch
Margin-24
Gutter-24
Count- Auto
Type- Cent
Height- 10
Gutter-10
Font family
Typography
For my design, I applied the 60-30-10 rule, which is a widely recognized principle in the design industry that suggests using a specific ratio of colors for a balanced and cohesive look. Specifically, I allocated 60% of the color palette to the dominant color, 30% to the secondary color, and 10% to the accent color.
Open Sans
Header Subheader
Raleway
Body/Buttons
Atoms
Main navigation bar
Segmented Control
Buttons
Molecules
Main navigation bar
Search bar
Drop down
Organisms
Pages/Screens
High fidelity prototype
Upon completing my UI case study, I was able to translate my design solutions into a functional mobile app, TravelCents, to address the budgeting and expense-tracking needs of Melat and other budget-conscious travelers. By utilizing user research and persona development, wireframing and prototyping, and an iterative design process, I was able to create an effective and user-friendly solution to the problem at hand.
What is next?
Hi-Fidelity user testing
Develop new features based on the user’s need