Project Overview
Safe Routes to School SF is an organization that advocates for getting students active and safely to school. They’re well-known for their Bike/Walk/Roll to school days, in which students, parents, and teachers all participate. Their goal is to get students and families to transfer out of single occupancy vehicles and into more sustainable, environmentally friendly modes of transportation. They recently had a shift in power and are now under the umbrella of SFMTA, expanding their scope from 30 public schools to over 100.
Our goal was to create a more clear, concise experience to drive more engagement from parents, students, and teachers.
Challenges and Constraints
One big challenge was navigating through the bureaucratic tape of the SFMTA. Since there was a transition of power from the department of Public Health, I wanted to be very vigilant about the type of language that was going to be on the website. More often than not, I find that big city organizations have very impersonal tone and voice in regards to their language.
In our kick off meeting with SRTS, we found some key constraints that would help guide navigate our design decisions:
They had to work within a Wordpress template
They already had content in mind, but didn’t have anything written out
They needed to make the website a solid resource for parents and teachers during their big transition
Limited staff
Role: UX Writer
Tools & Methods
Heuristic Evaluation
User Interviews
Competitive/Comparative Analysis
Prototyping and testing with InVision
Baseline Usability Testing
Design with Figma
Creating a Clear Message
Implementing clear and concise language on important parts of the website became my main focus.
The first step was to talk to actual public school teachers and parents in the city. This was vital because they are the main users of the website.
we figured out what were the essential tasks that users needed to get through in order to get what they wanted from the website.
Usability told me that no matter how big an image is on their website, users were confused by the lack of direction or confusing language
Before
Since the contact page was being referenced in various parts of the website site, users were confused once they got to the contact page, unsure of what they could send them.
After
Usability testing showed us that the soothing blue background made users feel at ease, as well as reassured from the prompted suggested questions I provided.
Before
The current success message was extremely hard to read and something that users didn’t notice. The form also disappeared after the message was “sent,” which left user unsure if their message to the organization went through.
After
After the form is complete, there is a huge “Thank you!” with some reassuring language about the success of your inquiry.
Before
When a user clicks on “subscribe” they are immediately sent to the SFMTA’s subscription flow. During user testing, people found this process a bit frustrating because SFMTA’s flow kept insisting on other organizations to sign up for. This was a clear example of the business trying to get as much out of the user as possible.
After
Although we couldn’t do much about changing the SFMTA subscription flow, we wanted to set up the user’s expectations. By creating this landing pages, users are notified on how we manage their personal information. Then they are told that they are going so somewhere else, which isn’t managed by the Safe Routes org.
Before
The original layout had no clear label of which resources were relevant to the user. The client was very adamant about keeping this resource page, so my team and I had to get creative on the best way to label the information.
After
Clearly labeling the resources that are most relevant to parents and teachers, while eliminating any unnecessary information, provides clear calls-to-action for users.
Key Takeaways
The most important takeaways I had during this project was balancing the user needs and business needs. In my early talks with the client, I brought up the fact that most of the current users didn’t see their organization as an actual entity, which the client felt happy about, noting that they liked the fact that the organization didn’t seem overbearing to the different public schools. Yet, the current user flow of the site was extremely confusing and disorganized. I had to really fight for significant changes, in order to make the website sensible and purposeful. So, through many iterations and conversations about brand identity and voice, a balance was reached. And both my team and the client felt the end result was successful.