Sarah Halliday
Sarah Halliday
Product Designer

Increasing Sign-ups for Do It In A Dress

The Challenge

MOCKUP.jpg

Not-for-profit organization One Girl needed to review the usability of the Do-It-In-A-Dress online platform because of an increasing discrepancy between users signing up and actively participating in the campaign. Between 2013 and 2014 active sign ups dropped from 50% to 44% (defined as users who actively raise money during the campaign). Our task was to discover potential problems causing the increase in drop off rates and design a prototype that addressed these problems. 

Our team addressed the activation rate in three phases: identifying current issues, determining solutions and testing these solutions for validity. This was achieved by developing and iterating new design concepts for the landing page, dashboard, sign up and donate processes.

Usability Testing, Interviews & Heuristic Reviews

Current site usability testing (recorded using Silverback)

Current site usability testing (recorded using Silverback)

We conducted our own heuristic review of the site with input from a web usability expert. This enabled us to discover core usability issues and allowed us to form hypothesis around why users were not completing the sign up process to become active participants. 

We then conducted remote interviews with two previous users (both ambassadors for the campaign) which was useful in finding out pain points they had experienced. However these experienced, or “power” users are not representative of the average user who would be unfamiliar with the website. Limited access to present and previous users a constraint of the project. Ideally we would have interviewed more users who reflected the target market. We made the recommendation to the client to conduct further user research via surveying participants at the end of the campaign period and conduct further in-depth user interviews with regular users about their experience. 

We also conducted usability testing of the site to identify key pain points and problems. Usability testing was conducted with 4 new users within the target demographic (25-35 year old females). Participants were asked to complete tasks on either desktop or mobile, to identify problems on both platforms. Users were asked to complete three tasks: Sign up for DIIAD, donate $1 to their campaign and view their campaign page. 

One-to-one and remote usability testing were chosen as research methods to gain a deeper understanding of usability problems and understand the potential motivations behind users who did not complete the sign up process or become active fundraisers. Video/audio was recorded during interviews and testing to allow for thorough analysis and to create a highlights reel to communicate key usability problems to the client. Users were asked to “think aloud” as they complete tasks and to describe any problems or frustrations they experienced. 

Key Insight: The sign up process is unclear to participants. 

Affinity diagramming was used to determine patterns in research findings. This made it really clear to see where the key problems were and allowed the team to discuss findings easily. Diagramming revealed several clear patterns including participant confusion around what to do next within each stage of the sign up process. This was particularly evident in the "My Campaign" page which included several different calls to action and overall problems in information architecture. Other problems included a discord in overall content strategy and messaging, confusion surrounding team vs. individual sign ups, and multiple technical errors.

Key problems:

  • Confusion around sign up process
  • Confusion around the difference between Team vs. Individual campaigns
  • Difficulty editing the Campaign Page
  • Difficulty understanding information on the Dashboard (poor information architecture and unclear CTAs)
  • Multiple technical errors including broken links, button errors, visual feedback errors and image upload errors
  • Inconsistent content strategy and tone of voice across the site

 

Affinity diagramming to show patterns in research findings

Affinity diagramming to show patterns in research findings

Sketching & Wireframing

Sketching and wireframing was done as a team on large pieces of paper to develop ideas that could potentially solve different usability issues. This made it easy to compare ideas and discuss benefits of incorporating different features into the final prototype. From here ideas were further refined and developed into a high resolution Axure prototype. 

Rough sketches, wireframes & flows to explore ideas

Rough sketches, wireframes & flows to explore ideas

Scenarios & Tasks

Three scenarios were developed, each with several tasks exploring the most common actions participants would need to complete on the site. The primary scenario and focus of our prototype can be viewed detailed below.

Scenario 1: 

Maria has been listening to her friend Stacy talk about the Do It In A Dress campaign, and how she’s been progressing to achieve her goal. Maria becomes excited listening to Stacy talk about what she’s been doing, and decides that campaigning would be an exciting thing to do herself. Stacy sends Maria a link to her campaign page via Facebook one evening. Maria clicks on a link to Stacy’s campaign page to find out more. Maria looks at the campaign page, then at the home page of Do It In A Dress. She reads about the campaign and what it supports and thinks it’s a great idea. She decides to sign up.

Core tasks were identified from Maria’s scenario:

1. Sign up for Do it in a Dress
2. Set up an individual campaign page
3. Donate to yourself  
4. Share your campaign page
5. Donate to someone else

* These 5 tasks were the primary focus of the final clickable prototype. 


Proposed Solution

Our proposed solution incorporated all the recommendations gained from research synthesis, including homepage, sign-up and donate process improvements, as well as a complete re-design of the following pages:

  • The Edit Campaign page (which needs to be completed at the end of signup and explains what you want to achieve)
  • The Dashboard (where users can view funds raised, write blog posts and thanks supporters)
  • The external campaign page (the campaign page for individual participants that is viewed by external users).
Complete redesign of the Edit Campaign page at the end of the sign up process, Dashboard and external Campaign page. (user research revealed that most usability issues were on these page)

Complete redesign of the Edit Campaign page at the end of the sign up process, Dashboard and external Campaign page. (user research revealed that most usability issues were on these page)

Usability Testing & Iteration

Usability testing of the prototype was conducted with 9 participants, mostly within the target market and only resulted in minor changes. Users understood what needed to be done in most areas, however some technical improvements and improvements to the Edit Campaign page were made to improve overall usability. 

Final Prototype

Our prototype and project findings were formally presented to the client along with a comprehensive research and development document and received a very enthusiastic response. 

The final prototype can be viewed here. As this is not a live website, please ensure Proxima Nova font is installed: https://typekit.com/fonts/proxima-nova

Tasks to complete using this prototype:

1. Sign up as Maria White (individual participant)
2. Fill out your fundraising goal, challenge & motivation
3. Donate $20 to yourself
4. Edit your fundraising goal, challenge & motivation
5. Find Stacy Smith’s Campaign Page
6. Donate $20 to Stacy
7. Donate $20 to the One Girl organization
8. Log out & log back in as Maria White

 

Measuring Success

After we presented our final prototype and rationale to the client, they took our work in-house and implemented recommended aspects of the website. This was a huge win for the team and was a key indicator in producing a successful outcome. As a result, active sign ups increased by 24%. 

Key Learnings

Having completed this project within an extremely short timeframe, learning to better manage project timelines was a key takeaway from this project. Our team of three were working to a strict timeline, but different elements of the project (particularly research synthesis and documentation) were more time consuming than expected. In future I would increase time estimates of most research activities, but particularly research synthesis and documentation. High fidelity prototyping, interaction design and annotated wireframing was also quite time consuming, but resulted in a prototype that truly impressed the client so was worthy of the extra time involved.

Tools Used

  • Trello
  • Whiteboards & markers
  • Pen & paper
  • Axure
  • Illustrator
  • Photoshop
  • Silverback
  • Camtasia 2

My Role

My role for this project was to lead research activities and lead prototyping, interaction and visual design. This involved developing research questions, conducting current site usability testing, synthesising research data through affinity diagramming, sketching, wireframing and both low and high fidelity prototyping. 

Team members: 
Sarah Halliday - Lead UX and Visual Designer
Suryea Wongomoto - UX Designer
Ray Tokoshima - UX Designer

 

 


 

DIIAD.png