OVERVIEW
The app is designed to help users seamlessly manage their plans, events, and upcoming activities. Users can create and share plans, chat with friends about events, set reminders, and stay organized—all in one place.
Roles
As the UX/UI designer, I was responsible for integrating two key features into the application: Calendar and Map view.
Tools: Figma
Timeline: Summer 2022
Methodology: Design Sprint
Skills Applied:
-
Competitive analysis
-
Ideation and brainstorming
-
Crafting user stories and flows
-
Persona development
-
Survey design and user research
-
Conducting user interviews and observations
-
Sketching, wireframing, and prototyping
-
User testing and analysis
Problem
We set out to introduce two key features: a Map View and an enhanced Calendar. The objective was to provide a seamless user experience by enabling users to visualize their plans on a map, with the flexibility to toggle between monthly, weekly, and daily views. The calendar syncs with event details and locations, offering users a clear, intuitive way to manage their schedules.
Solution
Our solution was to integrate the calendar with the map, allowing users to access all relevant information for each plan directly on the map with minimal steps and effort.
Audience
Our target audience consists of tech-savvy, outgoing individuals aged 25 to 48. They enjoy planning ahead, knowing the details of when, where, and with whom their activities are happening. They also value staying updated on their plans through the app, having all relevant information easily accessible at their fingertips.
Tools
Tools Used in This Project:
Goals
Design Process
Underestand
User interview
Competitive analysis
Define
User persona
Empathy map
User journey
Story board
Ideate
User flow
Information Architecture
Design
Wireframe
Hi-Fi Designs
Prototype
Test
Feedback
Conclusion
Future concept
User research
I laid the groundwork for my design by conducting user interviews utilizing both quantitative and qualitative research methods. Participants were sourced from various platforms, forums, and my personal network.
I interviewed three individuals who actively use apps for different purposes and work in the tech industry.
To better understand their needs while using the ROAM app, I asked the following ten questions:
-
How often do you make plans with friends?
-
How do you manage your plans?
-
How do you typically update each other about your plans?
-
How do you manage your time related to your plans?
-
How do you coordinate locations for plans with friends?
-
Do you usually use calendar apps?
-
If yes, which app is your favorite?
-
What is your favorite feature of that app?
-
Do you share your location for plans with friends?
-
Does location impact your planning decisions?
User Research Interview Results
-
Users want updates about their plans with friends to avoid missing details.
-
They typically create group chats to consolidate information regarding their plans.
-
Users often share their plan locations with friends through text messages.
-
Misunderstandings regarding dates and times for plans are common.
-
Users occasionally arrive at incorrect addresses for their plans.
-
There is a strong desire to have all relevant plan information centralized in one place.
-
Users find it frustrating to use multiple apps to manage plans with friends.
Mary Young, CA
"It’s hard to manage a lot of things with all my friends when we decide to have a movie gathering. Hard to manage a specific time, date, and place."
Morgan James, NY
"Sometimes for birthday parties I don’t know how many guests I have”
Sara Driver, MI
“I don’t have enough time to check on my friends what they are going to do for the weekends and where they are going to go, to see if I can join them”
Key notes from the research
-
The design should provide users with all plan details quickly and with minimal steps.
-
It should be simple and intuitive for users to manage all their needs in the app.
-
Leverage calendar and map app mental models to enhance user experience.
SWOT Analysis
Key findings:​
-
Offer multiple calendar views (monthly, weekly, daily) for quick access to plans.
-
Implement a minimal design for a smoother user flow.
-
Offer various methods to achieve desired outcomes.
-
Integrate mental models from both map and calendar applications.
Persona
Drawing on insights from my proto-personas and data gathered from initial user interviews, I developed a persona that embodies the target users of this app.​
Journey map
After creating the persona, I developed a journey map for David to understand his experience managing plans with the app. This exercise revealed his emotions and identified new design opportunities for the two features.
Story board:
Story:
It’s Saturday morning, and David wakes up and checks his phone. He opens the app to see if he has any plans for the night.
“Oh, there’s a music event in Reza’s neighborhood, and he’s joining too! I can text him and pick him up on the way.”
He quickly checks the location and date using the map view feature.
Excited, they head to the event together and have a fantastic time.
Crazy 8
To design the two features, I employed the Design Sprint method. To brainstorm ideas, I utilized the Crazy 8 technique, which involved a fast sketching exercise where I sketched eight distinct concepts in eight minutes. This approach encouraged me to move beyond my initial, often less innovative idea and explore a diverse range of solutions to the challenge.
User story
- High-priority user stories:
As a user, I want to know if there is an event on this Wednesday in my office neighborhood or not.
As a user, I want to check my plans for this week and join them in the app.
- Mid-priority user stories:
As a user, I want to know about my upcoming event dates, timing, and locations in the least amount of time.
As a user, I want to know how many events am I joining this week to manage my time.
User flow
After creating personas, I created user flows to create paths through the app to solve these problems. This was the first concrete step in screen prioritization and will lead to a site map, and sketches.
Once I created the user flows I began to sketch out my ideas, I created these sketches to be able to quickly get my ideas out and identify any pain points and correct them before moving them to digital. While creating the user flows I realized that I could condense the final screens to solve multiple problems at once.
Site map
After understanding the screens I would design from the user flows, I created a site map to organize my screens and lay out the hierarchical structure of my app.
Style guide
Since the was designed before I should follow all the designs for the new features, the coloring, fonts, layout, and all the visual design exactly follows the design of the Roam app.
Fonts:
Inter bold 20 px, Inter regular 20 px, Inter regular 16 px
Low-Fidelity Wireframes
After developing user stories, user flows, and a site map, I began sketching low-fidelity wireframes.
First iteration:
Changes in the next iteration:
-
We can try a design without a yearly view.
-
Try the overlay calendar on the map view page.
Second iteration:
Features added to:
User testing(for the two iteration):
I did the user testing with 4 persons, I conducted the interview in person.
These are the tasks that I ask users to do:
-
To find their plans in September and also on the third week of September.
-
To find through the location which plan and date is near to their current location.
-
Check today’s plans on the map.
Positive Feedback:
-
60% of users successfully completed the tasks.
User Comments:
-
“It’s confusing to navigate to the map.”
-
“It took me a long time to access the map view calendar and find the plan details.”
-
“I need to click each location to find a specific plan or date.”
Improvement feedback:
-
“I like having the option to view my plans on the map.”
-
“What’s the purpose of the map view?”
-
“I wish I could filter by day, week, and month on the map view.”
-
Users find it confusing to complete tasks using the map view calendar.​
Required Changes:
-
Consolidate all information onto a single page instead of multiple pages.
-
Integrate the map and calendar as filters for the timeline.
-
Allow users to manage daily, weekly, and monthly views with the calendar and map on one page.
-
Draw inspiration from Airbnb's map view for organizing our plans.
Third iteration:
User testing(for the third iteration):
I did the user testing with 3 persons, I conducted the interview in person.
These are the tasks that I ask users to do:
-
To find their plans for September and also on the third week of September.
-
To find through the location which plan and date is near to their current location.
-
Check today’s plans on the map.
Positive feedback:​
-
100% of users completed the tasks.
-
“It’s easy to find the details of the plan”.
-
“I like that I can see the plans on the map with the location and date at the same time”
-
Users want to have filtration monthly, weekly, and daily.
Improvement feedback:
-
“I like to have the option to go back to the main page of listed plans”.
-
“ I don't usually check the yearly plans on the phone, it’s not practical”
-
Users want to have a flow from every task to the other.
To Include in the Next Version:​
-
Display upcoming plans instead of a yearly view.
-
Add plan names and dates on the map.
-
Include small images of the plans on the map
High-Fidelity Wireframes
​​
The visual design was incorporated into the latest wireframe, aligning with the design of the ROAM app.
Final thought
Throughout this process, I gained valuable experience in collaborating with a team and adhering to existing design principles while developing new features for the ROAM app. I learned how to translate ideas and research insights into design using the design sprint method. This experience highlighted the importance of groundwork before the sketching phase, demonstrating how to take a project from concept to high-fidelity wireframes in just three weeks.