Just a minute...
Work
About
Writing
Dragonfly
Blue-sky exploration of a next-generation personal navigation device.

Empowering users with confidence, efficiency, and unparalleled convenience on the road.
ROLE
Product Designer
TIMELINE
May -> Aug 2024
SKILLS
UI/UX
TOOLS
Figma
01.
Prompt
Mobile navigation = decrease in GPS unit sales
Since the release of the iPhone, handheld GPS devices have drastically decreased in popularity.

Even new releases of the product don’t look or feel much different from the original.
Navigation solutions on the market
THE CHALLENGE
How might we improve the usability of the GPS device and modernize the interface design?
Deliverables
1. Moodboards
2. Wireframes
3. High-fi designs
4. Prototype
5. Design system & brandbook
*Note: The focus of this project was more on the visual design and craft rather than product strategy.
02.
Solution Preview
tl;dr
A new way to navigate on a state of the art device.
Dragonfly is an ultra-wide screen personal navigation GPS device with an interface that is intuitive, modular, and customizable.
03.
Research
To kick off the process, I had to better understand the space we were working within. Part of this was doing a lot of secondary research to call out key signals about the state of the market.
Market
opportunities
The questions to answer were:

Where do we fit into the landscape? What opportunities and needs exist?
Navigation solutions on the market
THE CHALLENGE (REVISED!)
How might we improve the usability, modernize the interface design, and appeal to a larger market?
First, I created a user flow for Dragonfly. I approached the user flow from the simple perspective of somebody wanting to route themselves to a nearby restaurant, with a stop or two along the way.
I then translated this userflow into a wireframe prototype, allowing me to test the user flow and rapidly test different ways of interacting with the device.
WIREFRAME TESTS
Tap and hold to edit
What if you could customize the layout of your screen by tapping and holding?
WIREFRAME TESTS
Swipe through pages
What if you could swipe between screens, like the pages of your phone’s home screen?
In the end, these ideas were scrapped in lieu of a floating panels model, for best modularity, flexibility, and efficiency.
04.
Development
Two sets of proposed moodboards for the visual direction of Dragonfly.

The universal, clean direction of the top row of moodboards felt that they would attract a larger demographic of users and better improve ease of use and clarity.
With the moodboards defined and wireframes complete, I began to explore variations of the visual look and feel for the interface.

After meeting with stakeholders, testing various combinations, and consolidating feedback, I developed a single direction to pursue: clean and functional UI with a single accent color that can be personalized to fit individual needs.
Unconventional devices = unconventional constraints
Given that Dragonfly would not be a handheld device, it was imperative that all touch areas were significantly larger than a typical mobile or desktop design.  

The lack of fine control that users would have as they try to touch buttons while driving necessitated button and card-based designs and the use of gestures when possible.
Physical testing to ensure all touch areas were suitably large.
Color theming and accessibility
A major challenge arose when developing various color skews for this interface that would translate between light and dark modes.

Light mode in particular proved challenging to maintain appropriate levels of contrast and ensure readability and WCAG AAA compliance.

I admitted defeat: Yellow wouldn't work. It would conflict with yellow traffic lines and wouldn't communicate well in light mode.
Color contrast issues with yellow.
Ultimately, I tested hundreds of colors, avoiding colors that were either significant to traffic indicators, map areas (greenery, water, etc.), or would not contrast properly against the rest of the user interface.

I arrived at these final four color skews.
05.
Solution
01.
Give yourself a driver profile
Save your preferences to a driver profile so that you never have to adjust your settings, even if someone else has been in the driver’s seat.
02.
Decide where to go
Route your way to your destination through recents, POIs, or simple search, without ever having to leave the map.
03.
Drive distraction free
Collapsible panels let you control the information you want to see on screen.
04.
Self-hiding interface
And all those other unnecessary menus? They know to go away on their own when you’re no longer looking at them. Just touch to bring them back.
05.
Personalize your display
Choose from a variety of accent colors and between light and dark display so that your interface works for you.
Final presentation
6.
Presentation & documentation
Presenting to stakeholders
I presented my solution to stakeholders including senior product managers, product designers, and other leadership. I walked through my full design process and research into utilizing artificial intelligence in the creative process.

Presentation linked above!
Comprehensive design documentation and system buildout
I also created a workbook documenting the process of the project. This was accompanied by a UI kit, style guide, and other necessary assets to allow my work to be used by other designers.
Success Metrics
Potential success metrics I would use if I could test my designs.
8.
Takeaways
01.
Unconventional aspect ratios = unconventional testing methods
02.
The importance of presentation: an idea is only as compelling as how clearly it is communicated.
Signing off,
Elissa
Crafting experiences & growing
communities with pixels, “words”,
<code>, and interactions.
emartial@usc.edu
LinkedIn
X / Twitter
Posts.cv
Elissa last cleaned around here in January 2025. Let her know if you catch a bug! Recruiting-season mode is currently off. For case studies, email me!