The Brilliant Club: Re-designing a user friendly educational platform
Overview:
The Brilliant Club (TBC) is a UK non-profit organisation that helps underrepresented students access universities. I was brought in to design their website for a funding pitch, and was later re-hired in October 2021 to redesign their educational website.
Problem statement:
How can we keep students engaged in our program to improve their chances of getting into a top university?
Users and audience:
There are four types of user:
- A younger pupil (11–14 years)
- An older pupil (15–17 years)
- A tutor
- A teacher
Roles and responsibilities:
The team was composed of:
- A front-end developer
- A back-end developer
- The head of digital
- A project manager
I was in charge of the UX/UI design.
The scope:
The scope was to build a more inclusive and mobile-first version of the TBC’s pupil-facing educational platform. It needed to be:
- Light (to avoid using too much data);
- Mobile-first, and
- Engaging (to entice the users to finish the program with a gamification approach).
Mid-project, budget constraints forced us to change our scope. Our solution was to create an MVP to improve the platform for both students and tutors.
The process:
1. UX Design: Research Analysis and Persona Creation Sessions
o kickstart the process, I began by exploring the findings from previously conducted research. I wanted to understand the user’s needs, pain points, and business goals.
During the initial sessions, I worked with the rest of the team and a group of stakeholders from the organization. Together, we conducted a workshop to create profiles for our archetypal users, resulting in four personas: two for pupils (one younger and one older), and one each for a tutor and a teacher.
With a better understanding of the users and their needs, as well as the TBC’s existing Virtual Learning Environment (VLE), I began to compile a board of the original VLE’s user flows. Additionally, I incorporated user flows from similar educational platforms in order to gain a more comprehensive perspective of the task at hand.
2. UI Design and Design System Creation
TBC lacked a design system when I joined the project. With the approval of the Head of Digital, I created a design system using Figma that established a unified language. This made scalability and consistency easier for future iterations.
View the style guide I created at zeroheight.com.
The Brilliant Club Design System
3. Interaction design
I created 21 user flows in Figma, nine of which were for mobile and the rest for desktop. To aid in user testing, I also wrote the proposal and scripts for the interactions. This allowed me to anticipate potential issues that testers might encounter when trying out the prototypes.
Although it was a time-consuming task, taking many hours to complete, I wanted to ensure that everything was done correctly. We had limited time and finding testers was difficult, so it was important to get it right the first time.
4. User testing
For Tutors:
Goal: To uncover usability issues encountered by tutors when using the new VLE prototype on desktop.
Tasks to perform:
- Message pupils and placement groups
- Mark assignments
- Complete tutorial registers and provide feedback on tutorial to teachers
- Upload useful documents
For Pupils:
Goal: To uncover usability issues encountered by pupils when using the new VLE prototype on mobile.
Tasks to perform:
- Message their tutor
- Submit assignments
- View tutorial times and join online tutorials
- Download useful documents
Analysis of findings and recommendations
Feedback was given on CTA design and positioning. To improve task understanding, it was agreed that a content designer was needed to review microcopy and button text.
Quotes from the user testing sessions
Positive:
‘It all feels that everything is where you would expected it to be’ — Karina
‘Very straightforward’ — Juliette
‘I like that you can pop it (Messenger — the chat function) out into a bigger screen’ — Eva
Room for improvement:
‘I was expecting a text indicating that there is “All” in the attendance checklist’ — Claudia
‘It took me a minute to spot the tab’ — Juliette
Outcomes and lessons learned
I am pleased with the outcome of the project, as I delivered more than was expected. User testing feedback was overwhelmingly positive and the prototype was well received.
TBC gave me the freedom to lead the direction of the UX/UI design, allowing me to contribute in a meaningful way.
Currently, a Content Designer and developers are working on the project. The VLE is set to launch by the end of June 2022.
Feedback from users and stakeholders has been very positive so far.
Things that I would do better next time
Perspective Grid
To better understand the customer’s goals and barriers, I should have held a workshop or created a collaborative perspective grid. This would have provided me with the necessary information to map the customer journey in a more concrete way. Without this step, communication was hindered, and I had to work extra hard to explain certain aspects of usability.
Documenting Design Decisions
In the future, I need to document design decisions in a more structured way so that I can explain to stakeholders why I chose one thing over another. One of my weaknesses is that I work intuitively, and I need to make these decisions more consciously. This makes explaining my process to others difficult at times. I am working on this aspect.
Agreeing on Ownership of the User Testing
When my contract was ending, the client mentioned running the user testing without my assistance. However, their plan didn’t seem very effective to me. I knew I had to offer my help to ensure the best possible outcome. So I proposed some revisions, which took quite a lot of time.
Feedback after implementation
This information was added in February 2023
“I have to say that The Hub is already a huge improvement on the old VLE. The students certainly seem to be coping with it much better.I have worked through many different versions of the VLE/Hub and this one seems very intuitive and easy to use.” (Tutor)
“ It is really easy to use and i think it is laid out so that everything is really easy to access ” (Pupil)
“ The hub seems accessible and it is laid out well in useful manner…linking back to what I said earlier, empowers the user. Overall, it is very well laid out and it is amazingly useful.” (Pupil)
