Teconix Donation Flow

Teconix is an innovative charity that focuses on empowering communities through technology. The main call to action on their website is to donate and therefore they want to create a donation flow that makes it quick and easy for users to give to their cause.

‍

My role in the project

I was the only UX Designer on this project and responsible for creating the responsive website from conception to delivery.

Key tasks included researching and analyzing competitors, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

‍

Project goal

The main goal of the project was to design an responsive website donation flow for Teconix that makes it easy for users to give money to their cause. With a logically navigable flow of screens, easy data input and secure payment features users can make donations securely and hassle-free.

‍

Target audience

The primary user group identified through research was professionals between 30 - 45 years, making one-off donations to a cause of their interest.

‍

Key challenges or constraints

— Quick turnaround time required by client

— Specific nature of the charities' cause might limit potential number of people making a donation

‍

Research study details

I conducted interviews and created empathy maps to understand the users I‘m designing for and their needs. Research revealed that competitors often "guilt-trip" users into making a donation by using persuasive language and imagery. Many users also stated that it was often hard to find information on the real impact of their donation. Users also highlighted that they were put off by very long donation forms or multiple tickboxes trying to convince them to sign up to a newsletter/make a regular donation instead of a single one etc.

I identified the following user pain points:

• Completion time: Users want to make a donation easily and quickly.
• Navigation: Many competitors lack good navigation elements between screens. It is difficult to alter information once inputted.
• Tone of voice/Content: Users prefer to interact with inspiring content and feel more motivated to make a donation.
• Responsive design: Competitors, especially smaller charities, often have websites that do not work well on mobile and thus frustrate users.

‍

Personas

Amanda is a caring regular charity giver who needs easy access to information about how the charities' money is spent because she wants to make sure her money actually reaches the people most in need.

“I want to see clear information on what the charity is doing to have a real positive impact on people's lives."

‍

Jason is a modern professional who donates money on a one-off basis who needs a clear, hassle-free and easily navigable donation flow because he does not want to start all over again if he inputs one data field incorrectly.

„I find it frustrating that charities always try to sign you up to a regular donation, their newsletter or lots of other stuff and it‘s a real hassle to opt out of that!“

‍

Initial design concepts

I started the design process with paper wireframes. Taking time to draft iterations of each screen of the website on paper ensured that the elements that made it to the digital wireframes were well-suited to address users’ pain points.

‍

Wireframes

I then transferred my initial paper wireframes to digital wireframes using Adobe XD. As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. It was important to users to be able to navigate the donation flow easily and quickly and to be able to find detailed project information and inspirational content.

‍

Low-fidelity prototype

After completing wireframes for all screens, I created a low-fidelity prototype for the primary user flow of making a donation, so the prototype could be put to the test in a usability study with users.

‍

User testing results

I conducted two rounds of usability studies. Findings from the first study helped me guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and highlighted which aspects of the design still needs refining.

‍

Round 1 findings highlighted that:

• Users want images and direct quotes
• Users want additional project information about specific aspects ie. project location, duration etc.
• Users want information about why their donation would make a difference to the project

Round 2 findings highlighted that:

• Users want to be able to change donation currency
• Users want to keep having the introductory text next to the donation box while the move through the donation flow

‍

High-fidelity designs & prototype

Using user testing results as a basis to design high-fidelity screens, I then created a high-fidelity prototype for the responsive website.

‍

Conclusion & learnings

While designing the responsive website for Teconix I learnt how important it is to make it easy for users to navigate a product and be able to correct any wrong inputs they might have made. We are all human, and sometimes auto-filling fields can also lead to errors. It should not be a hurdle for users to go back and change information if necessary.

I was particularly pleased by positive user feedback about the donation flow:

‍

"I love how easy it is to go back and forth within the donation flow.. for example if you changed your mind and wanted to give $50 instead of $20 it is super quick to update that."

‍

‍