The Process

I utilized the Double Diamond UX process into this product.

Initial Website Observation

One of the first things I did was to make some notes about their current website. Some of my findings included:

• Large hero image, that does an ok job of creating an emotional connection but it could be better.
• The navigation menu items are clear, which is nice, but the layout could be better and the donate button is lost amongst the other items.
• This landing page is basically just a blog, and I have no idea what they do, and it doesn’t grab my attention. It feels unfinished and unpolished. I don’t have a very strong urge to want to learn more.
• There are no call to actions found on the landing page which would direct a user to something important such as: donate, sign up, view information.

User Research

Who are the end users?

The first step I took in understanding the problem MOSTe faced was to do research into who the end users were. Through talks with the organizations stakeholders I was able to determine the three main end user groups: Investors, Mentors, and Students.

User interviews

After defining end users, I then sought out individuals to interview within those three end user groups. Each group had slightly different questions pertaining to characteristics inherent to their respective group. I then recorded their answers into a collection of interviews.

What are the qualities of the UX?

• Simple Navigation
• An Emotional Connection
• Robust & Streamlined Donation System
• Clear Program Information

Understanding and defining the key characteristics and attributes of the website was crucial in making it more user friendly.

User Personas

In order to flesh out the Emotional Connection characteristic trait of the website, I decided to use the student user group as the main area of influence. I created a persona, which helped me step into the shoes of a student, and thus helped me understand and define further user experience characteristics of the website. 

Defining the Problem

Problem Statements

Once I had sufficient qualitative data through user interviews, competitor research, and current site analysis, I delved into making some problem statements:

• Users cannot easily access program material. This is a problem because new and existing users need to know where the program material is, as well as the ability to get the content. If they cannot get program material they may be more inclined to look elsewhere for a program.
• The website doesn’t feel fresh and current. This is a problem because an end user group are young people, who are familiar with engaging in digital experiences that are up to date with current design trends. Students will be less likely to want to stay on the page and engage with the organization.
• The donate feature is lackluster, hard to find, and doesn’t generate a lot of income for the organization. This is a problem because the organization depends on donations from the public. Without continued donations, the program won’t survive.
• The website isn’t organized well, and some content is repeated on various pages. This is a problem because the pages don’t have clear call to actions, or paths for the user to take once they land on the page. Users will get confused if the layout isn’t clear, and thus making them want to leave the website sooner. Duplicate page content can also reduce page rank with Google.

Generating the Sitemap & User Flow

In order to tackle the problem statements listed above, I felt it was best to start with a revised sitemap in order to make sure the entire website structure made sense and that there were clear paths for the user to take. The revised site map was an important piece of the UX puzzle. Getting the pages mapped out allowed me to consolidate content and emphasize others that were important to accomplish key tasks by the user. Generating the sitemap also helped me visual what different paths a user might take during their interaction with the website. To further extrapolate the paths I also created user flows.

Wire-framing

Moving on to the wire-framing phase of the landing page, I wanted to stay away from too many visual elements in order to focus on the content and touch points of the webpage. Again, I wanted to utilize my research found during the discovery phase to drive my design decisions. Keeping the page clean, easy to navigate, and emotionally visceral were important necessities.

Design System

Once I had a sufficient amount of qualitative research data, I moved on to develop a design system for the new website. Using the student group as a keystone for the design decisions, I decided to make the elements bright and fun, engaging and clean.

Part of the reason behind this was that I wanted to invoke trust and fun for the user. In my research I learned that some of the students who are involved with MOSTe have had difficult upbringing and I wanted for the MOSTe organization to be a safe place for them to come and interact with.

High Fidelity Prototyping in WordPress

Finally I moved on to high quality mock-ups. For this project I began my mock-up directly in WordPress as I was familiar with the theme components I would be using to develop my sketches and wire-frames.

User Testing

During the testing phase we invited different users based on the three key user groups. I had a list of objectives I wanted each user to do, as well as questions for them to answer after their testing experience. 

The questions helped me understand whether or not the designs made sense, if there were any friction points, and if MOSTe’s key objects were being met through my design decisions. Anything that did not make sense was addressed during this phase and new iterations were made to enhance the user experience.

Things I incorporated into the final design:

• Clear call to actions
• Effective use of photography to illicit an emotional response from the user and to connect with content
• Highlighted donate button and clear navigation
• Effective use of proper web based typography (ie, hierarchy, line height, font size, color)
• Designed for equity and accessibility in mind
• Defined use of grid and layout
• Organized content into digestible chunks

Summary & Reflection

The end product was a special, meaningful, emotionally connected experience for all of MOSTe’s stakeholders. Since the launch of their website they have gained increased donations, volunteers, and students. The website is a key access point for the organization and is a great tool used to facilitate user experiences.

Things that went well:

• Great communication with all members of the UX design team
• Gained great insights into the area of after school programs for at-risk youth in the Los Angeles, area
• Turned research into actionable steps to help an important cause
• Met deadlines on time or early

Things that could have been better:

• While we did conduct a lot of user research, it would have been nice to explore with even more user testing sessions, both in person, and online
• Training the MOSTe staff on how to use the new website was a challenge, and being remote produced more difficulties there than if we were in person