CoMap - Responsive website

CoMap is a location-based social network platform for the university campus. Members are able to annotate, curate, and share their own campus map to narrate their experiences.


Fanglin Chen, Bo Kim


Interviews, Customer journey map, Ideation with scenarios, Wireframing, Prototyping

My role

Collaborative work on journey map, ideation, and overall design process. Individual work on UX/UI design and refining visual design.


3.5 weeks in 2016

Project for the course Interaction Design Studio I instructed by Professor John Zimmerman

How can we help incoming students transition more seamlessly from home to school?


Understanding the Current State

We conducted interviews with 3 students about their experiences of getting to Carnegie Mellon University. We used directed storytelling to identify the breakdowns and opportunities during their transition to the university. Then we integrated their experiences to create an abstract model of the current state.



"I wanted to attend here when I visited the campus"

Whether the student had a campus visit or not had a significant influence on the enrollment decision and overall onboarding experience.


"I was working so I couldn't come"

Many students couldn't visit the campus due to restrictions in time and location. This also related to students' anxiety of moving to a new environment.


"So where is Warner Hall?"

Most questions that students ask once they arrive on campus are related to location: Where is my class? How do I get to the closest bank?


From these insights, we sought ways to answer the questions of "where?" that students had.

We collected resources that were currently used for campus tours and directions. With these resources we revisited the journey map again to identify what is fundamentally lacking in the current state. We recognized that there is a critical gap between maps on print and maps on the web. People drew on the map to demonstrate directions and used screenshots from google map to show how buildings actually look like. Existing maps on the web display data, but users were unable to customize the map for their needs.

So what if there was a hub of custom maps where users can...

Annotate comments on maps.

Easily share their own map with others.

Read what others wrote about areas on campus and use it as their guide.

Envisioning the Future

This time, we created a customer journey map for the future we want. Unlike the previous journey map, the discrepancy between students who visited campus and those who didn't is reduced.

Oooh that studio looks nice

Students who are unable to visit the campus can imagine themselves being there through others' stories, attracting greater student interest in the enrollment process.

Adventure time

Once an incoming student arrives on campus, he or she can pull up a list of places flagged before. The student can explore the campus independently at a comfortable pace, at a convenient schedule.

Check this out!

The life cycle of the website continues from the transition phase of incoming students to the whole student life. As students get familiarized with the campus, they begin sharing their own experiences on CoMap.

Responsive design

Designing for different contexts

We recognized that the usage of the website will significantly depend on the context. We focused our design to be used on campus for mobile and targeted remote users for desktop. I sketched low fidelity designs on mobile first and then created desktop versions with additional features.



Through CoMap, users have access to campus tours to learn about the campus as much as those who visited.


Users can view what other members of the university wrote about a specific location on campus.


Users can easily add new posts about specific campus locations on mobile.


Users can write about a specific room in the building to add a more specific account of the location.


What worked

The most valuable insight I gained from this project was the current limitation of maps on the web. I became really excited about this concept of custom map and navigation. When we presented this project to the class, many people foresaw how CoMap could be expanded from university campus to an entire city.

Couple of months after this project, I discovered that Google has a service called My Maps, which covers a very similar concept. It is not widely used, but it definitely got me to imagine how this project could be revisited.

What could have been better

We had a difficult time determining the scope of the project. The scope ended up being too big because we wanted to fit too many ideas. I also think that this concept can be stronger for a mobile application or an AR product, rather than a responsive website.

CoMap was actually my very first UX design project, and I always like going back to it because I have so much to talk about. There are a lot of small and big failures and opportunities for improvement. I would love to revisit this project one day.

Other Projects