Santa Monica College
Interactive Map Prototype
PROJECT BRIEF: Research strengths and weaknesses of the Santa Monica College website and design a prototype that focuses on a solution.
PROBLEM: The SMC website faces a unique design challenge: serving a broad range of users with varying needs and experience with technology.
DESIGN INTENT: Narrow focus on one user group, learn their pain points, and design a meaningful solution that goes beyond updating site navigation
INSIGHT: Research on this project far outweighed the time I spend designing. Interacting with actual users proved to be the most impactful part of the process when defining a solution.
OUTCOME: I gained new skills in Figma (including prototyping and using plug-ins, as well as overall comfort with the software.
SEE THE FULL CASE STUDY HERE
HEURISTIC EVALUATION: I began my research process by analyzing the Santa Monica website. My findings at this point in the project only scratched the surface, and I continued my research with a Competitive Analysis.
COMPETITIVE ANALYSIS: In 2025 Wallet Hub release the top performaing California Community Colleges. I compared the top four's websites with SMC. See the full Competitive Analysis HERE.
USER INTERVIEWS: This is where the research process really started to inform my final design. Mitchell shared a story about trying to access the site's campus map while on his way to an evening class. Finding this part of the website clunky and difficult to use, he sought out physical map and arrived late to class.
PERSONA CREATION: I used an empathy map to filter through the most important information from User Interviews. I used similarities in the feedback to develop the Eddy persona.
STORYBOARD: I illustrated a storyboard to serve as an example of how this persona would use my proposed website redesign.
As a non-traditional student, most of Eddy’s classes are online and he’s not on campus often. This means he’s looking at maps to help him get around. In this scenario, Eddy accesses the map from his phone and is able to locate his classroom by searching for the room number.
SITE NAVIGATION: I made a small adjustment to the SMC sitemap to tighten up the navigation menu and increase visibility of the Interactive Map.
WIREFLOW: Creating this wireflow forced me to think critically about how I wanted the interactive map to function. I researched many existing map applications and was influenced strongly by Google Maps. I knew that designing a map that functioned in a familiar way would make for a better user experience than starting from scratch.
WIREFRAMES + PROTOTYPE: Through the process of digitizing my wireflow, I learned to use my design skills in a new way, prioritizing function over aesthetics. When I’m manually placing every button and icon on a phone-sized screen, there must be a purpose for everything. It forced me to edit my ideas down to only the ones that best suited this scenario.
TRY THE PROTOTYPE HERE.
USABILITY TESTING & REVISIONS: Two of the users I interviewed returned to test my prototype. My main takeaway from Mitchell’s test was to determine the scope of the map. Will it work outside of campus? Tony pointed out that there was no clear indication of where he was located on the map or a way to view the other floors. I used this feedback to improve the clarity of my design.
A location indicator and icons for a compass, list view, and floor toggle were added to ground the user in space.
I cut the “announcements, events, and class schedule” icons because they lacked relevance. I replaced it with one button for directions that extends across the entire screen, eliminating the need for precise tapping.
The “Get Directions” bar transforms into a “GO” bar on page three so that the user can more easily begin navigation.
CLICK THROUGH THE REVISED PROTOTYPE HERE.