OVERVIEW
The scenario for this application is to help users to manage their plans, events, and all their upcoming through the app. Add their plans, share with friends, chat about the plan, have a reminder and etc.
Roles
Role: UX/UI designer
My role as a UX/UI designer is to add 2 different features to the application, Calender and Map view.
Tools: Figma
Date: Summer 2022
Design Sprint method
Skills: Competitive Analysis, ideation, user stories, and flows, creating personas, survey design, conducting user interviews and observations, sketching, wireframing, prototyping, user testing & analysis
Problem
We wanted to add 2 new features to the designed application.
Design a map view calendar to make a great experience for users to find their plans on the map. And also see the monthly, weekly, and daily calendars on the map and sync all of them with the plan and location and also see all the details with that.
Solution
The solution we came up with is to mix the calendar with the map, so we can have all the information for each plan on the map in minimum steps and time.
Audience
Our target audience is going to be between 25 to 48 years old. Outgoing, experimental, tech-friendly people like to have their plans ahead and know when, where, and who are having the plan with. And also they want to be updated about their plans through the app and can have all the information about it.
Tools
Tools that are 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 foundations for my design by first conducting user interviews in the format of quantitative and qualitative research. I sourced participants from multiple platforms, forums, and my personal network.
I conducted interviews with 3 people. I chose the ones who are using apps for different purposes, and also they are working in the tech industry.
I asked 10 questions to have a better understanding of their needs while using the ROAM app.
These are the questions that are asked:
-
How often do you have plans with your friends?
-
How do you manage your plans?
-
How do you usually update each other about the plan?
-
How do you manage your time with your plans?
-
How do you usually manage your location with your plans with your friends?
-
Do you usually use Calendar apps?
-
If yes, which app is your favorite one?
-
What is your favorite feature of this app?
-
Do you share the location of your plans with your friends?
-
Does location impact your plans?
User Research Interview Results
-
Users like to have updates about their plans with their friends to avoid missing anything.
-
Users usually make a group chat to have all the information about their plans with their friends.
-
Users usually share the location of their plans with their friends via text.
-
Users sometimes misunderstood the date and timing of the plans.
-
Users sometimes went to the wrong address for their plans.
-
Users want to see all the information about their plans in one place.
-
It’s frustrating to use different apps to manage a plan with friends for the user.
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
-
Have a design that can show every detail about the plans in a few amount of time and steps.
-
The design should be simple, and user can manage all their needs through the app.
-
Use mental models of the current calendar apps and map base apps to make a better experience for users.
SWOT Analysis
Key findings:
-
To have a different view of the calendar, monthly, weekly, and daily. To find their plan date and time in the least amount of time.
-
Have a minimal design to have a smooth flow.
-
Have different ways to reach the result.
-
Follow mental models of maps and calendars at the same time.
Persona
Using my knowledge of the target market developed in my proto-personas and the data from my initial user interview, I created a persona that represented the types of users who would utilize this app.
Journey map
After the persona, I create a journey map for David to really get into his mind and empathize with his experience of using the app to manage his plans. This was a great exercise because as I imagined the emotions David would encounter along using Roam app, it allowed me to realize new design opportunities for the 2 new features.
Story board:
Story:
It’s a Saturday morning. David wakes up and checks his phone. He opens the app and checks if there is any plan for tonight.
“Oh, There is a music event, and it’s in Reza’s neighborhood and he is joining as well. I can text him and pick him up on my way”.
He checked the location and the date through the map view feature.
And they went to the event and had a lot of fun there.
Crazy 8
For designing two features I used the Design Sprint method. and for mapping out the ideas I did the Crazy 8, with a fast sketching exercise that challenges me to sketch eight distinct ideas in eight minutes. The goal is to push beyond my first idea, frequently the least innovative, and to generate a wide variety of solutions to my 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 creating user stories, user flows, and a site map, I started sketching out 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 completed the tasks.
-
“It’s confusing how to get to the map”.
-
“It took me a long time to get to map view calendar and find the detail of the plans through that”
-
“If I want to find a specific plan or date on the map I should click on each location to find out which one is the specific one”.
Improvement feedback:
-
“I like to have the option to see my plans on the map”.
-
“ What is the point of the map view here?”
-
“I wish I could filter the day, week, and month on the map view”.
-
Users get confused to do the task for the map view calendar.
Must change:
-
Have all the information on one page not on different pages.
-
Have the map and calendar as a filter for the timeline.
-
Can manage the daily, weekly, and monthly with the calendar and map together not as a different page.
-
Inspire by the Airbnb map view page to have 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.
Must add to the next version:
-
Have the upcoming plans instead of a yearly view.
-
Add the name of the plans with the date on the map.
-
We can have a small picture of the plans on the map as well.
High-Fidelity Wireframes
The visual design was added to the latest wire frame based on the design of the Rom app.
Final thought
Through this process, I learned a lot about how to work with a team and follow the previous design and how to design new features based on a designed app and stick to the design thinking of the app and also the user interface design. I learned how to process ideas and conduct research while putting those insights into design in a design sprint method. This process showed me all the work that you do before even starting the sketching phase. In just 3 weeks make a project from scratch to the hi-fi wireframes.