Vocational Institution Website Design and Build
Overview
Business - Hayle Barise Technical Development Centre (HBTDC)
Role - Lead UX Designer (freelance)
Problem
HBTDC trains school-leavers to become electricians, masons and construction workers etc. HBTDC needed to show potential students and donors about their services online.
Teammates
-
HBTDC's Operations Manager
-
3 UX designers.
Result
HBTDC has gained more exposure going online. The site gives a good amount of information to international donors trying to learn about the school before starting their funding process.
Students now have a clear explanation of what the courses available offer. The information allows the high amount of unemployed Somalis to learn about new opportunities.
HBTDC logo and the school's entrance.
Design process for the project.
Courses page on old HBTDC site.
News page on old HBTDC site.
Courses page on old HBTDC site.
Screenshots from the old website for reference. HBTDC had attempted to create a website themselves.
The people problems we were trying to solve...
We wanted to encourage the unemployed youth of Mogadishu to come and train at HBTDC and start a career.
HBTDC also needed to showcase their achievements to Donors to aid raising funds.
How do we know this is a real problem?
"Following the civil war, Somalia has been working towards sustainable development. Subsequent to the war, Somalia suffered from a lack of political presence, which meant that systems such as education were left damaged. The lack of structure between 1991-2012 meant that many youths were left with little to no skills, which was detrimental to living standards".
HBTDC Operations Manager
How will we know if we've solved this problem?
When visitors come to the website and become motivated to learn more about the institution. Leading to contact with the centre's staff for an admission application or donation.
Empowering young Somalis in Mogadishu, Somalia
The importance of technical training in Mogadishu, Somalia was overlooked before the establishment of HBTDC. After two academic years of running its training programs and building strong connections with organisations such as local government and Coca Cola factories. HBTDC were focused on increasing awareness of its centre further within the Somali community. They advocate on behalf of the disadvantaged youths and female inclusion in their centre through workshops but also wanted an online space.
Students from HBTDC
People Problem statement
"I want to see an organisation willing to help the community of Mogadishu with their employability prospects"
User Need
Unemployed Somalis and donors need to see a trusted technical training centre in Mogadishu. They want to spend their time with an institution that helps the community excel.
Business Need
HBTDC wanted to become sustainable. At the time, the project was not-for-profit but funds were running low. Due to COVID-19 in 2020, fewer international donors were available. Therefore they needed to increase exposure online.
.jpg)
HBTDC students graduation 2019
Design Sprint!
This project involved myself and colleagues from my network working with HBTDC's Operations Manager. We all had busy schedules involving other projects and we could not dedicate so much time to work together.
HBTDC wanted us to design, prototype and test ideas and I decided a Design Sprint will help us get through this. Design Sprints aim to reduce risk in a rapid environment.
Sprint team:
Facilitator - me!
Decider - HBTDC Operations Manager
3 UX Designers
Google - Design Sprint process
Discover phase
Before completing the Sprint, we all sat together and spoke about what the project entails. This involved asking the HBTDC Operations Manager questions such as 'Who are we designing for?', 'What problem are we solving?, and 'Why are we solving this problem'.
We learned about the business and what it does but more importantly, we learned that we are motivating the unemployed youth of Somalia. And indirectly looking for support from international donors. Previously donations have come from Ethiopia and Norway embassy funds.
I also ran a quick Domain Model exercise to learn about what information the website may need. This helped us visualise the problem space which was useful as a design artefact.
Domain model for this project.
Define phase
By creating a Persona too and as previously mentioned a Domain Model (see above). We were able to visualise our research and help us focus on our main users who was students. This simply works as a reminder for the team for who one of our main users were.
Student Persona for this project.
Develop phase - Day 1
On the first day of our sprint we:
- discussed the long term goal of this project, how the website can help HBTDC become sustainable
- listed Sprint questions
- created a map (i.e user journey) that users of the site will potentially go through
- completed a How Might We exercise
- made a decision on what page from the map and sprint questions to focus on
Through dot-voting we agreed:
- our sprint focus, 'will donors and students be able to trust the centre with their money and time respectively'
- focussing on the homepage, then working on other pages individually
- we discussed topics like how might we 'make a hybrid website' (for both audiences) and 'solve social issues'.
Our work and dot-voting.
Develop phase - Day 2
On the second day of our sprint we did:
- Lightning Talks - presenting similar solutions to our problem from other domains to each other
- sketching - we presented our ideas of what the homepage should include to each other
- voting on components we felt were most relevant to our Sprint and using them in our product
For my Lightning Talk, I gave examples of homepages mostly from colleges in London, UK. I liked the idea of showing stats, sponsors and 'wholesome' content for the user. Personally, that's what made me gravitate to my postgraduate university.
I thought the homepage should include: hero image links to popular courses, pages for our two audiences, about us section, news, media and a sponsor ribbon. I felt these components were the most relevant to our users as they're common components.
We voted to use components such as:
- maps
- course cards
- a news section
This day involved the Decider working with us. They had the final say on components. One big change they made was changing the tone of our product for donors. That is to not call them explicitly at all. The website should only be for students and a place of wonder for donors. So that leads to the exclusion of some components.
My Lightning Talks pics, sketches and dot-voting for day 2.
Develop and Deliver phase - Day 3 and 4
On the third day we used Adobe XD to stitch together our prototype and then showed it to the Operations Manager. There were changes to make and they were done by the group rapidly. We also iterated the designs many times. We completed the homepage first then other pages individually (i.e courses pages and news pages).
On day 4 we made the site using Wix Website builder. The site allows prospectus students to:
- learn more about HBTDC
- know HBTDC's whereabouts
- courses on offer
- why study at HBTDC
- read news
- watch videos about HBTDC
- read student testimonials
- see sponsors
- make contact with the centre
Adobe XD and shots from the website.
How to validate the work?
To validate our design we needed to conduct a usability test with users. We needed feedback and insight from people likely to be our students in Somalia, i.e our Persona. Then this will let us iterate the product again if. However due to time differences (between the UK and Somalia) and members in my team being busy with other projects/jobs, this was always going to be extremely hard to do.
We are unable to predict the success of this product. However, we feel we've designed to meet the criteria under 'How will we know if we've solved this problem?'.
A draft plan for a usability test can be:
- aim - to see if people can find HBTDC's site
- a scavenger hunt for a task, to uncover usability problems in the user journey
- gather satisfaction data such as asking if the information is sufficient and if they would apply/donate to the centre
- testing with 5 users.
This is a non-transactional website and KPIs etc are not so relevant to this project (see popular GDS guidance https://www.gov.uk/service-manual/measuring-success/usability-benchmarking-a-website-or-whole-service).
Our final site screens :)