Designing Clarity: How I Improved Ela Travel’s Onboarding & Navigation
The USFMobile app was designed to provide students access to key University of San Francisco resources. As a current USF student, I found the app to be inconvenient to use on a day to day basis. In response, I set out to redesign the mobile app into resource that is easy to use for students on the go.
Timeline
6 hours (July 2023)
My Role
Sole Product Designer
Scope
UX Research
Wireframing
User Testing
Prototyping
Tools
Figma
Wireframing
Design System
Key Design Decisions
Establishing clearer hierarchy.
The original wireframes treated most information with equal visual weight. I introduced clearer hierarchy through typography scale, spacing, and grouping to help users quickly identify primary sections and actions.
The Problem
The existing UX wireframes established overall structure, but lacked visual hierarchy, consistency, and clarity needed for a usable dashboard UI. The goal was to translate these structural wireframes into a coherent interface that felt intuitive, scannable, and scalable.
Constraints & realities
Stepping into the shoes of a user, some questions arose from my perspective:
Once I click "let's explore," now what do I do?
If service is paid, why should I choose your service, what's included in service?
Is the map intereactive? What kind of information is it supposed to provide?
I see there is a chat bot, but what questions would I even ask it?
Interviews
Survey
User Goals
Find out which countries they have access to
Apply for necessary visas
Plan their trip
User Pain Points
Applying for visas is time consuming, repetitive, and risky.
Hiring a travel agent can be to expensive.
Key Design Decisions
Refining the user flow.
Thinking through the process of users interacting with the service.
Problem: User retention
Design System
Building upon my lo-fi sketches, I began developing details of the interface with mid-fi wireframes. My underlying goal being to create a straightforward and cohesive experience for students, I gravitated toward a clean and modern visual interface. Most importantly, I made sure to prioritize the features students found to be useful, and tried to make them easily accessible.
Typography
I opted for a sans-serif font for a clean and easily readable experience.
PP Mori SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
PP Mori Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Colors
Instead of a color palette, I chose to use imagery of the Golden Gate Bridge, an iconic symbol of San Francisco, encouraging students to explore the city. The icon is the existing USF logo mark.
Key Design Decisions
Final Designs & Mockups
What I learned.
Through my product design challenge, I learned how to effectively navigate the design process under a tight deadline, prioritizing key tasks and decisions within a six-hour window. This experience taught me how to stay focused, work efficiently, and deliver meaningful results under pressure. Additionally, I gained valuable skills in presenting my findings to a team, clearly communicating my design decisions and thought process.
This challenge not only strengthened my ability to work quickly and collaboratively but also demonstrated my capability to adapt and succeed, ultimately leading to me securing the internship position.
like what you see?
Feel free to check out my next case study, or send me a message on Linkedin!
2026 portfolio by anna knick
aknick90@gmail.com