Vocational Institution Website Design and Build

Techniques

4 day design sprint

Important activities included are: 

- How might we session

- Seeing comparable problems being solved

- Sketching 

- Stitching the homepage as a group.

Before the sprint, me and my UX colleagues had an interview with the HBTDC Operations Manager to learn more about the company and its goals. 

Client

Hayle Barise Technical Development Centre

Roles

UX/UI Designer, Website Builder

Task

Hayle Barise Technical Development Centre (HBTDC) needed a readily available space to show potential students and donors about their service. This project came to me after they had already attempted to create a website but didn't get far. 

I worked with their Operations Manager and a team of designers from my network to complete a design sprint lasting 4 days. 

HBTDC is a vocational school training school leavers to become electricians, masons and construction workers etc. They carry out internships for the students and liaise with other organisations to carry them out.

Tools

Invision freehand 

Pen 

Paper 

Adobe XD 

Wix website builder


 

Result 

HBTDC now directs people who enquire about the school to an online space instead of spending their own energy to show previous events or completed projects. This is beneficial for international donors trying to learn about the school before starting their funding process. 

Students now have a clear explanation of what the courses available offers. Partly solving a people problem where there is a high unemployment rate especially in those individuals who are school leavers.

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 prior to the establishment of HBTDC. After after two academic years of running its training programs and building strong connections with organisations such as local government and Coca Cola factories. HBTDC are focussed 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 actually helps the community excel.

Business Need

HBTDC needs to become sustainable. Currently the project is not-for-profit but funds are running low.  Due to COVID-19 in 2020, less international donors are available. Therefore they need to increase exposure. 

HBTDC students graduation 2019

Design Sprint!

This project involved myself (of course) 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/UI 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. Instead, this helped us visualise the problem space which was useful as a reminder. 

Domain model for this project.

Define phase

By creating a Persona and as previously mentioned a Domain Model (see above). We were able to visualise our research and help us focus on our main user who were students. 

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 thats what made me gravitate to my postgraduate university.

I thought the homepage should include: a 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 for be for students and a place of wonder for donors. So that lead 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 to 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. 

Validation and future work

To validate our design we need to conduct a usability test with users. We need 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 need be. However due to time differences (between the UK and Somalia) and members in my team being busy with other projects/jobs this is always going to be extremely hard to do. The website is also waiting for a Somali writer to convert the site from English to Somali for who those who can't read the site in English. 

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 

- scavenger hunt for a task, to uncover usability problems in the user journey

- gather satisfaction data such as asking if 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 :)

                                                                                         Mobile 07947090631                                                                                                 LinkedIn /in/amiuxuics/

                                                                            Email amiuxuics@gmail.com

                                                                                                         Aminul I. ©