Responsive Redesign to Reach 1,000,000,000 Acts of Peace
Billion Acts believes in world peace through thoughtful action in your community, school, organization or business.
Goal
Increase number of people posting acts of peace to website.
My Role
As Project Co-Lead, I worked on various end to end aspects of the redesign, including, UX research, user testing, sketching, lofi and midfi wire-framing. The team worked in two week design sprints; I managed the delegation of tasks and coordination with the client.
Why and How to Post an Act
Research & Testing
To guide our strategy and pinpoint areas of improvement, the team conducted user testing and interviews.
Competitive Analysis
The team looked at multiple organizations websites, which gave us a view into what was working well and saw what might be missing for Billion Acts.
Based on research, testing and competitive analysis, we planned to prioritize the development of a frictionless flow from the sign-up through to posting act with the following:
GOAL 1
Show value proposition for both Individual and Network Partner participants on landing page
GOAL 2
Eliminate any confusion to onboard both Network Partner and Individuals
GOAL 3
Shorten and clarify instructions for act submission process
Two Types of Users: Individuals and Network Partners
The users for this website could potentially be anyone in the world, from teenagers learning about the values of charity to companies wanting to give back to their community.
In order to rebuild a user centered website, the team did different exercises to build empathy with the users:
- USMO charts (User situation, Motivation, Outcome): As as team we brainstormed both categories of users with this exercise, which helped us get a better understanding of the when and whys.
- User Stories: Each team member worked on building a persona and creating a scenario to get a more in depth story for one user.
- Team Act of Peace: to further encourage the team into understanding the user, I organized an act of peace event.
Ideation and Validation Testing
We formed sub-teams to tackle the three sections, all the while, coming together to present with each other and stakeholders. As we moved through the design process, the team conducted validation tests with clickable prototypes and other artifacts, which contributed to feedback for new iterations.
Lo Fi Iteration Feedback for Landing Page and Desisions
✓ Positioning of the Network Partner User
✓ Layout clear with good use of space
✓ Monthly goal incentive
✓ Focus on one sign up CTA
X Needs to highlight an Individual User -> Combine value to both users in copy and position higher up on page
Mid Fi Validation Testing for Landing Page And Decisions
✓ Easier to read and understand mission
✓ Adding video in background
X Users still not understanding what an Act of Peace -> Add a live feed of acts and position higher
X Value Prop still unclear -> Brainstorm on copy ideas for messaging
Explaining Value on Landing Page
As this is the main point-of-entry for most users, we spent time doing thoughtful analysis of the research to get to influence the the main goal of convincing users to sign up and post an act.
Points of Friction:
- Purple distracts from comprehension of site and mission
- Copy does not clearly state value proposition to user and using the 3rd person point of view "us" is misleading in this context
- User is forced to watch too many videos to understand further, and testing showed they did not watch videos; this suggests that users don’t necessarily want to turn to other materials to understand
- Finding out valuable information of what is an act of peace fell well below the fold
What we did to address the issues:
- Removed the purple overlay to keep focus on message and give option to watch video
- Updated copy to include value proposition and improve comprehension to help users understand mission and value to participate
- Showed examples of acts early on to reinforce mission and further explain how and what a user can do
- Listed out more specific value props for both individual and organization near top of site to reinforce the potential value to different users and encouraging them to join
Navigation
As we progressed on creating iterations, we realized that the information architecture could be the source of some confusion because important items were hidden in the drop down second navigation. We held a few card sorting techniques to help us see what users expect.
What we did:
- Surfacing crucial items and removing second navigation bar, for example the Act of Peace section and the Partner section
- Replacing Log In with link, emphasizing Sign Up as the main call to action, thus creating focus on one main call to action in the in the menu.
Simplifying Sign Up Flows
Analysis of the current user flow allowed the team to understand how the landing page could optimize the sign-up flow and lead the users to post an act of peace.
What we did:
- Made a clear entry point from landing page by allowing user to go through "Sign-Up" or "Partner"
- Presented a choice of signing up as either Individual or Network Partner early on to give more clear expectations and reduce drop-off during sign up.
- Combined a multistep process for Network Partners into a more streamlined flow instead of first signing up as individual and then separately filling out a partner application.
- Shortened Network Partner application form and kept only the essential items in order to reduce frustration and drop off during sign up.
- Provided direction and transparency with more engaging popup modals, hints and emails
Submitting an Act of Peace
As observed during user testing, posting an act of peace was not easy to find and required too many steps. Users also wanted to see example acts prior to posting an act themselves. The website, as it was, showed acts of peace on separate pages from the form.
What we did:
- Shortened and simplified drop down form to make the process less daunting
- Provided area to promote acts and give recognition benefits
- Combined recent acts and other ways to filter on the same page as form
Validating Designs
The designs created were validated and users understood more clearly what the mission of the organization was and how to participate.
Working with Engineers
Collaborating with the developers was an essential part of this process. We held weekly meeting with the developers and discussed our progress and received feedback. At the end, we passed off our designs using Zeplin.
Learnings
Working with a wide range of users and finding an optimized solution can be challenging; however, through this project I realized how much I love working on design solutions for a global audience. To take the research and designs even further, it would have been ideal to get a larger sample size of people from around the world.
Tools
