Quest

 
Equals Collective • User Research • UX/UI • Branding
Lead the Research and UX/UI of the project
Quest-cover.png
Above/ Silver award homepage & Objectives for Bronze - Working with others.

The Brief

One of Equals Collective's clients came to us with a fantastic idea. They wanted to make an accreditation tool where young people could gain employability skills through volunteering. Always up for a challenge, we put our thinking caps on and got to work on how we could realise this idea, and the feasibility of it.

It was decided that the client would partner to get funding to build the product, therefore we needed to provide a prototype for them to go out and test with volunteers as a proof of concept.

Within 2 months we were able to realise an idea into a fully functioning prototype for them to get more investment for the product. It's been a huge success and volunteers have already completed the accreditation with certifications to take to employers.

 

"

The value this (app) will have added to the process is unmeasurable - and starting from scratch with the test users was also very interesting... the test users weren't even presented with an initial concept, they were heavily involved in creating that too!"

Above/ Previous web & mobile design 2018-19
Above/ Volunteers receiving their certificates for completing the accreditation.
 

Research

The project started with an in-depth kickoff workshop around how this app would support young people and their employability skills. There was an existing tool out there for volunteers to complete accreditations, but it was difficult to use. The client was clear to us on the emphasis they wanted to put on gamification in the app, and how important this was to get right.

As one of the first steps, they gave us a rough idea of what they wanted within the app, we took a step back and refined these flows to put more of an emphasis on the awards (bronze, silver, gold) and how the user could easily achieve this through a set of well-defined steps.

Behavioral Archetype-Quest.png
Above/ Behavioural Archetype based on the volunteers that were already doing the accreditation
Current vs. Proposed flows.png
Above/ Current and proposed flows - reworking the structure of the initial idea.
 

Workshops

From the very start of the project, we were keen to run a series of workshops and focus groups. 3 focus groups were held in total at each stage of the process from initial ideas all the way through to testing a beta product, as well as interim sessions to review branding.

A key part of this project was how important it was to get the volunteers involved in creating the application, so they were more engaged and wanted to share it with their friends. The focus groups were a huge success and were run with myself as the facilitator and Groop there for support as well as guiding the individuals to help them set up their computers.

Focus group (1).png
Above/ Focus group notes of feedback from volunteers
Focus group (2).png
 

Gamification

Before developing the wireframes for the app, we did extensive research into gamification and how we could employ techniques within the app to help make the application come to life. It was clear that this was an educational tool, rather than a fun game. Therefore gamification was the perfect tool to bring it to life, using bright colours throughout really gave it a fun, playful feel - one where peers felt like they enjoyed using the app.

Initial moodboard-Quest.png
Above/ Moodboard to show the client the kind of gamification techniques we would use within the app.
Map (1).png
Map (2).png
Above/ The map first (left) vs. last (right) revision for the homepage to navigate through the award. We went over 20 revisions of this!
silver-award-phone.png
silver-award-popup.png
Profile-Quest-phone.png
Above/ Silver award, popup for achievement and users profile with certificates for completing awards.
 

Badges

A key part of the app was to design badges for each award and learning outcome within the accreditation. The client presented the volunteers with an idea of what type of badges were required and we received sketches back from the volunteers. Using this as inspiration, I worked with our visual design team to come up with the below badges for the app. Working closely together with the visual design team, we created a series of badges for each learning outcome within the accreditation.

Badges-ideas.png
Quest-Badges.jpg
Above/ Award badges, along with some of the learning outcome badges.
Position
Lead designer
Company
Equals Collective
Responsibilities
User experience
Research
Workshops
Focus groups
Wireframing
Visual UI designs
 
Date
Aug 2019
Project
UX/UI design