My role: UX Research, Lo-Fi and Hi- Fidelity prototyping, Brainstorming + Ideation, UI Design
Project time: 3 weeks
Tools: Figma
The problem:
Users encounter challenges in navigating and trusting non-profit websites for making donations. How might we address this issue by incorporating elements of transparency and security to meet user expectations?
Developing a solution that focuses on enhancing transparency and security not only aims to improve the immediate user experience but also seeks to establish a foundation for long-term user support and loyalty.
​
Collaborators: Ruchi Lad
(User Research Lead, UI Design)
Harry Antoniou
(User Research)
research + analysis
the process
.png)
definition +ideation
prototyping
test + iterate
user research
Using the double diamond process and the project brief 5 key stages of the design process were identified and the testing and iteration phase was prioritised due to the time constraints and overall would benefit solving the design problem.
Digital mock up of WIRES redesign.
The Department of Health and Aged Care website was the focus of this redesign. It is a well respected government body and is the national authority on health information. I wanted to work on this site as there is incredibly useful information, however it is difficult to dig through and is a maze of lists and filters that are challenging to navigate. I wanted users to feel that this was the resource they could go to to get answers without the frustration of digging to find what they’re looking for.
​
The typical user would visit the website to browse a myriad of resources and research that includes:
-
evidence-based policy, well targeted programs and best practice regulation.
-
awareness and education, government initiatives.
-
academic resources and research papers
​
The website is a portal for users to locate health related resources and news provided by the Australian Government.
The solution is a re-organised website that categorises content in a way that most users can confidently understand and find. The content remains the same, but is broken up using colour, spacing, typography and imagery to assist the users to group information and digest what they are reading.
WIRES Wildlife
existing web design
05- Weaknesses
-
Top bar menu follows as user scrolls through the website
-
Resource types are grouped by type of media and specific topics
-
All information and resources are grouped together (for professionals and the public)
-
Every image/text box is proportional to each other
-
Text heavy websites are divided to reduce user confusion and helps break up text
-
Opportunity to input identification number to create personalisations and recommendations
06- Opportunities
​
-
Creating two portals for catered documents and resources (health professionals and general public)
-
Using physical dividers to break up text heavy websites
-
All popular searches and relevant information is at the top of each screen, providing consistency for the user
-
Create better, intuitive categories to sort resources
brainstorming
user insights
01- Affinity Mapping
In addition to gathering quantitative results from our questionnaire, we interviewed 7 avid traveler’s who provided further in-depth insights on their opinions on travel planning and experiences post-pandemic.
competitior audit
02- Affinity Mapping
I have analysed 2 direct and 1 indirect competitors for the app, overall have similar dynamic profile orientated form with the allowance of signing in/up using facebook, google and existing emails.
view competitor onboarding process annotations
.png)
user interface
onboarding
login flow
app
booking form
usability
user research summary
01
There are existing review and booking resources for accomodation and reservations at third places, however there have not been successful apps that combine the two.
02
There are not many memorable remote-worker related apps, mostly surrounding organizing work day and productivity, but none regarding venue at which work is taking place.
03
Co-working spaces/ brands have seperate booking websites, this is hard to choose as you have to stay loyal with a membership to a singular organisation, leads to no spontaneity.
04
Some apps have accesibility features for user preference such as light/dark mode, making text bigger, this allows comfort for user.
05
The similarities between each app is the onboarding process and sign in format, all provide lazy login in as well as manually inputting data.
06
All filters are based on physical objects/things such as pax, rooms, price and not remote worker needs.
site mapping
08- Existing
One key note from user interviews was that users wanted a dropdown menu, and I also realised that the word ‘topics’ was not meaningful to users. I have renamed this to ‘health information’ and have subcategorised the content into four sections to assist users in finding pages without using filters.
09- Proposed
In the mobile menu redesign, I ensured that the audience was included at the top of the menu so that it would be available to users at any time, not merely on the home page. I also included links to key pages within the footer as in user testing it was discovered that many users didn’t scroll to the footer to find key information.
.png)
ideation
03- User Journey Map
Storyboards help visualise ideas and provide clarity. Journey maps are used because they answer questions that storyboards can't provide, it focus on the sequence and order of events and the associated underlying human behaviours.
03- Storyboard
Storyboards help visualise ideas and provide clarity. Journey maps are used because they answer questions that storyboards can't provide, it focus on the sequence and order of events and the associated underlying human behaviours.
04- I like, I wish, What If?
The Like, I Wish, What If method is a structured way of organising feedback, it frames the user feedback in a constructive and positive manner, enabling an open discussion.
05- Feature prioritization matrix
Feature prioritisation allows to help inform UX decisions, to discuss if solutions are feasible.
.png)
.png)
.png)
clickable prototype
Play with the WIRES on desktop.
reflection & key learning
10- Next Steps
​
-
Creating a sensory-friendly option of the site that users can choose to switch to if they find the original site overwhelming
-
Add pages about brands and information on their ethics and sustainability so users can make informed decisions about their purchases.
-
Focus more on other forms of resources such as a Volunteer platform which allows to create meetings, show upcoming events and RSVP through website instead of external applications
-
Option for users to give feedback through the app, to create a more welcoming community and show NGO what users want to donate towards.
11-Takeaways
-
Conduct more/frequent forms of user testing and feedback to uncover more pain points and usability issues throughout design process.
-
Use Of Colour was very important in this design as there a many calls to action and small summaries of information, colours help to group related information and ensure buttons stood out
-
Responsive Web Designs are a necessity in modern website design and as this site is targeted at a younger demographic it was crucial the mobile design worked well