Design for Others
Emory CS 485: HCI
“Deep empathy for people makes our observations powerful sources of inspiration.” –David Kelley, CEO IDEO
Thinking empathetically requires one to step into the lifestyle of another human being. It requires critical thinking, emotional intelligence, and abundant creativity. This journey of thinking and designing for others is the journey my group and I embarked on as we set out to redesign the MARTA mobile webpage for Georgia State University students.
Over the course of one week, we successfully examined the needs of the GSU MARTA users, designed solutions to address these needs, and tested a prototype of our website.
Empathize
To approach this design challenge we first sought to understand who our users were. To do this we put ourselves in the shoes of GSU students by asking several questions:
1. What is our (GSU students) motivation?
We discovered that the students at GSU have many different reasons for using public transportation. We assumed that these motivations for using public transportation would vary between individuals, however, we found several core values that aligned with all of these motivations. These values were to: save time, save money, and be on time.
2. What is our (GSU students) interest?
Based on the user motivations we identified interests that we assumed users in our demographic (college students) would align with. These interests ranged from activities (in blue) to social identities (in yellow). Combined these interests focus on events and activities that would be temporally specific in terms of the season (e.g. football season) and date (e.g. a concert this weekend).
3. What is our (GSU students) need?
Based on these motivations and interests we identified several needs associated with our users. The needs displayed above in the virtual board demonstrate the key functionalities that our users require.
These findings can be summarized in three statements that we speculated our users would identify with:
We are busy with classes and want to save time.
We are college students who want to save money.
We want to explore the city and be entertained.
We then further examined how this demographic uses public transportation.
- Where are we coming from?
We identified three subgroups of students within the population of students at GSU. These three subgroups were: students who commuted to school, students who attended GSU satellite campuses, and students who lived on campus.
2. Where are we going?
We assumed that the users in our demographic would frequent three types of locations. The first was the airport, a common route that students used when traveling to and from home. However examing the GSU population more specifically, we found that only 20% of students come from locations out of state.
Therefore we kept searching for other routes that students would frequent. Given that many GSU students live off-campus we assumed that these students would frequently use MARTA to travel to school. Furthermore, given that many social events are occurring in Atlanta throughout the week we assumed that GSU students would use MARTA to attend events occurring in the city.
From this user research exercise, we established that our design should be focused on optimizing the time it takes for students to get where they want. To accomplish this, we defined a goal for our project.
GOAL: develop an interface that has a simple aesthetic with an emphasis on frequented locations and events.
Design
The next step in our design process was to begin ideating about the functionality of our website. We did this by analyzing the current MARTA website for its information design and visual design.
Information Design
To analyze the current MARTA webpage we examined the website for what information was currently being displayed.
What does the MARTA page have?
The MARTA page currently has four functionalities that serve a broad range of users from young adults to the elderly. The functions are: plan a trip, find information, learn about routes, and read service updates. However, the organization of these functions was confusing and difficult to navigate from one page to the next.
At first glance, the user is overwhelmed with information. The user is forced to divide their attention between notifications about masks, service updates, and planning a trip. This overwhelming influx of information puts pressure on the user to make a decision.
To try to simplify this we asked ourselves the questions:
What information do we need? What information is right for GSU Students?
Through this discussion, we settled upon four key pages to distribute the necessary information.
Understanding that the home page would be the first interface that users would interact with we wanted to ensure that users had access to all of the information they needed from this page. However, we did not want to clutter this page with information so we focused on allowing users to access routes, announcements, and key MARTA information from buttons on this page.
Based on these categories we had our next three pages: route information, announcement, and MARTA information.
For the route information, we assumed that our user group would be seeking two types of information. The first is a simple way to navigate from the current location to the desired destination. We called this functionally the Plan a Trip function. Furthermore, given our assumption that our users were frequent MARTA users who wanted to be efficient with their time we created a Route Info function. This function would enable users to see key information (i.e. arrival time, delays) about their favorite routes in order to optimize trips.
Given that our users were assumed to be very interested in social events, we wanted to provide a list of announcements that targeted this need. Therefore we created an Announcements page that would display key information about events occurring in the area.
Finally, we wanted to ensure that our users had access to any other information they might need (e.g. accessibility services, health/safety information, service updates) therefore we created a page devoted to displaying this information. This MARTA Information page allowed us to neatly organize a large amount of information in a succinct way.
By effectively determining and distributing the information for our platform we were ready to begin designing. We started this process with sketches…
Sketches
In order to maintain a consistent style while diversifying the ideas generated during the sketching phase, we distributed the sketches across all team members. Each team member designed a minimum of two sketches per screen, and we met as a group to discuss how to integrate these sketches into a unified project.
Home Page:
For our home page design, we iterated between minimalistic designs and elaborate button-based designs. Each sketch also varied in the emphasized component. Some sketches highlighted the events button, while others focused on the plan a trip function.
Plan a Trip Page:
For our plan a trip page design we experimented with text and map-focused designs. During this process we discussed how the user might engage with the map, seeking to meet the needs identified during the needfinding phase.
Route Info Page:
For the route information page, we experimented with different methods of expressing feedback to the user. We wanted to ensure that our users felt secure in the reliability of their trip, therefore we experimented with implementing map and text-based feedback about trip time.
MARTA Info Page:
For the information page, we attempted to express key information about MARTA with succinct and elegant designs. this process allowed us to experiment with icons, text, and buttons.
Visual Design
Before moving into the prototype development we attempted to specify the visual design and aesthetic of our website. To do this we examined the interests and habits of our target demographic: GSU students (more broadly college students ).
Mood Board
Using this mood board as inspiration we identified three primary aesthetic components that appealed to our target group:
- Bright colors to reflect the energetic and joyous (wild) nature of our target users.
- Simple yet powerful iconography to reflect the icons our users typically engage with on social media platforms (e.g. Instagram-like button, Google maps icons).
- Identity-driven imagery to reflect the many events and groups that our users participate and identify with.
With these three factors in mind, we developed our style guide:
We chose to use the bright MARTA colors and sans serif Poppins font to match the bright and joyful aesthetic of our users. We also chose to keep the original bright form MARTA logo and add elements of contrast using secondary greyscale colors.
Equipped with this style guide we began prototyping…
Prototype:
We prototyped our product in two phases. The first phase consisted of the development of a low-fidelity paper prototype that was displayed user-tested amongst our team and peers. The second phase consisted of the development of a mid-fidelity prototype developed using Figma. This prototype was presented to a group of our peers during the CS 485: HCI course.
Paper Prototype:
Our paper prototype consisted of refined versions of designs from our sketching phase.
During the development of this prototype, I focused on refining the Plan A Trip and Home pages.
To refine the home page, I took our initial sketches and gradually increased the emphasis of the page from buttons to the map. This design approach was influenced by our team’s vision for a simplistic aesthetic that highlighted the trip experience.
To refine the home page, I took our initial sketches and gradually increased the readability of the page by focusing on the key information we had identified for our users. This enabled the design to place heavy emphasis on the current events while maintaining functionality for planning and finding information for a trip.
We then tested our paper prototype with peers from our class:
We conducted this test by asking users to engage with the paper prototype while audibly describing their thinking and experience. From this test, we discovered that some of the arrows and icons on the plan a trip page were ambiguous.
Feedback: Consider changing the arrows on the plan a trip page so that they are less ambiguous about the direction you are going from
To incorporate this feedback into our designs we converted the arrows on the plan a trip page into icons that represented the mode of transportation. This enabled us to make the UI more salient while also removing the ambiguity from this page.
Figma Prototype:
After refining our paper prototype we designed the mid-fidelity model of the mobile website using Figma.
Using Figma we modeled three workflows through the website.
- Plan A Trip Flow: the workflow that a user would engage in when coming to the website to search for a trip.
- Explore ATL Flow: the workflow that a user would engage in when using the events page to find a local event.
- MARTA info Flow: the workflow that a user would engage in when seeking to learn more information about MARTA
Demo Day:
We presented this mid-fidelity product before our peers in the CS 485 class. This opportunity to present our prototype helped us to better understand how users and designers perceived our product. Due to the heavy design emphasis on our target population and our liberal usage of GSU-related media, most students easily identified our target population. However, many students also commented on the general applicability of our designs for a broader audience. They highlighted how our emphasis on simple aesthetics catered to both the elderly population (in need of simple and large buttons) and the young (in need of fast workflows). Furthermore, comments made during this presentation highlighted how the emphasis on savable and frequented MARTA routes could serve many users who are avid MARTA riders.
Conclusion
In summary, my team’s focus on empathic design enabled us to effectively redesign the MARTA website for GSU students. Through this experience, we learned how visual and information design can be leveraged to create individualized user experiences. We effectively combined low-fidelity and mid-fidelity prototyping to refine our product and create a user experience that represented the needs of Georgia State University students.
Acknowledgments:
I would like to thank my excellent team members Kennedy Kerr, Flora Chen, and Matt Zhang for their brilliant contributions to this project!