ISSY

How can we ease out the process for organisations and volunteers to offer and find volunteer work to make it more accessible?

Year

Role

Client

Dutchwork

Appstore

iOSAndroid

Problem

ISSY is created out of a request from "Voedselbanken Nederland". The request was to ensure that volunteer work at Voedselbanken Nederland would become more accessible and the recruitment process would become easier. A requirement for this request was that this solution should also be open to other organisations who would like to find new volunteers this way.

The current way of recruiting volunteers is in most cases via a regular recruitment procedure. One has to register and in many cases, it involves filling a vacancy for the long term. ISSY sees the market differently. With ISSY, we also want to get people on board who only have a few hours in the short term. For example, a long-term vacancy can also be separated into several small jobs. A frequently recurring sentence was "lowering the threshold of finding volunteers". Not only the application process but also the process of signing up for the app and making your first steps in volunteering, therefore, had to be easy and fast.

Issy had to be available for Android and iOS, with 1 style that would work on both. Dutchwork hired me to take care of the UX and UI part of the app.

My role

When I joined this project the research and branding was already done by Dutchwork. Furthermore they had already created a document with the business goals, technical specifications, and feature requirements. They had a good idea of which way they wanted the app to go, but needed someone to put the dots together, visual the idea and make a good product out of it. That's where I came in.

Product

Since I didn't join this process from the start I first needed to catch up with them and make sure we where on the same page. After the first meeting, briefing and brainstorm session I started with my design process based on all the information that was given to me.

Wireflow

The first step in my design process was to make a wireflow of the main user journey of the app. The goal of this flow was to make sure I understood the briefing correctly so that Dutchwork and I were on the same page regarding how the product would work and how the user would succeed in the primary goal, which is finding volunteering work. This flow was deliberately made out of basic reusable wireframe components. I've chosen for this approach for its speed and to make sure we wouldn't dive in the details too soon but to focus on how a user would walk through the app from registration to completing the first volunteer job.

Image of the registration wireflow.
Wireflow from registration to reviewing your first finished volunteer job .

Design

After getting the green light on the wireflow I started with sketching the wireframes of several screens. I like to sketch these on paper as it's easy to make quick iterations and it avoids me getting into the details early in the process. After this, I started working in Sketch in combination with Abstract for the digital design process.

As this was a remote project there was a lot of digital communication during the design process. As the clients didn’t work on a mac to view the files in Abstract I used Dropbox to show them the screens. Every time I had screens that needed reviewing I made a new folder and placed the screens in there. This did work fine, however, for following projects I would rather use a tool like Invision or perhaps design everything in Figma where a client can easily review the files without needing to export them to any other service.

Registration process

As with every product that requires registration, it's always a goal to keep the registration process as easy as possible to get a high conversion rate. For Issy, this wasn't any different. For a complete profile, the user would need to fill in a lot of input fields. This would obviously be bad for the conversion rate, so we set out to ask the bare minimum which would be required to be able to search for your first volunteer job. After completing this, the user would get an empty state profile screen where they could choose for themselves if they want to complete their profile or rather search for volunteer work right away.

Welkom scherm Contask
The registration process of Issy

Volunteer job postings overview

For the jobs overview screen, I initially designed several layouts with bigger cards for the jobs. These cards would have been page wide and varied in length. I went for these bigger cards to avoid a partially empty screen at launch if the amount of posted jobs would have been low.  A negative outcome of this partially empty screen would have been an app that looked inactive and possibly scared users away. However, the client preferred a future proof solution in case there where a lot of job postings, so we decided to move forward with the cards the cards you currently see in the design above.

Image of card layout 1
Card layout 1
Image of card layout 2
Card layout 2
Image of the final card card layout
Final design
Iphone with job detail screen

Job Detail screen

The detail screen got everything you need to know about the job.

  • The basic information about the organisation and where and when the job is taking place.
  • A small explanation text about the job and why they need volunteers for it.
  • Every bit of information that helps you figure out if the job is right for you and if you can help them with it. Information such as solo or group work, heavy or light labor, level of expertise etc. You could compare this information with the LinkedIn skills functionality that gives you insights if you are the right fit for the job or not.
  • Ending with a CTA where you decide if you are interested.

Other screens

Of course, the app is much bigger than this, but I won't go into depth on every screen because than it would become an extremely long read. Furthermore, the app consisted of the following functionalities:

Flows

I love visualising the product with flows because it gives everyone a good visual overview of how the product looks like and works. Prototypes are great to get a good feeling of how you could use a product, but these flows are easier to guide a client through the designs, show how everything is connected and discuss possible pain points. Once we worked out all the possible flows within the product I like to update these flows regularly when I want to update the client about the progress.

Welkom scherm Contask
Onboarding flow of Issy
Welkom scherm Contask
Matching flow for organisations

Learnings

With every project you learn stuff, no matter how smooth it goes, there are always things to learn from projects. That was no different for me, so here are a few things I learned from making Issy.

Contact:

Mail me at: hello@ronschrama.com
Or you can find me on social media: