About the Project

Our group proposed the re-designing of a not-for-profit organization’s webpage. We selected the redesign of Roger Neilson House, a palliative care facility in Ottawa, Ontario, Canada. Our initial evaluation was that the site required branding overhauls, UI assistance and readability. 
Type: Bootcamp group project

Problem

The problems we faced are mostly about readability and finding useful content about the organization itself.
We put ourself in the shoes of a user trying to apply to a volunteer position and filling up forms.

Solution

Revising the navigation bar, adding a visible “about us” section to enhance clarity about the organization itself.
Redesign the volunteer application process to make it easier for the user to apply. (step-by-step forms and possibility to save

Tools

  • Figma
  • Google Drive
  • Trello

Team

  • 4 UX/UI designers
  • 1 Project manager

My Role

  • UX research
  • UI design

Timeline

  • 3 weeks

User Research

Heuristic
Evaluation
User Interviews
and insights

Definition & Ideation

User Insight
and problem statement
User Journey Map

Prototyping

Wireframes
Ui Design
Hi-Fi Prototype

Heuristic Evaluation

For redesign the existing website it was important to define the elements that need to changed.

The Heuristic evaluation of the homepage revealed that:

  • Pictures are distorted and low quality.
  • The contact information appears to be disorganized
  • and erratic.
  • The page itself is unnecessarily long. 

Usability:

  • Font should be larger to meet accessibility standards  in the navigation bar and page contents.
  • Some form of help button or feature  would increase usability. 

User Interviews…

  • From your perspective, what makes an application process easy?
  • (In general) What are some factors you consider before applying?
  • How much time do you expect to spend when applying for something?
  • What is your biggest frustration in the application process?
  • Have you ever faced any challenges with the application or registration process for volunteer opportunities? If yes please explain.
  • Are there any features or functionalities of volunteer websites that you find particularly useful or innovative? Please explain.

…and interviews insights

The volunteer application process has been redesigned to maximize a positive user experience. We’ve observed that users are less likely to complete the application process if required to re-enter information. How might we save a user’s information to make the application process less redundant? 
We will measure the level of success by an increased volume of applications and time spent on the task.

User Insight

Volunteers needs to have a way to save information as they go about the volunteer application process because having to re-enter information discourage them from completing the volunteer application process.  

Problem Statement

The volunteer application process has been redesigned to maximize a positive user experience. We’ve observed that users are less likely to complete the application process if required to re-enter information. How might we save a user’s information to make the application process less redundant? 
We will measure the level of success by an increased volume of applications and time spent on the task.

Wireframes

Wireframes

Using Figma, we translated the first sketches into low-fidelity wireframes. At this stage, the wireframes were defined enough for some user testing. Based on 5 tests, we’ve made a few alternations and moved on to creating high-fidelity prototypes.How much time do you expect to spend when applying for something?What is your biggest frustration in the application process?

UI Design

The UI was designed around some of the comments of our early interviews: potential users would enjoy bright colours, readable text and a combination of imagery both from stock and amatour from families, volunteers and community events. For the colour palette we chose an energetic orange, to call for action and turquoise recalling a calming and safe environment.

Next steps

With a timeline of only 3 weeks we had to give up
to several features that need an implementation.

Iterate high contrast
and larger font modes for accessibility increased legibility

Contact Us Form

Hero banner carousel

Add French icon
on navigation bar

Learnings

The project was an eye opener for our group and I’m glad we worked well together. We really understood where our single strengths were and we organically leaned to the parts of the process we were better at. I was personally tending towards the story telling part, to really understand our users and their pain points. Then the initial wireframes and the UI design.
I’ve also learned to don’t get attached to any solution or design because there is always room for improvement.

Want to read more about this case study?