Lokesh Saini
Product Designer

Directory of Services

UX Research, Wire-framing, Visual design, Prototyping, Testing

Directory of Services
Overview

Project Description

Client: Code Your Future (CYF) + Help Refugees. CYF is a non-profit organisation supporting refugees and disadvantaged individuals with the dream of becoming. Help Refugees / Choose Love is one of the biggest charities in Europe that work with Refugees.

Challenge: Redesign the Directory of Services project, an open-source user-centric unified database of services used by different organisations to support refugees, asylum seekers and migrants in the UK. Our goal was to make it easy and efficient for caseworkers to quickly find services and share them with individuals in need.

Role:  My key responsibilities were conducting user research and testing as well as developing wireframes, mockups and prototypes. It involved collaborating with different individuals and teams in researching, designing and testing the website.

Team: We were a small team of volunteers and employees working together on different aspects of the project. I was one of the two UX designers (myself and Atle) in the team, led by the designer director (Alec) and project manager (Felix). We worked closely with developers to test and get their feedback during the process. While working on this project we also collaborated with many volunteers from different fields and backgrounds, as well as partners such as Google, Fello and others who helped us design a better solution.

Website: https://dos.staging.codeyourfuture.io/

Discover
24
Every minute, 24 people around the world are forced to flee their homes in the hope of finding safety and a better tomorrow.
1%
The UK is home to approx. 1% of the 25.9 million refugees, forcibly displaced across the world.
48%
In the UK, 48% of decisions made in the year ending September 2019 resulted in a grant of asylum or other forms of protection
£5
People seeking asylum are often living on Home Office support equivalent to just over £5 per day

Services Directory aims to be a platform where caseworkers who work with refugees and asylum seekers can find and easily share available services for refugees across the UK. The platform will be crowd-sourced whereby users can apply to become Editors and update/edit information directly.

Pre-existing insights

There was research done by the Help Refugees and Refugee Council which had Focus group, Interviews and Survey. From the research, we found some great insights about the Refugees and Asylum seekers. Their needs ranged from basic (food, water and shelter) to longer-term (integration, employment). They were also heavily dependent on the caseworkers and did not know about any of the existing apps and directories. Also, most of the caseworkers were dependent on Google search, Google groups and word of mouth to find and share services available.

Key goals

  • To meet basic needs (food, shelter, education)

  • To signpost & help clients navigate systems

  • To help their clients integrate into society, through education, employment, language.

We also found a lot of insights about what other tools were currently being used, the challenges they faced and how technology could help them. The research summary can be found here.

User interviews

Along with this research, the team also conducted our own qualitative research by interview 6 caseworkers from a range of refugee organisations. Interviewees were asked questions about their organisation, their role, day to day activities, what tools they use, how they use those tools, etc. These interviews were later summarised and used to create our user personas.

Pre-existing Solution

When we started working on the Service directory website, there was already a simple version of the website designed and developed by the CYF students as a part of a hackathon. The website worked really well and was already being used by a few organisations across the UK. Even though it was a great and very helpful tool; from a user interview session, we found about the problems the users were facing. In the user interview session, we also conducted a usability testing where 6 caseworkers from a range of refugee organisations were asked to share their views about the existing solution.

Key takeaways from the usability testing:

  1. Updates: The directory needs to be regularly updated. Updates need to be signalled in an obvious way.

  2. Location: Location of service in relation to the client should be as clear as possible when searching or filtering.

  3. Consistency: Any service information needs to be consistent in format.

  4. Search: Search should be simple and easy to use.

  5. Sharing: Caseworkers share results of the search as a printout, in email or over the phone.

  6. Experience: Overall, interviewees liked the simplicity of the design, the vision and value of the service directory in saving and creating time.

Directory of Services

Market research

We started researching similar features in other existing websites, their implementation and how well they worked. We looked at organisations working with refugees and other disadvantaged groups like RefAid, Help In Leeds, Church of England, MiCLU, A church near you; as well as a range of general websites with similar features like Airbnb, NHS website, Wikipedia, Asos, eBay, etc.

Key finding:

  • Combinations of one to three search parameters were a simple and effective way for narrowing down search results. Other search parameters were given with the search results to filter the results even further.

  • Option to view items on a map along with a list was helpful to find it's location and proximity.

  • Ability to change search parameters without going back made it quick and easy to search.

  • Some websites like Wikipedia, MiCLU showed last update status but many of the other websites like UK Gov websites, Divide, Charity Choice, etc didn't show the status.

  • Some websites allowed to share results via email form.

  • Some websites had lengthy documents about editing and some had video explanations.

Define

Prioritizing features

After researching we decided to work on four key areas of the website: Search, Results, Share and Edit. These were the primary functions performed by the caseworkers on the website.

Search: Caseworker can quickly search for a relevant service based on the client's needs and location. Navigation should be simple and easy to understand for new users.

Results: Caseworker can skim through the search results and read relevant information like service type, contact details, etc without opening the result. Results and information should be consistent across the website.

Share: Caseworker can share the relevant services with the client primarily offline but sometimes online. Clients don't need to register to view the service.

Edit: Caseworker can request to be an editor. The approved caseworker can edit existing and add new services to the directory. The caseworker can view the update status of each service.

Personas

Next, We used all of the qualitative data we gathered during the research process to create three personas. We referred to them throughout the entire product development process.

Directory of Services

User Flow

We mapped out the users’ steps to see how we could simplify their journey to help them reach their most important goals with the directory as quickly and efficiently as possible.

Directory of Services
Design

First Wire-frames

Based on our research and analysis, we started working on wire-frames. We decided to work on the search and navigation first. We had multiple brainstorming sessions along with the design firm Fello, where we sketched out navigation and different layouts. After multiple iterations we decided on two designs that we found to work best, followed by wire-frames for quick A/B testing.

Directory of Services

First wire-frames

Wireframe iteration

After the A/B testing, we found that some elements of both designs worked really well. Some of the key finding:

  • Map feature was found very helpful to quickly locate a service. 

  • The top navigation was better than side navigation.

  • In design 2, the collapsing search was found confusing and harder to navigate.

  • Selecting multiple categories for the search was very handy.

Based on the testing results, we designed another wireframe which consisted of the features that worked well in previous design as well as some new improvements. After designing the new wireframe, we did a quick usability test and it was found that the design worked really well as compared to the original design. Users were quickly able to narrow the search and locate the services. Navigation was also found to be much clearer and simple to use. It was also found that the ability to use the website without login would also be very helpful for new caseworker and also make it easy to share the services with others.

Final wire-frame prototype

High fidelity designs

Next, we started working on the search results and on-boarding experience. Again we had multiple iterations for designs and finalized on two designs each for testing. For search results, we designed a grid card list and a dashboard-style vertical list. For the on-boarding, we designed a version with direct login and another with a welcome screen for a more personalised experience. We also designed other elements of the dashboard.

Directory of Services

Search results design

Prototype

Then we combined all the final design ideas to develop two final prototypes with different layouts, onboarding styles, search results, card designs, etc for usability testing.

Design #1 prototype - Landing page first

Design #2 prototype - Results first

Test

Testing process

We started testing early in the design process. Firstly we tested the preexisting platform that was developer by CYF students with 6 caseworkers. Then we tested our first set of wireframes for A/B testing followed by another user interview session with 4 different caseworkers. Later we tested our final set of prototypes. We also conducted usability testing within the CYF team throughout the design process to get quick feedback for rapid iterations.

Usability testing #1

The first round of usability testing was conducted at the start of the design process. The preexisting version of service directory was given to 6 caseworkers from a range of refugee organisations to test and give feedback. 

Directory of Services

Usability testing #2

After the research, we designed two sets of wireframe prototype to test new layout ideas, navigation and search functionality. A usability testing session was conducted with multiple caseworkers from different refugee organisations. We got some valuable feedback with this usability session which was used to improve the design and develop a final wireframe that solved a lot of the problems caseworkers were facing.

We also conducted user interviews with 4 different caseworkers working in refugee organisations to gain more insights into the challenges they faced.

Directory of Services

Usability testing #3

The final usability testing was conducted with 7 caseworkers from various refugee organisation. The testing was conducted remotely over the Google hangouts call. We tested various features of both designs such as onboarding, navigation, search, results, sharing and editing. Key highlights of this testing were:

  • Design 1 (Landing page) was unanimously preferred to Design 2 (Results first).

  • The main highlight was a strong preference for a landing page, which after log-in includes a personalised message.

  • Search and navigation was much simpler than the previous designs.

  • Maps were highlighted as a crucial addition in every round of user testing. The split map with results was preferred over the full page map.

  • Use of pins on the map was currently found to be confusing as the correlation to the services was not clear.

  • There were some challenges with the categories about the naming convention and grouping.

  • The new results design were very intuitive, clear and easy to skim through.

  • In results, Different services by the same organisations were found to be confusing.

  • Location search was found to be very restrictive in some cases.

  • Process of becoming an editor was not clear and required more information for caseworkers requesting to become an editor.

  • Printing out the results was the most preferred way of sharing. The results needed to be better optimised for printing.

Directory of Services
Takeaway

Handover

After the third round of user testing, it was found that the project's scope had grown and CYF did not have the resources to drive adoption of the project. It was handed over to a large agency. It was saddening to let go of the project but it also made me happy that we built the foundation of the platform which will help thousands of refugees, asylum seekers and migrants.


Improvements

Due to lack of time and resources, we were not able to produce an overall functional design. Based on the user and industry feedback, three main priority areas were found that could be improved.

Version control: Keeping services up to date was most essential for the caseworkers. The directory required a better way to manage the adding and editing for the services by the growing number of editors and admins. We looked at various ways other systems like Wikipedia, Google Docs and Github manage the history and versions of the items. The services required a clear indication of the time of the last update.

Search: Comparing the new designs with the initial design, the search had improved a lot. It was much easier for caseworkers to quickly search for a service but with the new design, we had new challenges as well. Different search parameters like categories, location, distance, search keyword required to be more consistent and better regulated. A universal search like Google search was discussed which could filter results better based only on the search keywords.

Virtual rewards: Th directory was a crowdsourced directory where the caseworkers were supposed to keep the services up to date. We need them to feel encouraged and valued for making contributions. The aim is to gamify the experience for Editors and make the idea of contributing/editing as appealing as possible - looking to introduce some sort of virtual rewards for crowdsourced inputs (e.g. a ranking board of most contributions, a ‘health’ bar of how up to date the system is etc.). We want Editors to feel motivated to make contributions, to refer their friends to become Editors etc.


Learnings

Working on service directory project was an amazing experience. I was able to work with some of the most amazing people and learn a lot. The most challenging part of the experience was to work remotely for some of the design processes, especially when conducting usability testing sessions over the Google hangouts call. Also, the majority of my previous experience was designed for mobile. At many times I found myself sticking to the mobile design patterns which didn't make much sense when designing for the web.

The experience of working along with developers (CYF students) who did not have a background in software development was inspiring. It reminded me of my own journey of becoming a software developer and designer as I was mostly self-taught. It encouraged me to learn new skills and get over the imposter syndrome which held me back.