Overview
An Inclusive Social Justice App
Strides for Social Justice (SFSJ) is an app developed by PeaceHealth in partnership with the Eugene Marathon. It is a free, inclusive, family-friendly experience meant to educate participants on the contributions, achievements, and milestones of Black residents in Lane County. Proceeds for this app go towards the Eugene/Springfield NAACP.

Objective/Goals
Create a Website for the Social Justice App
The main goal of this project was to create a website for the Strides for Social Justice (SFSJ) app before the end of February 2021.
Duration
A few weeks, Jan - Feb 2021

My Role
UX/UI Design - Wireframes, Adobe XD prototype, visual design, and info architecture

Deliverable
Single page website
Below is the final homepage design for the Strides For Social Justice (SFSJ) website.
 homepage design of the Strides For Social Justice (SFSJ) website
Below is a video of my Adobe XD prototype for the SFSJ website or at https://xd.adobe.com/view/b724d52b-d503-4d87-858c-27e3f7c66cff-e277/.
Challenges
Develop a Website on a Tight Timeline
1.) The main obstacle for this project was time. Since the app educates and brings awareness regarding racial injustices, it was important to PeaceHealth and other stakeholders to launch the site in February 2021 to celebrate Black History Month. That only left us with a few weeks to put something together.  

Initially, the content provided broke the website up into six-pages. After reading the content, we identified that the end-user would benefit from 2.) Making the content more scannable 3.) Identifying which parts of content were more important than others and lastly, 4.) Deciding when to use the call-to-action (CTA) buttons. 

Review of main obstacles:
1. Develop the website on-time
2. Make the content scannable
3. Prioritize and identify important content 
4. Decide when to add the CTA buttons  

Next Steps
First, we went back to our team to discuss the content. We wanted to identify what parts were more important than others and discuss when to add the call-to-action (CTA) buttons. 

Design Decisions
In our meeting, we talked about ways to consolidate the content and how to save time. We agreed the best way to do this on the tight timeline was to change the six-page site into a one-page site. In the future, we can see SFSJ having a multi-page site but, we found this to be the best solution moving forward. ​​​​​​
Team
Darin Fabrick, Creative Director 
Kay Ekeya, Project Manager 
Katie Hill, Web Developer
Lindsey Norberg, Designer

Stakeholders
Includes a 16-person committee and several other local business supporters. You can also support the app yourself by making a donation, spreading the word, or exploring some of the resources on the site.  
​​​​​​​
Below are my initial sketches for the six-page website including, simple and more dynamic layouts.
Research/Insights
Make the Content Scannable and Easy to Understand  
After doing brief research based on common apps and other similar online experiences, we identified a quick way to make the content more scannable and easier-to-digest by adding a "1,2,3" or "How it works" section. To make this happen, we broke the app experience up into three parts as follow: 

1. Download the app. 
2. Pick a route. 
3. Explore and Learn. 

We felt adding these steps would easily allow the user to scan the content and understand how it worked. Additionally, we identified the need to include a brief description in the header so, someone landing on the homepage would immediately understand what the app offered before scanning the site.

Marketing Persona
During this time, we also discussed potential end-user and other possible accommodations. Since the app includes travel, we wanted to consider how to make it more accessible. To accomplish this, the team plans to include virtual Google Tours in the future. 

As for user-personas, there are a couple of scenarios I kept in mind during this process. These included an individual, a family, a student, and an elderly person. Because of time restraints, these personas were not fully developed but, I did consider them in my design process. 

1. Individual 
I saw a young, healthy individual who enjoys running, biking, and exploring their local city. Maybe they even participate in running marathons with one of our supporters, Eugene Marathon. They are always looking for new routes to explore and enjoy learning about their hometown. 

2. Family 
As for the family, finding things to do that are free can be challenging so, I pictured a family using this app as free entertainment. They could put the kids in the car and drive to each of the locations from the route, only getting out and stopping as necessary depending on the family's needs. 

3. Student 
And, the Student participates in local activism and finds out about the app from a friend. So, they decided to rent a bike from the school and pick a route to ride with friends. After using the app, they enjoyed getting out and seeing the city plus feeling more involved in their community. 

4. Elderly 
Lastly, the elderly-person is active and loves to find things to do with their friends. They convince their retirement community to schedule a bus to visit all of the locations from one of the routes and, they hope they can eventually do all of them. 

Based on all of these personas, I can see the end-user benefiting from 1.) A way to make it easy to download the app 2.) To make the content easy to scan and understand for busy families 3.) To have large text that easy to read, and lastly 4.) To include information about racial injustice or other ways to get involved. Additionally, based on all of these personas and situations, I also think this app experience is more likely to include a group of people vs. an individual. 
Below is the final design of the "How it Works" section on the SFSJ website. 
The "How it Works" section 1. Download the app.  2. Pick a route.  3. Explore and Learn. 
Solutions
Prioritize What's Important   
Above, we identified four main challenges to address when building out this site. Here is how we solved each of those issues. 1.) To save time, we consolidated to one-page site 2.) To make the site easier-to-scan, we identified, implemented, and rearranged content 3.) To make sure important information was easy to find, we prioritized it at the top and created visuals to highlight sections, lastly 4.) We added the CTA button at the top above the "WHY" section but made it a jump link so you would still see the information as it jumped to a lower section of the site. 
Solutions include:
1. Launching the website on-time
2. Making the content scannable
3. Prioritizing important information
4. Adding CTA's in the correct places

Sketches
One-page Website Solution 
Below you will see the final one-page sketch for the website after consolidating the content and consulting the team on our concerns and findings.  
Below is a wireframe for the one-page SFSJ website.
Wireframe sketch of the one-page website
prototype
Test a Working Mockup
After finalizing the sketch as seen above, I developed a prototype using Adobe XD. You can see the mockup for yourself at xd.adobe.com/view/b724d52b-d503-4d87-858c-27e3f7c66cff-e277/. While using this software, I noticed that you are unable to link to external sites using Adobe XD so the prototype has a limited experience.

User Testing
Simplify the Website Even Further 
The only user-testing, we did for this website was as a team internally. The main changes made to the final site design are as follow: 

1. Images removed from the "Get Involved" section 
The team had a hard time picking photos that everyone could agree on, so we decided to pull images from the "Get Involved" section. At first, we tried icons or illustrations but, to save time, we simplified by using hyperlinks.

2. Logos from the partnerships or "Thank Yous" section remain links only
Since not all of the supporting organizations/businesses have logos, we had to list their names as supporters instead of including images. 

3. Visual cue to the "WHY" also called the three H's (Heart, Health, & History) 
As part of the SFSJ branding, the three H's are a vital message intended for the end-user but, the team felt that the app experience would include the same message and, by pulling this content, we simplified the website experience. 
Below is the final mockup for the SFSJ website.
The results
Yay, We Delivered a Website On-time and On-target 
You can check out the live website right now at stridesforsocialjustice.orgOverall, I would call the project a success. Some parts could be improved in the next website design but, given our timeline and circumstances, we made our goal and addressed all of our major concerns. Additionally, I think the site is easy-to-navigate and is aesthetically pleasing. 

Celebrations 
The best part about the website design is the "How it Works" section. By advocating for this content to be added, the end-user can easily understand how to app works. I feel these contributions to the team and project greatly improved the website design and functionality. 

Reflection 
After reviewing this project, one of my biggest takeaways would be to identify switching to a one-page website sooner during the process so that the development team would have more time. 

You may also like

Back to Top