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.
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.
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.
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.
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.
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.
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.
The detail screen got everything you need to know about the job.
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:
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.
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.
Set up the right tool environment from the start.
As this was my first remote job there was a lot to figure out. One of those things was finding the right tools to smooth out the communication and feedback loop. For this project, I worked with Sketch/Abstract for designing and using tools as Dropbox/Dropbox paper for feedback and file sharing. It worked okay, but not as smooth as I wished for. I didn't use Invision for file sharing and commenting which made getting feedback a bit harder. If you asked me what tools I would use now, I would use Figma, Figma is the ideal design tool for this. Regardless of OS everyone can access it, see the designs, put comments on the design details and export assets. Only back than Figma didn't have styles yet so I didn't use it to avoid inconsistencies in the design.
Always be a part of user testing
It was a smaller budget project so we only tested at the end of the design phase, and as I was working remotely for this project I wasn't part of the user testing. Looking back I should have traveled to the company on test days to be there on the days they went testing. You get so many insights on user testing, something I do know from previous experiences but somehow was too busy with the work combined with working remotely that I forgot about the importance of it.