Highlighting sustainability initiatives at Santa Monica College.
• ROLE
UX researcher, UX, UI Designer
• TIMELINE
2023 | 16 weeks
• PROJECT TYPE
UX, UI Design
• TEAM
UXII Class - Research
Individual Design
• OVERVIEW
In this project, we worked with Santa Monica College (SMC)’s Sustainability Center to tackle the challenge of siloed sustainability efforts at SMC. After working as a team to research and ideate, we proposed our own solution and took on individual project, as part of the collective effort.
SMC made a lot of efforts towards sustainability goals. However, these efforts remain siloed and unnoticed. Students, faculty, administration, and the larger community often don’t know about others doing similar work due to scattered initiatives and lack of a centralized guide.
Through fieldwork research, stakeholder and student interviews, I discovered that 75% of students interviewed were unaware of the sustainability initiatives on campus, and only 20% had ever participated in related programs.
Stakeholders expressed concerns about students’ awareness and the participation rate for the sustainability initiatives. Lack of a centralized source of information and difficulty finding initiative locations were the main barriers to engagement.
A visually appealing, comprehensive map accompanied by an interactive map integrated to the SMC Go App, highlighting all the sustainability initiatives at SMC, which offers a holistic view of the efforts, shows SMC’s commitment to sustainability goals and serves as students’ guide to be involved in sustainability.
HOW MIGHT WE...
0.1 SMC sustainability mobile app
0.1 Sustainability map mobile app prototype
0.1 The Museum of Jurassic Technology landing page
• THE PROCESS
— Research and Discovery
Heuristic Analysis
Our team started to “diagnose” the problem by visiting the museum to learn about its exhibits and understand visitors' experience on site. We then took a close look at the MJT's current website and evaluated its navigation and pages to find potential improvement opportunities.
0.2 MJT current landing page
0.3 MJT current navigation
0.4 MJT ticket-purchasing page
Problems with the current website:
01 — The current landing page is outdated, with low-contrast and unappealing visual design. Homepage real estate is not utilized well to display information about the museum.
02 — The logo does not lead to the homepage, but to a navigation page. Navigation across the website is unconventional compared to standard navigation, which confuses users.
03 — The ticket-purchasing page is disconnected to the homepage, both visually and navigationally. There is no way to navigate back to other information once entering this page.
User Interview
We conducted 3 user interviews with MJT visitors. Our interviewees included a student, a museum enthusiast, and an education manager who worked at a different museum.
Our main goals were to learn about the users’ impression of the museum, their experience using the website, and whether they had any problem navigating the site.
0.5 User interview insights
Key takeaways from user interviews:
01 - The MJT website does not represent the experience at the museum.
02 - The website lacks sufficient information to adequately prepare visitors for their visits.
03 - The navigation system needs more structure and clarity.
04 - The visual design requires updating to enhance readability and the museum's appeal.
Competitive Analysis
Our team set out to explore the websites of museums that offer niche and unique experiences, similar to what MJT is known for, we conducted competitive analyses on The Field Museum, The International Spy Museum, and The Natural History Museum of Los Angeles.
0.6 Competitive analysis of 3 museums' landing pages
The competitive audit revealed that competitors’ websites offer better user experiences than the MJT website in multiple ways:
01 — A prominent logo leads to their homepage, and structured navigation bars help easy exploration across the website, which are what users have known and preferred. Ticket purchasing is prominent on the homepage.
02 — Homepage real estate is utilized well to display current exhibits, events, and necessary information for visitors.
03 — Appealing exhibition photos, clear contrast, and hierarchy attract and inform users better.
Persona
& User Journey Map
To better understand the users’ journey, we created personas and user journey maps. This step helped us know who exactly we are redesigning the website for and follow the users’ every step, identify their specific needs and pain points while ideating solutions for them.
0.7 User personas
0.8 User journey map
The personas and user journey maps revealed the direction and ideas for my design.
01 — Enhanced visual design: cohesive and appealing aesthetic, consistent branding, typography, and color schemes.
02 — Intuitive navigation structure: Well-labeled sections and pathways, clear information architecture.
03 — Streamlined ticketing process: reducing the number of steps required, user-friendly and visually consistent interface.
Site Map
Though I was not designing the entire website, I wanted to address the confusing navigation system in order to design the navigation bar for the homepage. Using Trello, I conducted closed card sorting with 3 users to decide on a site structure that would make sense to users.
0.9 Card sorting from Trello
Wireframe
I created low-fidelity wireframes in Figma. For the landing page, my goals were to include a clearly-labeled navigation bar, displaying information about the museum and giving visitors a glimpse of its exhibits and events.
For the ticket-purchasing page, I aimed to keep the page connected to the website by including the navigation bar. To reduce the steps users have to take, I kept ticket type, calendar, time slots and ticket quantity all together on the page.
1.0 Low-fidelity wireframes of the landing page and the ticket page
Usability Test
I conducted 3 usability tests for the early wireframes to see if the concept worked and to identify improvement opportunities before proceeding to create high fidelity prototypes. The feedback we got was valuable.
01 — Users appreciate the "Buy Ticket" button on the navigation. It helps them easily navigate to the Buy Tickets page. .
02 — Landing page: users prefer scrolling over having to click on the arrow to see the next exhibition
03 — Buy Tickets page: There should be clearer prices for different ticket types, and discount (if any). “Become a member” option should be present so users have the option of becoming a member before buying tickets.
After many rounds of iterations and team reviews, I adjusted my wireframes according to the insights from usability tests and my team’s feedback. Based on the improved wireframes, I then built high-fidelity design for the landing page and the Buy Tickets page.
1.1 Final landing page design - Hero section
1.2 Final landing page design - main section
1.3 Final landing page design - footer
1.4 Final design - Buy Tickets page
Goal alignment
With a more appealing visual redesign, the landing page gives visitors more information about the museum, offers a clearer navigation structure, and better represents the mystique atmosphere the museum offers, which will better prepare visitors for the experience at the museum.
The ticket-purchasing experience redesign meets the goal of consistent visual design and being connected to the homepage.
Personal reflection
Throughout this project, I learned many useful research methods - heuristic analysis, competitive audit, and user interviews. But most importantly, I learned how crucial it is to choose the most effective methods based on the specific requirements of the project.
The project also showed me how critical it is to listen to the users. By conducting user interviews and usability tests, I learned what the pain points were and discovered many improvement opportunities. This helped me proceed to the design phase with confidence that the design was centered around users’ needs.
Most importantly, I learned how rewarding it was to be able to use design to enhance people’s experiences, in this case, museum visiting experience. Moving forward, I want to take a closer look at our daily experiences for areas to improve, recognizing that there is always room for improvement.
Site Visit
In order to further understand SMC's sustainability efforts, we visited SMC's main campus to observe and take photos of sustainability in action.
01 - The sustainability center is fascinating but unnoticed.
SMC sustainability center is a sustainable building that can be copied on a larger scale. However, this building doesn’t attract visitors’ attention due to its off-campus location.
02 - Sustainability projects are hidden.
There are many interesting sustainability projects around SMC campus but not many people notice them! Within our group, 90% of us were introduced to these initiatives for the first time.
03 - Sustainability efforts span across many areas.
Sustainability spans many areas (architecture, food reservation, waste management, gardening, etc.). However, all the efforts seem to be scattered, with little awareness from students and the community.
0.2 Sustainability projects at SMC main campus - photos from site visit
Stakeholder Interview
In this next step, we attended a stakeholder kickoff. We asked the stakeholders our questions in order to understand the problem, clarify the scope, the expectations as well as the goals for the project.
01 - The most important goal
The stakeholders' most important goal is to create a shared communication channel and promote sustainability efforts at SMC.
02 - Sustainability - A marketing challenge.
In order to promote sustainability at SMC and increase awareness, we need to treat the problem as a marketing challenge. The more sustainability efforts are "advertised", the better chance we get.
03 - Sustainability, not just recycling
We need to translate the full meaning of “sustainability” with its many areas, and make sure people don’t just think of it as “recycling”.
0.3 Project's stakeholders during the interview
“SMC is committed to its sustainability efforts. Our job is to create more effective strategies, get the word out and advocate for the joint efforts.” - Ferris
Secondary Research
After seeing sustainability projects on campus, I wanted to know how sustainability at SMC is presented online.
SMC sustainability website is difficult to find.
I discovered that SMC has a comprehensive website for sustainability efforts. However, this website is deeply nested in the navigation system of the college's main website.
As SMC students, many of us saw this website for the first time after encountering this project.
This showed a gap between the effort being made and its visibility and accessibility to students and community.
0.4 SMC Sustainability webpage
Research Synthesis
As a team, we participated in brainstorming sessions to identify key insights from research and evaluate possible design solutions.
We discovered that SMC has strong sustainability initiatives and a website to represent them. However, there are some problems:
01 - The sustainability initiatives are scattered across many areas, and locations on campus.
02 - The projects are not proberly presented on campus and the website is hidden by being nested inside the main website's navigation.
03 - There is a lack of connection between the information about the initiatives and the actual initiatives themselves on campus.
The solution for scattered, unnoticed initiatives is getting them all in one place and make it as accessible as possible.
0.5 Brainstorming sessions
During this phase, we got to propose our own design solutions and work in small group or individually to develop our ideas. The ideas were fascinating, ranging from clothing swap drive-through to AR filter for the initiatives.
I proceeded with my idea of creating a map of all SMC's sustainability initiatives, in order to have a bird-eye view of what SMC has been working on and create a material advocating for SMC's sustainability, more accessible to students and the community.
0.6 Map ideation and prototypes
I started by exploring potential types of map by creating low fidelity prototypes. These served as visual representation of the concept and material to get feedback and discuss with the stakeholders. The feedback I got:
01 - The large interactive map has a great potential, however, it is out of budget and very difficult to maintain on campus.
02 - The web interactive map would face the same problem of being nested and hidden on the website.
I moved on with the PDF map, which can be printed in various size. I also started exploring how the idea of the interactive map could be implemented.
Recalling that SMC has an dedicated app for students - SMC Go, I realized the interactive map could be hosted inside this app, which would give it more visibility and convenience Since students can access it from their phones.
After positive feedback from the stakeholders, I proceeded to create the user flows and wireframes for the app.
0.6 Interactive map user flow
0.7 Interactive map wireframes
Keeping in my the project goals and the feedback I got for the prototypes and wireframes, I created the final design of the illustrated sustainability map and the interactive map, which can be integrated into the SMC Go app.
Illustrated Map
0.8 Sustainability map final design
Key features
01 - All the sustainability projects, facilities, and their locations are highlighted and labeled to unify all sustainability initiatives.
02 - Information on how to get involved, QR code to the sustainability website and illustrated sustainability center are prominently displayed to encourage involvement, drive traffic to the website and increase awareness about the sustainability center.
03 - Brief information about each initiative and sustainability degrees, certificates and classes are displayed on the back of the map to serve as a holistic view of SMC sustainability effort.
Interactive Map
0.9 Interactive map final design
Key features
The interactive map, integrated into the SMC Go app lets users have a overview of all sustainability initiatives and their locations on SMC campus.
After clicking on the map pin of a certain initiative, users have the options to learn about that initiative in details and navigate to its location.
Goal alignment
The map provides a unified, holistic view of all sustainability initiatives. It effectively communicates the full scope and impact of the campus's sustainability efforts ranging from sustainable architecture to water conservation and organic gardening.
The affordable, easy-to-update and scalable map can be printed and distributed as information leaflets to students and staff or printed as large display map on campus for more awareness on SMC sustainability effort.
Next steps
The map was presented and got positive feedback from the stakeholders. The next phase will focus on refining the map to ensure its effectiveness and usability.
Usability testing and feedback collection should be conducted to learn how users interact with and interpret the information on the map. Student engagement should be recorded to measure how successfully the map performs, in order to make adjustment and update so that the map can be refined to reach its full potential.
• THE PROCESS
Our first step was to visit Atwater Village - a lively neighborhood centered around Glendale Blvd with vibrant shops, dining, and transit spaces.
01 - Wide street, far-apart crosswalks
We noticed that Glendale Boulevard is a very wide street with 8 traffic lanes and 2 medians. The crosswalks are far apart from each other; there are 3 crosswalks in total along the long stretch of the main, pedestrian dense area.
02 - Accessibility challenges
Raised curbs and lack of accessibility accomodation like tactile ramp, audio feedback at crosswalks raised our concerns.
03 - Fast traffic and safety concerns
We interviewed three people who live or work in Atwater and learned that fast traffic here creates safety concerns for people navigating the area. We also learned that not many people with mobility challenges are seen around because of the lack of accommodation.
0.2 Photos from fieldwork research at Atwater Village
We proceeded with our secondary research, focusing more on crosswalks and accessibility.
Street crossing time is measured without considering the need of people with mobility impairment.
We discovered that street crossing time is measured based on the walking speed of able-bodied people, which is around 3.5ft per second, while people with mobility issues can walk or use wheelchairs with the speed as slow as 1.5ft per second. This creates a gap in accessibility accommodation.
We created user persona to have a clear vision of who we are designing for.
Many groups of users can benefit from a more equitable street-crossing system: people with disability, temporary mobility issues, seniors, and people with kids.
Sam Guzman - 27
Anthony Curtis - 43
Emily Parker - 72
Sheila Hall - 34
New to crutches, Sam avoids going outside because every trip feels like a battle.
Daily struggles with curbs and inaccessible buttons leave Anthony exhausted and dependent.
Emily avoids crosswalks entirely, fearing she won’t make it across in time.
Sheila’s anxiety comes from juggling her kids’ safety with unpredictable traffic.
We started off the Ideation phase with many ideas to potentially help people with mobility issues navigate around and cross streets safely.
We allowed ourselves some blue-sky thinking with 'The Moveit System', in which barriers are raised on the street to allow safer crossing.
With Neighborly - the app that allows users to ask for help and volunteer help, we wanted to not only help people with mobility issues, but also strengthen the sense of community.
Considering feedback and feasibility, we moved forward with the WayPass concept, which allows users to have extra street crossing time based on their needs.
0.3 Concept posters
0.4 Storyboard for the WayPass concept
We aimed to design a minimalist and straightforward interface to seamlessly integrate into the traffic system. To prioritize usability testing and ensure an intuitive user experience, we developed a high-fidelity prototype early in the process.
0.5 Initial prototype
0.6 Usability test with Jonathan
0.7 Usability test with Ojen
0.8 Usability test with Camilla
We conducted many usability test rounds. We not only learned valuable insights for the technical adjustment of the system, but also felt incredibly motivated to see that the concept was appreciated by the people who would use and benefit from it.
The key insights we got:
01 - Multiple ways to activate
When testing the WayPass, the question we got asked the most was "If I lost my card or my hand can't tap the sensor, can I still use it?"
The question got us think more thoroughly about other ways to activate the system without having to rely on the physical card.
02 - Separation from the regular crossing system
There should be something to signal that the WayPass is in action, separating it from the regular street crossing system.
03 - Keeping it minimal, no math needed
We initially showed the current crossing time and the time added to it after the system is activated. However, we learned that users don't need that much information, they are more concerned about how much time in total they have to cross.
04 - Beyond the Crosswalk
After the usability test, we realized that the experience goes beyond just crossing the street; the onboarding process and the overall journey of obtaining the WayPass are equally critical and need to be thoughtfully designed.
For our final design, we utilized the insights learned from usability testing.
01 - The system interface was reduced to a minimalist and straightforward design, easy to understand at a glance.
02 - Activation options are expanded with a hand-free approach, using range sensor technology.
03 - Information sign and website design were added to ensure a seamless onboarding process for users.
0.9 Final system interface design
1.0 Information sign design
1.1 Final website design
Start wide, then narrow it down
With the task of solving a transportation/ mobility issue in LA, we initially brainstormed a lot of areas with room for improvement. We tried not to jump into finding the obvious solution for the first problem we saw, but instead, we explore many concepts and ideas. I found this to be a very effective way to approach a creative problem.
Design for people who are rarely designed for
This project taught me to always look for groups of users who are usually neglected. People with disability or mobility issues are often overlooked, when it comes to infrastructure design, and if we always keep them in mind, we would be able to create more equitable products that solve unique problems.
Test with the right users
We did usability testing with 2 users who live with disability and the feedback we received was invaluable. We were able to validate the need and appreciation for a more inclusive and equitable system like WayPass. It was heartwarming to hear how much they appreciate that we are creating a solution for them.
