Timeline
4 Months
Platform
Web
Team
Product Designer (me), Engineer (Juha Kim), Project Mentor (Taylor Emmerson)
My Role
Information Architecture, User Flow, Wireframe, Visual Design
Project Overview
Share Favourite Places with Others
Whooz Map is a web platform that users can create personalized maps and share their favourite spots, such as restaurants, date ideas, and hangout locations, all in one place.
This was an end-to-end project. I was responsible for the entire design process, from early planning to launch. That included information architecture, user flows, wireframes, and visual design. I collaborated closely with an engineer throughout the project to make sure the design worked well in development.
Opportunity
The idea came from a shared experience. My team engineer, Juha, and I often sent places to friends one by one through messages, which felt repetitive and disorganized. We wanted a simpler and more organized way to share places we love.
Key Features
Create a Personal Map
It allows users to share their recommended places by creating a personal map. To provide accurate and extensive place data, we used the Google Maps API. Users can easily search for places and add a comment to each one, explaining their recommendations and making the map more personal and trustworthy.
Share a Map with a link
After creating a map, users can share it instantly through a link. There's no need to sign in or create an account to view it. anyone with the link can access the map. This makes sharing favourite spots with friends or groups simple and flexible.
Explore Maps
To browse shared maps faster, I organized maps into nine main categories. Users can browse by category or sort maps by “newest” and “most popular” to find what’s relevant to them. Each map also displays its creation date and number of saves, helping users identify what’s trending. A save button allows users to keep maps they like and revisit them later.
Information Architecture
While designing the site architecture, I organized the content into two main areas: browsing other users' maps and managing personal maps, including creating new ones and accessing saved maps.
After receiving feedback through a critique session with the team, I simplified the structure by placing browsing maps on the homepage and adding a map creation button to the navigation menu, making it faster and easier for users to find and create maps with fewer steps.
Design and Development
Finding the Edge Cases Through Engineering Collaboration
Throughout the project, I met weekly with the engineer to review progress, address development needs, and make sure the design was implemented as intended. One important discussion was about when to save user data during the map creation process. Saving progress automatically would make it easier for users to return and continue editing, but it raised concerns about unnecessary storage.
To avoid this, we chose to save data only after the map was fully completed. I also added a warning message letting users know their work wouldn’t be saved if they left the page, helping them avoid losing progress by mistake.
Making the Map Creation Flow More Flexible
I initially structured the map creation flow as a linear process, guiding users step by step from entering map details to adding places. But after testing and feedback, I realized that updating map information required users to move back and forth between steps, adding unnecessary time and friction. I iterated the design so that users could edit information directly on the same page, making the process more flexible.
Design Guide
I wanted Whooz Map to feel open and inviting, encouraging anyone to create and share their own maps. I chose a bright yellow as the primary color, inspired by map markers and exploration energy. To create a friendly and modern look, I used a clean sans-serif typeface and rounded borders. To reflect inclusivity, I also designed a set of diverse characters representing a range of people and identities.
What I Learned
Designing with API Data
Using the Google Maps API taught me how to design within the limits of third-party data. While the API gave us access to rich location info and saved development time, I had to be selective about what to show. For example, I initially included Google user reviews, but removed them to reduce loading time and keep the experience lightweight.
