ROLES
Vinson Feng - UI/UX Designer
Cafer Avci - Product Manager • Software Engineer
Shaunak Umarkhedi - Software Developer
Kingsley Situ - Software Developer
DURATION
Aug 2024 - Dec 2024 • 14 Weeks
TOOLS
Figma • Confluence
FUNCTIONS
Prototyping • Wireframing • Mobile/Smartwatch App Design • User Research • Motion Design • Accessibility Design • Ideation • Design Thinking • Usability Testing
Urban Transportation, Environment, and Community Health Hub, aka. uTECH
UI/UX Designer
August 2024 - December 2024
uTECH is an innovative platform dedicated to addressing interconnected challenges of urban mobility, environmental sustainability, and community health. In the face of rapid urbanization and increasing environmental concerns, it aims to serve as a focal point for exploring and implementing transformative solutions that promote a healthier and
more livable future for urban communities.
Upon my final semester, I joined uTECH's Navigation Team as the sole UI/UX Designer, crafting beautiful and comprehensive experiences that cater towards the user's natural app navigation intuition to allow them to seamlessly travel based on their health wants and needs.
The Navigation Team focused on developing Lumeo 1.0, the preliminary version of a personalized mobile and smartwatch application that determines optimal travel routes based on user health and preferences for factors such as air quality index, travel time, and more.
Login Sequence
Context
// Overview
Joining the team in developing Lumeo 1.0, I was tasked with designing beautiful and intuitive wireframes and prototypes of a navigation application that utilizes user health metrics and demographics and geographic air quality conditions to determine the optimal route. I collaborated closely with the team to define, develop, and deliver visual designs in a consumer-facing environment.
// My Roles
As the sole UI/UX Designer, I designed high-fidelity prototypes of user-centric interfaces for the mobile and smartwatch applications using Figma, ensuring a seamless and engaging user experience. Throughout the process, I created various layout/aesthetic iterations aimed to best address user pain points (optimal UI layout, component visibility, etc.). Meeting with the software engineer and developers on a weekly basis, we deliberated on the designs to ensure design feasibility and implementation fidelity and documented our workflow using Confluence.
Additionally, I collaborated closely with uTECH's Product Team, meeting on a weekly basis to communicate my progress with stakeholder groups and ensure that my designs aligned with the uTECH's vision, guidelines, and goals. This allowed me to proactively seek out feedback through design critiques/ workshops with higher level designers and work closely with uTECH's other UI/UX designers to ensure brand consistency and design feasibility. We tested the usability of our applications and utilized feedback to continuously iterate upon our designs. With the marketing leads and other designers, we developed a market launch plan, ideated various names for each uTECH team's respective application, and brainstormed logo designs.
Problem
// Identification
Lumeo 1.0 aims to allow urban dwellers of all backgrounds (air-quality-sensitive users, health-conscious travelers, fitness enthusiasts, time-conscious commuters, carbon footprint-conscious individuals, etc.) to travel based on their health wants and needs in relation to their immediate surroundings. With the goal of being efficient, intuitive, and personalized, the problem was presented:
How can we develop an application to optimize urban navigation for a context where environmental, sustainability, and health concerns are paramount?
// Competitors
Research
To better understand the nuances in strategic layout design of travel apps, I analyzed other travel applications such as Apple Maps and Google Maps to identify the relationship between strategic UI layouts and intuitive design systems towards optimal user navigation (both in-app and during travel!).
This allowed me to hone in on integration of specific functions and placements of various design components to best address the pain points and wants/needs of uTECH's target demographic: urban travelers.
// User Interviews
Interviewing a group of frequent urban travelers who rely on navigation apps for travel, I found the following pain points:
1. Non-existent health-focus: Competitors fail to incorporate health-oriented features, missing an opportunity to attract users seeking a health-conscious approach to travel.
2. Lack of personalization features: Many competitors lack advanced personalization, offering generic navigation options that fail to adapt to individual user preferences and needs.
3. General benefit analysis: Competing apps focus solely on efficiency, neglecting the broader benefits of integrating health, sustainability, and user-centric design into navigation solutions and fail to display individual route benefit differences.
4. Cluttered interface/lack of information hierarchy: Competitors often present cluttered interfaces, making navigation cumbersome and overwhelming due to poorly organized information and a lack of clear prioritization.
// Value Proposition
With the product needed to be launched within several months, I transformed the user pain points into targeted opportunity areas, outlining the following key features to guide my designs and determine the MVP (Minimum Viable Product) to ship:
User-Friendly Interface
An intuitive and user-friendly interface designed to simplify complex travel planning and navigation, ensuring a seamless and stress-free experience.
Smartwatch Sync Integration
Seamlessly connects to smartwatches, offering real-time updates and turn-by-turn directions for a hands-free travel experience.
Personalized Settings Options
Extensive settings system to allow users to input their health metrics and preferences for travel and methods of travel (car, public transportation, walking, etc.) and Bluetooth device connections (car, smartwatch, headphones).
Real-Time Air Quality Mapping Data
Map overlay that displays air quality indices and surrounding pollutants to allow users to travel safely based on current geographic air quality and up-to-date routing.
Health Focused Navigation
Navigation routing system that calculates cost of travel based on user input factors such as travel time, fuel efficiency, and air quality.
Design
// Flowchart
I created the following flowchart to map out the relationships between each key feature and flesh out subsections and interactions.
Considering the goal of the app, I kept much of the functions very simple in relation to one another to allow for ease of use. Provided routes were strategically limited to three to minimize the choices on the user side to avoid confusion and extensive decision-making.
One of the most integral parts of the user experience is the settings system, which allows users to directly view/input preferences that define the suggested routes from the navigation portion of the app. Users would be able to rank preferences in regards to route aspects such as travel method, travel duration (time and distance), air quality shifts throughout travel, public transit transfers , avoidance of tolls, and more.
// Low-Fidelity Wireframes
Based on the user research, I worked closely with the development team in creating the following wireframes for the base design of the application.
I focused on creating an efficient layout for the home screen and settings system, ensuring clarity and ease of use. Through close collaboration with the development team, we refined key features that align with users' needs, emphasizing a health-conscious navigation experience.
I adopted a minimalist approach to presenting route, destination, and settings details to enable users to quickly access essential information, such as air quality index along the route, travel duration, and neighborhoods traversed, empowering them to make informed decisions.
The destination search bar is strategically placed at the bottom of the interface, ensuring an unobstructed view of the map and the user's surroundings. Side buttons are designed to provide quick access to essential functions, including settings, camera repositioning, and map overlay toggles. This layout allows users to efficiently adjust preferences, restore the camera to its default position, and seamlessly switch between real- time air quality and default map views, enhancing usability and interaction speed.
Since the smartwatch is an accessory for the application, the features should be limited to syncing and route viewing, strategically limiting the users interaction options considering the smaller interface to avoid visual clutter and noise. In addition, the smartwatch sync button was kept as a toggle function in settings for users that do not intend to use a smartwatch for navigation.
.png)
// High-Fidelity Wireframes
Login​
Home
Map Overlay
Routing (Dest. Selected)
.png)
Minimized Trip Notification
Extended Trip Notification
I translated the low-fidelity wireframe designs into the following high-fidelity wireframes:
Search (No Input)
Route Selection
Route Start
Active Route
Travel Method Selection
Route End
Settings
Smartwatch Sync Selection
Smartwatch Sync
Route Sync Progress
Detailed Navigation
Minimized Navigation
// Usability Testing
I developed a click-through Figma prototype to conduct usability tests to gain an in-depth understanding of how users interact with the new interface. I completed three test sessions with interviewed users, the development team, the product team, and higher level designers.
First, I created out a user testing plan, created tasks to be completed in the prototype, observed users completing the tasks through screen sharing on zoom and in person, and also had sessions where users could freely try to navigate through the app on their own, analyzing for areas where there was obstructed navigation to be fixed.
// Iterations
Feedback from usability testing was implemented during the development of the new and improved iterations for the prototype. Changes include:
Adding In-Depth Route Analysis:​​
-
Review Key Benefits: Provides an in-depth overview of travel duration, distance, air quality, and other essential metrics.
-
Understand Route Decisions: Offers insights into the reasoning behind the chosen directions and route preferences.
-
Empower Future Choices: Helps users make informed decisions by analyzing factors that contributed to an optimal travel experience.
// Prototype
Here is the prototype demonstration video I developed and presented during the final in-person meeting.
This event brought together other uTECH app development teams and environmental technology platforms to showcase their product development progress and discuss next steps. Each team provided insights into their algorithm development cycles and front-end design processes, fostering further collaboration and knowledge sharing across projects.
Style Guide
// Colors
White
​​​​
​
#FFFFFF
​
R 255
G 255
B 255
White Smoke
​​​​
​
#F5F5F5
​
R 245
G 245
B 245
Light Grey​
​
​
#E5E5E5
​
R 229
G 229
B 229
Ash
​​​​​
​
#A3A3A3
​
R 163
G 163
B 163
Silver Mist
​​​​​
​​
#D4D4D4
​
R 212
G 212
B 212
Charcoal
​​​​​​​​
​​​​​
#737373
​
R 115
G 115
B 115
Slate
​​​​
​
#525252
​
R 082
G 082
B 082
Midnight Coal
​​​​
​
#262626
​
R 038
G 038
B 038
Black
​​​​
​​
​
​
​
​
​
​
#000000
​
R 000
G 000
B 000
Onyx Grey
​​​​​
​​
#404040
​
R 064
G 064
B 064
Obsidian
​​​​​
​​
#171717
​
R 023
G 023
B 023
Spring Emerald
​​​​​​​​
​​​​​
#22C55E
​
R 034
G 197
B 094
Crimson Red
​​​​​
​
#EF4444
​
R 239
G 068
B 068
Golden Sun
​​​​​
​
#EAB308
​
R 234
G 179
B 008
Rose Blush
​​​​​
​​
#FECACA
​
R 254
G 202
B 202
Lemon Glow
​​​​​
​​
#FEF08A
​
R 254
G 240
B 138
Mint Frost
​​​​​
​​
#BBF7D0
​
R 187
G 247
B 208
Lush Lime
​​​​​
​
#4ADE80
​
R 074
G 222
B 008
Mint Glow
​​​​​
​
#86EFAC
​
R 134
G 239
B 172
Spring Mist
​​​​​
​
#DCFCE7
​
R 220
G 252
B 231
Mint Frost
​​​​​
​​
#BBF7D0
​
R 187
G 247
B 208
Deep Green
​​​​​
​
#15803D
​
R 021
G 128
B 061
Mossy Green
​​​​​
​
#166534
​
R 022
G 101
B 052
Shadow Fern
​​​​​
​
#16A34A
​
R 020
G 083
B 045
Verdant Emerald
​​​​​​
​​
#16A34A
​
R 022
G 63
B 074
// Typography
// Iconography
// Components
I used ShadCN's Figma UI Kit to ensure a cohesive typographic design base with a clear visual hierarchy.
I used Figma's Material Design Icons plugin to create buttons and icon design elements.
I created a component library of logos, search bars, buttons, direction cards, labels, and more with various active states for smooth transitions when being interacted with by the user.
Attached is the full Figma project file and component library:
Takeaways
// Next Steps
For the short-term future, I will be continuing to assist uTECH in further developing other applications and moving between teams to further hone my design capabilities and interpersonal skills.
For Lumeo, I will further design prototypes for viewing on other devices such as car interfaces while improving responsiveness on mobile and smartwatch devices to expand on my design skillset. In addition, I will further flesh out the settings portion of the application to implement personalization options.
// Reflection
Joining uTECH's Navigation Team to develop Lumeo 1.0 was a transformative experience that fostered my growth as a designer, learner, collaborator, and mentor. As the sole UI/UX designer, I crafted user-centric interfaces for mobile and smartwatch applications, focusing on seamless navigation and addressing user pain points through intuitive layouts and high-fidelity prototypes based on thorough insights derived from extensive user research and usability testing.
Throughout the project duration, I embraced the role of a learner, constantly iterating my designs based on feedback from senior designers during workshops to ensure alignment with uTECH’s goals and vision. Collaborating closely with developers, product teams, and stakeholders, I prioritized design feasibility, brand consistency, and iterative improvements informed by user testing.
Mentoring junior designers of uTECH's other teams also further enhanced my skills, as I guided them in creating prototypes and solving user challenges while being inspired by their creative approaches. This experience deepened my understanding of user-centered design and strengthened my ability to deliver impactful solutions addressing the challenges of urban mobility, sustainability, and community health.
Thanks for stopping by.
Check out my other projects!