top of page
Faded Shapes

MapBuddy 

Tool: Figma, Photoshop, Illustrator

Time: 3 Days

Personal Project

icons8-vertical-timeline-100.png

Timeline

Group 52.png
icons8-high-importance-80 (2).png

Problem

With school about to start, I think back about my freshman year and figure out my biggest challenge in freshman year is finding the classroom. I remember every day I have to depend on google map to guide me, and it is very frustrating to keep switching from google map and my class schedule. 

​​

My Problem: 

  1. Need to keep switching from google map to class schedule 

  2. Tedious to type in the location every time, especially when there is only ten minutes between class

  3. Even if saved the location in google map, it is hard at a glance to distinguish which location is for next class because it is all clutter with other saved location.

  4. Get lost in campus easily and don't know where I am 

  5. Hard to meet with friends because you have to constantly checking their schedule to find a mutual free time slot

icons8-search-more-80 (1).png

User Research

icons8-change-user-80.png

User Personas

icons8-storytelling-64.png

Storyboard

Untitled_Artwork 8.jpg

This storyboard illustrates how a college student is lost in the campus and need to hurry to his next class which starts in 10 minutes. Luckily, he has the app Mapbuddy which shows him his class schedule and direction to his next classroom. 

This storyboard illustrates how a girl use Mapbuddy to quickly find her friend's schedule and meet up with a him.  

Untitled_Artwork 17.png

User flow/ Information Architecture

icons8-flow-80_edited.png
Desktop - 1.png
icons8-prototype-80.png

Wireframe

X - 10.png
X - 27.png
X - 11.png
X - 11.png
X - 11.png
X - 11.png
X - 9.png
X - 12.png
X - 13.png
X - 15.png
X - 28.png
X - 11.png
X - 14.png
icons8-pencil-80 (1).png

Prototype

Frame 3 (1).png
X - 24.png
X - 25.png
X - 26.png

Onboarding Page

monochromatic color scheme background to give unity and sense of progress

illustration and sentences that highlight the function of the app 

Home Page

X - 5.png

  • Clear class schedule for today  

  • Show your own location 

  • Show friend's location & message

  • Saved location (Classroom & Favorite)

X - 18.png

  • Easy and quick reply

  • Text friend by clicking their icon on the map 

  • Quick send emoji and photo

  • Friend's location under their name 

​

X - 19.png

  • Click location on the map to save it 

  • Different icons and colors for easy distinguish 

Profile Page 

  • Side menu with student ID on display

    •  (many people in interview report having issue remember their student ID in freshman year)

​

Group 56 (1).png

  • student ID for scanning

    • no worry for losing student ID 

  • Weekly schedule with professor name and classroom 

X - 3.png

Friends Page 

  • Easy to check all your friends' daily schedule

  • Add friend function on top right with icon 

  • Message Friend by click their profile

​

  • Add by searching friend's ID

  • Friend recommendation on mutual classes or friends

    • For those who reports hard to know people in classroom  

​

  • Message friends by clicking their profile

​

X - 8.png
X - 16.png
X - 18.png

Message Page 

  • Clear message history 

  • Click friend's profile to see full conversation

  • Start a new chat by clicking the New icon 

​

  • Start a new chat by clicking the New icon 

​

  • full conversation with indicate how whether the friend reads the message   

X - 7.png
X - 30.png
X - 18.png

Saved Page 

  • See Save page for saved location 

    • Classroom in green ​

    • Favorite in pink 

  • Different color for quick distinguish

  • Consistent color with the icons in the map

​

  • Easy to add location in the list

  • Easy to share the list with friends

  • Contain the photo of the building for easy recognition 

​

  • Easy to add new list 

  • Able to share the list when creating it 

​

X - 17.png
X - 31.png
X - 17.png
icons8-data-provider-80.png

User Testing 

icons8-wacom-tablet-64.png

I conduct user testing with 5 college students and have them perform several tasks to explore app. Many users report favor the color scheme of the app and appreciate the illustration on the on boarding page. 

​

Tasks: 

  1. Message a friends 

  2. Check friend's schedule

  3. Save location and check the list 

  4. Add new friends

​

​

Result: 

  • Message Friends:

    1. 5/5 college students find messaging friend is easy task and have no trouble perform the task

    2. 4/5 college students think it is convenient to have message display on home for immediate response

    3. 1/5 college student didn't prefer message display on home page because he think the home page will become too messy once there are many message

  • Check on friend's schedule

    1. 5/5 college students have no trouble on performing the task of checking friend's schedule​

    2. 4/5 college students like the feature of checking friend's schedule 

    3. 1/5 college student didn't prefer this function because of privacy concern. He feels "weird to let other people know his schedule and where he is at" 

    4. 1/5 college student suggests that when clicking friend's icon on friend page maybe instead of sending message to friend it can be checking friend's location 

  • Save Location 

    1. 3/5 college students ​have no trouble save the location 

    2. 2/5 college students report that they will not know about the save location function if they weren't been told. 

    3. 5/5 college students have no issue finding the list and open it 

  • Add New Friends 

    1. 5/5 college students have no issue adding new friends​

    2. 5/5 college students think friend recommendation based on mutual class is a very helpful idea. 

​

​

​

​

Iterations

  • Add instruction to guide users

  • Able to close the message in the home page if wanted  

X - 32.png

  • When clicking friend's icon in Friends page, it will show friend's location instead of messaging him or her.

  • Click friend's icon again to message him or her

X - 33.png
X - 18.png
X - 8.png
icons8-saturation-80.png

Reflection  

  • Create Human Center design based on user testing and user interview 

    • needs-finding based on ​personal experience and interviewee

    • redesign based on user testing feedback 

    • favor icon and illustration 

    • Less is more!  

  • Next step: In the future if I have more time or want to invest more in this project, I will design a second version of this app and conduct A/B testing with Google analytics. After collecting the data, I will create a chi square test to understand which version is more prefer by the users and why. Through this process, I will create a design that is more data driven and human center. 

I conduct qualitative interviews with 15 college students to ask about their campus experience and 5 incoming freshmen to ask about their concerns. Through the interview, I hope I can find some common issues people have as a freshman, so I can have a better understanding of designing an app make freshman students life easier. 

​

Result: 

  1. 12/15 college students report having the issue of getting lost in freshman year 

  2. 10/15 college students think searching google map every single time is tedious 

  3. 5/15 college students report it is tedious that they have to keep checking their class schedule in a photo album

  4. 8/15 college students think to remember their student's ID number is hard at first  

  5. 5/15 college students experience losing their student's ID card 

  6. 13/15 college students save their class schedule as the picture in their photo album 

  7. 7/15 college students find it hard to find a mutual free time to meet with friends

  8. 12/15 college students think their campus is confusing 

  9. 4/5 incoming freshman are worried about getting lost in the campus

  10. 3/5 incoming freshman are worried about not making friends in class

​

In Conclusion: 

Some common issues users shared are:

  1. Getting lost on campus and need some kind of map app to help guide them to the classroom 

  2. Need to keep switching between class schedule and map app

  3. Hard to find mutual free time with friends

​

​

​

​

​

IMG_6160.PNG

Hard to distinguish which one is the classroom and which is not at the glance. 

​

User have to look back to their schedule and search for the right location on their own 

​

​

A4 - 1 (1).png
A4 - 2 (1).png

Dianne Russell - College Student (primary stakeholder)

  • worried about getting lost in the big campus

  • only have ten minutes between class so she needs to know the building at one glance

Albert Flores - College Student (primary stakeholder)

  • worried about getting making friend on campus 

  • like to hangs out with friends on campus

From the competitve analysis, I noticed that most of the map apps are mostly for private use and didn't promote much social function and vice versa. For example, Google Map, Relay, and Maps.Me allows users allows users to share their save location list to other, but did not allow users to view their friend's location. Similarly, Zenly which allows users to track friend's location did not allow user to save location. Therefore, the competitve analysis inspired me to combine this two features in my design.  

A4 - 3 (2).png

Competitive Analysis

icons8-data-provider-80.png
bottom of page