Directory of Services

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.

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.

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.

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.

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.

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.

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.

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.

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. 

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.

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.