top of page
Project overview

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

The significance of work done by the team at Story Dogs is weakened by its outdated website. Poorly designed landing page and donation page cause users to detour from the donation journey.

The aim of this project was to uplift their landing page to cultivate a positive first impression to improve donor confidence. Develop a streamlined donation process to help Story Dogs receive more funding.

Role

UXR, UX, UI

Empathise
Research

It is important to communicate with our users and stakeholders to understand the scope of this project before we dive into the redesign process. We conducted google surveys, 1:1 interviews and usability testing of the current website to identify key limitations and pain points. See research plan

Research goals

  • Discover how and why people make donation

  • Learn about user's donation pattern and motivation

  • Understand the differences between a good and a bad donation experience

  • Explore the strengths of successful NFPs

Research methodologies

  • Primary Research (Survey & User Interview)

  • Secondary Research (Market Research & Competitive Analysis)

The responses we received from 32 survey participants, 7 users and 2 stakeholders were extremely helpful and gave us a first hand understanding of user goals and business goals. This provided us with some detailed insights into how we could tackle the problem.

user interview .png
Empathy map

Creating an affinity map allowed us to break down the data we collected to find common patterns and themes. This gave us a broader understanding of user expectations, user needs and most importantly the pain points of potential donors.

Empathy map.png

Insights

Users want to know if the organisation is reliable and how their money is being spent

Users feel frustrated if the donation process takes too long

Stakeholders want to demonstrate the positive impacts Story dogs has created for young readers

Needs

Users need to be assured that they are at the right place and the funds are spent appropriately

Users need a smooth and streamlined donation system

Stakeholders need to help Story Dogs raise more awareness

Usability testing

After gaining a solid understanding of user and stakeholder needs, we wanted to further explore the usability of the current site to learn about its weaknesses and features that cause users to detour from the donation journey. The goal here was to evaluate the page flow, navigation system and functionality of the current site.

Usability testing 2.png
Market research

An in-depth market research has allowed us to further investigate into the topic of online giving for non-profit organisations. As we gained more knowledge on donor behaviours, we also uncovered business strategies that help to drive and retain donations.

Key statistics

 

  • There are approximately 257,000 non-profit organisations operating in Australia

  • Donors who set up recurring donations give 42% more annually, compared to one-time donations.

  • There has been a steady growth in online giving over the past 5 years.

How to encourage and increase donation?

 

  • Well-designed non-profit websites are proven to attract new donors and promote small-scale impulse giving.

  • Creating a seamless donation process will increase the odds of getting users to complete the process.

  • Potential donors are more likely to donation if there is some of social proof that goes to show the organisation is credible and reliable.

Competitor analysis

We examined our direct and indirect competitors from different angles to make sense of their design strategies and the kind of donation experience they offer. By looking at each of these NFPs, we learned about their strengths and we wanted to replicate them in our redesign.

competitive analysis.png
Define
User journey map

A detailed user journey map helps to visualise user’s touchpoints and pain points at different stages of the donation process. This assisted us to produce a motivation-driven experience that engages deeply with potential donors, prompts valuable and consistent contributions, thus meeting business goals.

user journey.png
How Might We

Creating the HMW matrix helped us to define the right problems to solve and to think on a deeper level what our users and stakeholders truly need. The statements and questions were derived from the insights and needs gathered in our empathy map.

HMW.png
Product goals

While there were many things we hoped to achieve, we needed to find a middle ground where both business objectives and user objectives can meet and merge. Therefore, for the scope of this 2 weeks project, we decided to focus on creating a better landing page and an internal donation system that is easy to use.

product goals.png
Feature prioritisation

We produced a feature prioritisation matrix to create a list of product features and solutions that help to work towards our goals. By focusing on the highest priority features we have equipped ourselves with a clear vision for our next steps.

Ideate
Information architecture

The current IA of Story Dogs is extremely unorganised with repetitive and irrelevant contents. As seen from our usability testing, users were confused and struggled to find useful information efficiently. Using the card sorting method, we were able to create a less convoluted and more logical sitemap that makes more sense for our users. In comparison, the updated sitemap avoids cluttering and presents relevant information to users in a clear structure.

Before

IA OLD.jpg

After

IA.png
Task flow

To assist our users navigate the site better, we have established the following chart that identifies user's key tasks and guides them to achieve their goals. This set a clear path for further design steps and highlighted the exact features and interfaces to design.

Task 1: Marie wants to learn about Story Dogs and what kind of organisation it is
Task 2: Marie would like to sign up for monthly donation
Task 3: Marie pays with her credit card and wants a digital receipt sent to her email

Task flow.png
User flow

We established 3 scenarios that are in alignment with the task flow above. It is important to map out Laura's movement and the different paths she might take to complete the key tasks. We wanted to walk through the scenarios in the shoes of our persona.

user flow.png
UI requirements

Before we dived into wireframing, we created a detailed UI to do list, which outlines all the UI elements required for the key screens highlighted in the task flow above. See UI Requirements

UI.png
Low-fidelity sketches

We sketched out key frames and ideas into visual solutions, which focused on the representation of information and the choice of UI components. These sketches kicked off the prototyping process, gave us resolution and confidence to move on to the next step.

lowfi.png
Mid-fidelity prototype

After figuring out the logical layout of each screen, we transferred our sketches into digital screens using Figma. We incorporated common design patterns for better visual consistency and hierarchy, the goal here is to create a clean and straight-forward experience for our users.

Mid-fi 1.png
Mid-fi 2.png
Usability testing

In person testing was conducted amongst 5 participants to evaluate the usability of our mid-fidelity prototype. Each user was asked to communicated their thoughts aloud while interacting with the prototype and completing the tasks given to them. We tested around the key tasks outlined in the user flow.

Overview:

Method: Face to face testing

Participants: 5

Age range: Millennials and Gen Z

Average Time: 2.3 minutes

Affinity mapping

We analysed the different pain points our users have experienced and uncovered major insights that help the design to move forward. In light of these key findings, we also established a list of recommendations that addressed and resolved each pain point.

Affinity map.jpg

Patterns

4/5 users were confused by 'Make a change' and 'Donate'

4/5 users think the progress indicator takes too much space on the page

3/5 users think the hero text is too long and chunky

3/5 users would like to have top navigation on the thank you screen

Insights

Users think they are different programs

Users feel distracted, interface looks unbalanced

Users want to see direct and empowering hero text that conveys a sense of urgencys
 

Users feel lost on the page, having the top navigation gives them a sense of control

Recommendations

Users want to know if the organisation is reliable and how their money is being spent

Reorganise page layout to maintain visual balance

Utilise different font-weights to add layers to hero text

Remove 'Back to homepage' and replace it with global navigation

Priority revision

Based on the recommendations identified, we began to make revisions to our existing prototype. We focused on resolving key pain points discovered from our affinity map whilst also improving the overall UI of the design.

1. Replace 'Make a change' with 'Donate now', utilise different font-weights to add layers to hero text
 

before and after 1.png

2. Reorganise page layout to maintain visual balance

before and after 2.png

3. Remove 'Back to homepage' and replace it with global navigation

before and after 3.png
Branding

The current Story Dogs website has a weak and outdated branding, which works against their business goals and lowers the credibility of the organisation. Therefore, we have curated specific attributes to set the tone for our high-fi prototype.

  • Joyful 

  • Inspiring 

  • Warm

Logo design

We worked on creating a simple logo that would reflect the brand attributes highlighted above, we sketched out quick and rough ideas that we had in mind then refined some of the successful ones. The shortlisted options were recreated and digitalised using illustrators.

logo.png
Style tile

Creating the style tile allowed us to further determine the visual style of Story Dogs. Image gathering was an unexpected hurdle due to the lack of high quality photographs we could find, however, after some thorough search we have found some great photos that really worked well with the atheistic of our design.

style tile.png
UI kit

We looked into the latest UI trends and have incorporated some of the concepts in this design to make it more user friendly, because attractive things work better. Overall, we have tried to keep the design simple and only used colours where necessary to capture user attention or to paint a certain mood.

Ui kit.png
Protytope
Responsive UI design

The challenge here was to transform each components to a smaller size without breaking the visual balance, through trial and error, we have achieved a highly responsive design that allows users to have consistent experience across different viewports. 

Responsive design 1.png
Responsive design 2.png
Validation

Seeking validation from our users was a crucial part of this redesign project, we were curious to find out the impacts and results of our redesign. We recruited 7 users to participate in all stages of testing, from the initial usability testing of the current Story Dogs website to our final clickable prototype.

Validations.png
High-fi prototype
mock up.png
Reflection

This is my first ever website redesign project and I have absolutely enjoyed every part of the process. The original Story Dogs website was extremely outdated and performed poorly for both the UX and UI. This was quite a challenge for us since we couldn't utilise much from the existing site but to ideate and build every feature and component from scratch.

More projects
gradschool cover wix.png
Mylocal without shadow.png
bottom of page