HubL Prototype

Sync the City 2023 – People's Choice Winner

Lead UX & UI Designer

Working against the clock to design and realise a start-up in 54 hours, I joined team HubL in which I designed and prototyped a mobile website in Figma, with a translated version designed for the Dari language which was demonstrated on stage during the final pitches.

The Problem

Currently, when migrants arrive in the United Kingdom, many of them struggle to find an English class that is suitable for them as there is no centralised hub to assess their proficiency level, and direct them to an appropriate ESOL (English for Speakers of Other Languages) class.

To be accepted into a class, migrants must first be assessed. However, booking assessments currently relies on word of mouth and the swapping of contact details, causing long waiting lists due to assessors being unequally booked up, leading to under-filled classes. HubL aims to solve this.

Research Insights

Our team attended an ESOL class and spoke to 20 students about their experiences, the majority of whom had all faced some variation of the same poor experience. One student had a particularly arduous experience:

"I had to wait for three years before getting a class, was assessed multiple times… and even filled out the same form three times, in English!"

At the time of our research, there were at least 200 people in Norwich on waiting lists for assessments.  This causes increased anxiety and isolation, slowing social integration and hindering employment prospects.

Audience

During the design process for HubL it was important to consider user experience at all times, and ensure we were designing from a user centric approach. The primary persona for HubL would be quite specific with little change between users. Some of the key factors to consider were:

Device Accessibility

Most migrants do not have access to a laptop. Migrants seeking English classes would do so from a mobile device, as it is their main and often only way of communication.

Platform & Format

Due to financial circumstances, many migrants use either Android smartphones or older Apple iPhones. Due to the lack of one majority device type or software platform, it became clear early on that a mobile website would be the most suitable option. A mobile app would be unsuitable to lack of guaranteed access to an app store, varying platforms and app marketplaces, and limitations of older software versions.

Language

The native language spoken by any given migrant varies significantly, and is often limited to only that language. It was important to consider how the user would access and use the platform in their native language and how this personalisation would be applied.

Low Fidelity Prototypes

We imagined the core interface of HubL to be very simple and straightforward. It didn’t need to be complicated, it just needed to be effective.

But the challenge was condensing a typically bland booking flow into something as clear and concise as possible, relying on no assumed user knowledge of user interfaces or booking flows. It started with a prototype of these four main screens.

High Fidelity & Brand

Given the extremely fast paced nature of the event, there was unfortunately no time for real-user testing or feedback.

However, team discussions were had about the brand’s identity and name, enabling work to begin on high fidelity designs.

A warm, friendly and calming palette of a peach and vibrant blue were chosen to represent the brand - with blue being recognised by many organisations as a symbol of hope for refugees.

The typeface Karla was chosen for its friendly but sensitive appearance, and with Noto Sans used for languages with alphabets not available in Karla. Material symbols were chosen for their versatility and suitability for the web.

The Pitches

On Day 3 of the event, the design and development team pitched the Minimum Viable Product to the panel of judges. I demonstrated the prototyped website using Figma Mirror to communicate the website’s functionality clearly to the judges.

This was a highly valuable opportunity to showcase my work on a project I am very proud of to industry professionals in a range of backgrounds. The experience taught me skills I will and have continued to use in the future beyond Sync the City.

The Final Presentation

Later in the evening, Nicky, our wonderful team leader who pitched the idea to all of us at the beginning, presented our idea to the audience and judges, featuring mockups of the design I had worked on.

The pitch can be watched on YouTube here.

Use the Dari PrototypeUse the English PrototypeUse the Assessor Portal Prototype
Project Summary & Evaluation

Sync the City 2023 was an incredible experience to be part of, and I am proud to be continuing to work with team HubL today to turn our prototype into a reality. Independently designing the UI & UX for a prototype that won the People’s Choice Award, and playing a large role in visualising a concept that our team leader Nicky had envisioned for many years, was a very rewarding and unforgettable experience.

The experience taught me how to work better under a whole new level of pressure, how to communicate efficiently and effectively in a fast paced environment with new people, and also provided opportunities to work with software developers and researchers, both vital in the UX process. The wealth of skills I attained during the event will continue to support my engagement with industry and boost my university experience.

© James Hopper 2025