Responsive Web Design
Project Overview
Problem
Planet Green is a small nonprofit organisation that accepts donations to restore the environment.
​
Donations are currently captured in a spreadsheet or by manual ledger which makes it difficult to manage and keep track of who is donating and what amount. Keeping track of volunteers and what events they have attended or have registered is also challenging. The collected data is also difficult to access on a mobile device.
​
Deliverables
-
Responsive Web Design; MVP (minimum viable product, 80 hours), and the final deliverable will be a high-fidelity prototype for mobile and desktop​
-
accompanying presentation delivered to stakeholders
​
My role
UX/UI Design, User Research, Branding and UI elements, Prototyping and Useability Testing.
Discover
Research
Background
Planet Green is a small nonprofit organisation that accepts donations to restore the environment. Their core activity is to run events to plant trees. The trees are largely planted by volunteers who can register for the events on the website.
Research Goals
We want to know what dashboarding tools are currently being used in the market to capture information about donations made, volunteer management and event management.
We want to know what aspects users are struggling with in the current tools so that we can create a solution that saves time for employees and removes any confusion and pain points currently experienced.
Research Objectives
-
Investigate what tools are currently in use in the market (not limited to NFPs)
-
Learn the strengths and weaknesses of the current platforms that are in use
-
Understand what employees are currently struggling with
-
Understand what are the priorities when it comes to the data being captured
User Reasearch
In the interest of time, recruited 10 participants to complete a survey, all with varying experience working with data, volunteers and events.
My goal was to understand user pain points and gather insights around data or information collection.
​
Key Findings
Dashboard priorities – What users want to see
5/10
survey participants listed KPIs as a dashboard priority
4/10
survey participants listed revenue raised as a dashboard priority
5/10
survey participants listed donation sources and audience demographic as a dashboard priority
Pain points – What users struggle with
4/10
survey participants listed user error as a pain point
6/10
survey participants listed data quality as a pain point
5/10
survey participants listed data analytics as a pain point
Features – What would improve their user experience
3/10
survey participants listed colour coding as a dashboard feature
2/10
survey participants listed viewing data in realtime as a dashboard feature
4/10
survey participants listed viewing data snapshots as a dashboard feature
These findings demonstrate that staff are focussed on achieving their targets but lack the skills (or confidence) for data analysis or investigation as why they aren't, where they could improve or what they aren't asking of their audience. While this may not be initially problematic, it does present a limitation in the data collected, it's potential and what it means for the organisation.
The user priorities are clear though' revenue/donations, KPIs, and audience details. These will help shape the contents of the dashboard.
Define
User Personas
Task Flows
Revisiting the brief and the insights that emerged from user research, the below task flows were established to shape the wireframes and UAT that is to come.
Add a volunteer
Sandra is marking registrations as people arrive at an event. One of the attendees has brought a friend with them. Volunteers are encouraged to bring friends to tree planting events as there is very little pre-event work involved or costs involved. To mark this person as attending the event Sandra needs to create a profile for the volunteers friend.
Filter dashboard to funds raised by Claire Smith
Claire is preparing for her monthly meeting with her manager and needs to find out the amount of donations raised for the month of October against her monthly target.
Deliver
UI Elements
With the taskflows in place the next step is to begin wireframing the screens. While these wireframes have been through a series of iterations the focus is still to keep the content useable in a responsive environment.
Wireframes
The key screen for this prototype is the dashboard. As per the brief, the dashboard content and filter need to reflect the key findings from user research; KPIs, targets against donations received and audience or donor demographic.
User Testing
100% of participants were able to complete the task
I conducted moderated user testing (UT) in person with four participants. I divided the taskflow across mobile and desktop views; the 'Add a volunteer' flow was prototyped on mobile and the 'Filter dashboard to funds raised by Claire Smith' was prototyped on a desktop view. Participants were asked to complete both taskflows.
Key findings
Homepage Hero Section
The 'Join Today' button in the hero section was confusing to some participants as they mistook it for logging in or signing a volunteer up. To avoid this, I have reworked the call to action in the hero section:
-
Placed the heading over the image
-
Changed the CTA to Sign Up and Login
-
Separated the text under the image
Before UT
After UT
Dashboard Confirmation
Some participants were confused about what would happen once the dashboard had been filtered. While this does not alter the task flow, I have added a 'share', 'export' and 'print' button as a form of confirmation for users.
Before UT
After UT
Impact
Something else that was missing is some kind of impact measurement or statement typically seen in not for profit organisations. The goal and therefore the measure of impact for this organisation is to plant trees. I have added the amount of trees that can be planted with that amount of donations raised to the dashboard. I have also added some content to the homepage.
Before UT
After T
Final Thoughts
Challenges
My biggest challenge in this project was making a responsive dashboard, or rather creating a dashboard that would function equally on desktop view as it could on mobile view. Data, charts, tables and graphs are usually full of small details, text, axis descriptions and so on and it was an effort to keep all the information on the dashboard included, readable and useful in the mobile view. Using a column structure was crucial in forming the dashboard structure.
Next Steps
Moving from a spreadsheet to a digitised dashboard will give Planet Green many more options to learn about its users, volunteers and even their staff. Because this will be such a huge shift for the organisation, I recommend a review in 6 months of the data being captured and displayed on the dashboard. As the organisation learns more about their audience and their users their priorities may change and it is important that the data displayed is relevant and serves the organisation.
Further to this, the next steps I recommend are:
-
Undertake a trial with organisation staff before rolling it out across the organisation
-
Monitor dashboard usage and other channels, such as google analytics to gauge the effectiveness
-
Continue to build out other functionality such as; search function, events, sending communications and so on.
