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.
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.
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.
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.
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.
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.
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.
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
After
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
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.
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
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.
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.
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.
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
2. Reorganise page layout to maintain visual balance
3. Remove 'Back to homepage' and replace it with global navigation
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.
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.
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.
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.
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.
High-fi prototype
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
