To view the final product, CLICK HERE

‍

Roles & Methods

UX Designer Lead / Assisted in Research

C&C Analysis | User Interviews | Affinity Mapping | User Persona | Sketches | Sitemap | Grayscale Wireframe | Mid Fi Wireframe | Hi Fi Wireframe | Usability testing

Team

4 UX/UI Designers

Tools

Figma, Figjam, Google Docs, Trello, Zoom

Timeline

3 Week Sprint

PROCESS

research/discover → define → design → testing → deliver

‍

Research/Discover

‍

RESEARCH APPROACH

We approached our research with 4 objectives:

1. We wanted to identify any positive or negative user experiences when doing 3 primary flows: looking for resources, taking action, and donating.
2. We also needed to understand user interaction with the website features while navigating through it.
3. Our 3rd objective was to identify any problems or barriers a user encounters when trying to complete those 3 primary flows.
4. And finally, we needed to gauge insights on user experiences after they visited the website.

‍

With those objectives in mind, we needed to determine what would be the most appropriate research approach. 

‍

Considering the project timeline and the resources available to us, we knew we needed to be strategic regarding which methods we implemented.

‍

1. We decided that usability testing the current state of the website would help us to identify positive or negative user experiences and
2. any problems or barriers encountered when moving through the 3 primary flows. 
3. The usability test would be performed in conjunction with a short, in-context interview to gauge users' feelings of the website, and how useful and effective it is. 
4. A heuristic evaluation would then be performed by the members of our team to best understand how easy or intuitive the website is for accomplishing tasks.

‍

We then used Jakob Nielsen’s 10 general principles for interaction design to conduct our heuristic evaluation.

‍

Key findings from that included:

‍

1. Close attention needs to be paid to all copy so that information is categorized in a meaningful way
2. Ensure consistency throughout the site so that specific user actions result in the same outcome
3. Create multiple ways to locate topics of interest using filters
4. Label in a way that makes it obvious for the user how to find pages they want to go to quickly
5. Add shortcuts to enable users to accomplish their most important goals
6. And utilize colors, pictures, space, and fonts so users are more engaged with the content

C&C analysis

‍

The final steps in our research consisted of competitive and comparative analysis of some of their direct competitors.

1. With the competitive analysis, we wanted to get a better sense of what works well on each of these websites,
2. How they may have solved similar usability issues identified during usability testing,
3. And what features were offered on their websites.

Discovering these would help us develop a UX strategy and prioritize the design process.

‍

1. Although a lot of information is available on these websites, it’s chunked together with larger headings so that the entire website is easy to scan. 
2. These websites provide easy paths to getting involved by offering multiple ways to take action directly through the website.
3. And educational resources for students, educators, and the general public are categorized so that the user can quickly locate the information they’re looking for depending on what purpose they need it for.

To build CoAGG’s credibility, we needed to carefully consider these for the website redesign.

• In terms of features, we learned that all of your competitors offered active social media accounts, email subscription, and a search bar.
• Additionally, 6 out of 7 competitors offered a variety of direct calls to action regarding getting involved.
• To grow CoAGG’s event attendance and empower users to take action, we needed to prioritize incorporating these features in the redesign

‍

Since CoAGG wants to focus on 3 pillars - events, advocacy, and education - we compared these user flows on 4 of the websites. 

‍

1. In terms of events, these websites offer a variety of local, national, international, and virtual events. At these events, attendees are able to learn more about the issues and receive updates on the organization.
2. With advocacy, they make it easier for a user to get involved by providing a range of clear calls to action.
3. And since these websites contain large amounts of educational resources, they keep their site navigation simple with multiple ways to filter and access the information.

‍

Define

‍

After user research, to understand target users and put ourselves into their shoes we developed 2 personas. Our first persona is Charlie who is passionate about making an impact in a community and wishes to donate, volunteer at organizations working towards sensitive topics like genocides. 

She wants to feel confident while deciding where she want to channel her energy and feels websites are best credible sources of information

We walked through her journey on CoAGG's current website through 4 stages: research, evaluation, decision and conclusion to get an overall idea on user experience as well as jot down touchpoints, pain points and opportunities. 

Throughout  her journey she touched upon multiple web pages starting from google to org landing page, advocate page, twitter, what is genocide and things that she found confusing are overwhelming information, confusing visuals, good resources but few external links are not functioning, in volunteer sections exactly what she will be doing and where how donation is getting utilized. That kept her from deciding if she wish to get involved
and here we found few opportunities like

1. Making sure the user is understanding the context and is able to educate herself on website

2. Categorization 

3. Donation details 

4. More insights on volunteer pages 

5. Make impact visible 

‍

Similarly, we created  another persona, Peter who is a Political Science major student and looking to gather information on Genocides as well as wish to connect with people who are knowledgeable about this topic and he can interview. He is a quick decider and want easy to navigate and updated websites 

‍

Further we mapped peter’s journey on organizations website, 

similar to our last persona, pages he visited has started from google search bar to CoAGG's website and additional pages like representative, donation page, what is genocide, get involved. Main concerns from his journey are insufficient information, unsure about how to connect with a representative, and not able to build trust. Here we found opportunity to enable user to connect with right people through website 

‍

PROBLEM STATEMENT

Charlie and Peter needs a way to find clear direction for their stance against the genocide so that they can effectively get involved in organization.

‍

HOW MIGHT WE…

• help users learn more about genocide so that they can become knowledgeable and stay informed

‍

• provide users with different ways to support the cause so that they can get involved

‍

• help feel confident that they’re making a positive impact, HOW MIGHT WE BUILD TRUST

‍

DESIGN

‍

Next we move onto the design stage.

Here is the site map my team and I finalized on. We organized navigation items to reduce clutter and the Advocate, Events & Volunteer tabs were moved into ‘Get involved’.

‍

Once we had a finalized site map, my team and I split up into a 20 minute design studio to sketch out our ideas of what the main landing pages might look like. 

After sharing our sketches, my team and I picked the best designs from each other’s sketches and put them into one. Now we are ready to start creating our low/mid fidelity wireframes.

‍

Going from left to right, we have the Low/mid fidelity wireframes of our homepage & volunteer pages

‍

On the homepage we tried to fit in the main points ( what the org does, how to get involved, news section, donate page). As for the volunteer pages, user would be able to see a list of open roles and apply

‍

Here we have the Get involved landing page and the Advocate pages. The user is able to reach out to a representative by seeing a list of names with their contact information.

‍

‍

Here we have some pages a user may use for educational resources

• What is genocide
• Past & ongoing genocides
• News page
• About page

‍

Once we finished building our wireframes, our prototype was ready for the first round of usability testing.

‍

‍

We gave each user a total of 3 tasks. Users would walk us through their process on volunteering, contacting a political representative

‍

Tasks 1 & 3 users completed with ease, but expressed difficulty with task 2 because there wasn’t a clear Call to Action to let users know the image is clickable.

‍

After synthesizing data from the tests, these were the key insights we found. Users needed… 

‍

• A visual cue/indication that things in the navigation bar are clickable.
• homepage organized, bite size and easily scannable. Also have multiple ways for users to reach the same information
• Have clear Call to actions, especially for ways to contact

‍

With the given feedback from tests, we moved forward with some fixes & additions

‍

‍

Contact navigation item was hard to find so we pulled it out into the main navigation

‍

Navigation items now change colors to indicate they are clickable

‍

For SB vs Educators & Speakers

• Most users were confused on what Bureau meant so we went ahead and A/B tested between the two titles.
• everyone that tested with Educators & Speakers had a clear & better understanding of what they would find on that page 

So that’s what we went with.

‍

As for additions, 

The Homepage was cleaned up and organized for users to see everything the organization/website has to offer

Style Guide for a consistent look throughout the site and bringing it to life

‍

Using these style guides as well as the feedback from user testing, we created the first iteration of our high fidelity wireframes

‍

Our new homepage highlighted the mission statement, main goals of CoAGG, and how the user can take action which is an important goal of this redesign

‍

We created a “Get Involved” landing page which simplified the routes the user can take to be able to make a positive impact at a local and national level.

‍

Our team created a page where you can find a skill set they have experience in and a flow where they can submit a request to volunteer. 

‍

This was a key difference in being able to allow the user to stay on the CoAGG webpage to complete this flow instead of the user exiting the page to use their own email to reach out to CoAGG with volunteer interest. 

‍

We built a landing page for the “learn” section and three sub pages from which we felt would cued the user to understand the three routes they could take to utilize this website as a resource to 

• learn more about genocide as concept
• book an educator to speak at their organization
• and learn about past and ongoing genocides

‍

After our hi-fidelity wireframes were complete, our team moved onto another round of user testing. We creates specific tasks for users to try to accomplish in order for our team to really make sure this test was as specific as possible to focus on our original goals we set out to improve in terms of: 

‍

• Education
• Advocacy
• and attending events.

‍

The results from this second round of testing provided helpful feedback for our next iteration of our design:

‍

• All users had an easy time completing the volunteer flow, but once again users were not confident about completing the second task related to finding contact information of a state and federal representative. 

• These user’s feedback all centered around wanting to be cued to know that you can accomplish this somewhere on the homepage

‍

• Users were also looking for a more interactive and organized way for the “Genocide Speakers and Educators” page to be designed

‍

Our team synthesized the feedback and insights from this  and made a list of design fixes and additions we can use to update our prototype:

‍

Points to fix

• Rework the format of some pages to make them in a more scannable format.
• Fix some contrast issues with the orange and white text

Additions to make

‍

• The website needs to make it more clear that the user can contact a member of the government to make a difference
• Create more interactive design for the speaker selection page such as a global map and topics to choose from.
• Users also wanted to able to share the cause they were supporting on social media

‍

Now let's move to our final step, the deliver phase:

‍

DELIVER

‍

For the updates to our high fidelity wireframes, our team:

‍

• created a call to action on the homepage to cue users to be be aware that they can engage lawmakers on key issues related to genocide on this website
• We fixed contrast issues that users were having with the events page banner, 
• We used flat black graphics and text to make sure the “what we do” section did not appear clickable
• and make the three options for the “get involved” section appear clickable by turning them into buttons. 

‍

We implemented a flow where users can easily be learn about key issues happening in the world and be able to take action against them in the form of a message sent to congress

‍

We created an interactive map and button set that split up the categories up of the speakers and educators between 

• region they speak about 
• and topics they speak on

‍

We finalized the donation page to include a section to inform the user how their donations will make an impact. We simplified the flow to cue the user to:

• be able to make recurring donations,  
• if they want to donate anonymously,
• and common donation amounts they can choose from

‍

Next steps:

• Spend more time developing the event section more to bring in more user traffic.
• Build out the “Past Press Releases” section to turn into a blog post style that is scrollable.
• Create an open enrollment volunteering feature if someone does not know what type of volunteering role they fit into.
• Create a search bar results page structure.
• Making sure the entire website is accessible for all users.
• Creating several break points for varying screen sizes.
• Building out mobile and tablet compatibility for this prototype.

‍