Scotia Youth
A UX approach to the web homepage design
Introduction
Scotia Youth is a new charity organisation, committed to providing fresh and inspiring youth work to young people aged 11 to 25 years old across Scotland. They were planning to set up a website to raise their brand profile and gather people’s interest in the work that they’ll be doing (see the design brief below). I volunteered my skills for web homepage design. However, at the time of starting this project, most of the work was at the early stages of planning and preparation. The picture of the intended user groups’ needs remained unclear. There was no web-ready content developed, only a logo and a guidebook provided. Nonetheless, they opened a temporary page on Wix and started tweets on Twitter. Crafting the visuals and UI elements to communicate with the intended user groups who are under-defined became the main challenge.
Design process
Exploration
Scotia Youth is a new charity organisation dedicated to providing fresh and inspiring youth work to young people aged 11 to 25 years old across Scotland. They were planning to build up a website for raising their brand profile and gather people’s interest in the work that they’ll be doing (see the design brief below). I volunteered my skills for designing a homepage. However, at the time of starting this project, most of the work was actually at the early stages of planning and preparation. The picture of the intended user groups’ needs remained unclear. There was no web-ready content developed, only a logo and a guidebook provided. Nonetheless, they opened a temporary page on Wix and started tweets on Twitter. Crafting the visuals and UI elements to communicate with the intended user groups who are under-defined became the main challenge.
To design a homepage that can effectively engage the intended audience (i.e., young people, potential volunteers, and donors), I did some research on the following issues to help me better understand the user’s needs and website design practices for the youth work charity sector
- 5Young people’s motivation and needs to visit a youth charity website
- 5The youth charities volunteers’ persona
- 5The charity donor attitudes and personas
- 5The charity website design tips and practices
Definition
After some initial research on a youth charity sector and personas, I tried to define the overall UX, personas, and content strategy for Scotia Youth website.
Set a vision (UX strategy)
As a new organisation, the primary goal of the Scotia Youth website will be aimed to raise its brand profile and increase target user groups’ interest in their programmes. Therefore, the homepage design will be crafted around this goal.
Create fictional personas
Based on the research on the Internet, I developed three primary personas – Carrie, Charlie, and David. Although they are built upon the secondary research findings, they help me better relate to the users’ need for a charity organisation.
Content planning
With primary personas defined, I created a list of the ideal website content and features to meet the needs of each persona (i.e., Carrie, Charlie, and David)
- 5Carrie (young people): apprenticeship scheme, employability, and skills; participants stories - how their life would change for the better with Scotia Youth’s programmes
- 5Charlie (volunteer): volunteer stories - stories about a volunteer who delivers the support services of the charity; volunteer benefits; volunteering opportunities
- 5David (donator): why gives donations to Scotia Youth, the information for them to see how young people can truly benefit from his donations
After the features for each persona were identified, I reviewed Scotia Youth’s publication for online content. I outlined the website information structure in GlooMaps (see the image below), and list out the components for each page and the homepage (e.g., navigation and footer, slider images, some highlighted features from subpages for each persona, CTAs, and social links).
Carrie (Young people)
Age: 18 years
Location: Edinburgh
Occupation: First-year design student
GOALS
Carrie would like to work for a creative advertising agency when she finishes her qualification. She knows she would need to stand out in this competitive space and have a portfolio that goes beyond just his university assignments. She’s looking for flexible opportunities to work on design projects in and around Edinburgh.
CHALLENGES
Although there are many businesses in Edinburgh that Carrie could apply to get some experience at, she is apprehensive at cold calling them. She would prefer to know if they had work experience or internships available and then apply. Ideally, she would like one site that would give her all that information and, even better, if they could match her to appropriate opportunities.
USE CASE
As a young student, I want to gain more experience and skills so that I will have better employability in the future.
Charlie (Volunteers)
Age: 22 years
Location: Edinburgh
Occupation: Graduate
GOALS
Charlie recently finished his undergraduate study in journalism and is planning to develop a career in the media. He is very keen on taking photography and travelling. He has a long term goal to work as a travelling photographer for the big media.
CHALLENGES
Although he has some training in content writing, he does not have enough contacts for discovering stories. He is now looking for volunteer opportunities that can help him expand the network and meet more new friends. He hopes that his involvement in charitable organisations may someday improve his chances of finding paid employment.
USE CASE
As a person seeking a position in the media, he wants to meet new people so that he can expand his network, discover more stories and improve his employment prospects
David (Donors)
Age: 50 years
Location: Edinburgh
Occupation: Small business owner
GOALS
David is a busy business owner. He doesn’t have time to volunteer, but is willing to give 5% of his income to charity. He likes to feel in control of making an impact on the community and the surrounding place.
CHALLENGES
Although he is able to give, he is not sure what charities around his living place and how his donations will be spent. He wants to give money to the organisation that shares the same value.
USE CASE
As a father of two teenage children, he feels a strong emotional connection to make a difference in young people’s life so that he can pass down philanthropic values to his children.
Ideation
I then sketched out some ideas for laying out the features and navigation on each page. As the design will run on Wix or other platforms, I focused on the layout design that can easily be implemented with no-code website builder.
Wireframing
When communicating with the organisation, I use an online wireframing tool (Marvels) to show how to arrange the information onto each page and how the elements on the homepage will be related to other pages. The organisation can add notes or feedback to the wireframes in Marvels.
Visual design
After identifying how to arrange the information on the pages, I focused on the visual aspects of the homepage design. I first reviewed the look of the websites that Scotia Youth likes. I put the screenshots of those websites’ homepage in InVision’s mood board alongside Scotia Youth’s publication (see the screenshot below). I asked my friends what words they could best describe the look of those homepage designs. I got descriptive words like ATTRACTIVE, VIBRANT, TRUSTWORTHY.
I then worked in Photoshop, crafting a visual language in the hope to evoke a similar feeling. Also, I followed the organisation colour scheme – royal blue and white – to form brand identity and shape the information hierarchy (see the screenshot below).
Design validation and revision
I then did a quick informal test with friends in order to see if my design can effectively convey what the site is about and to understand how the overall look of the homepage is perceived. The process was executed as follows.
Research method: 5 second test
- Show the homepage mockup on a desktop to the viewer for 5 seconds
- Ask questions: can you recall the name of this website? What do you think this site was about?
- Ask the viewer to select the words from a list that best describe their impressions of the design (Attractive looking, Vibrant, Trustworthy, Unexciting, Mediocre)
Research results and revisions
Based on the feedback, the design should have clearly represented the organisation as a youth-based charity, and all reviewers thought it was attractive and vibrant. However, most viewers couldn’t recall the full name of the brand, and no one selected the word ‘Trustworthy’ to describe the design. Therefore, I made little changes to increase the exposure of the brand name on the page. I also found some articles on how to improve the website’s trustworthiness. Although I learned a number of ways for improving a user’s perception of trust, such as displaying the media logos and adding social proof, I didn’t make many changes for this purpose. I think visual design alone is not enough for building a solid sense of trust for users.
Results and reflections
“…I have shown everyone at the team this and they all love it. It’s clean, representative and clearly laid out…”
— James McDonald, the operations manager of Scotia Youth
The design meets the expectation of the organisation. I didn’t continue to stay involved with the organisation after finishing the high-fidelity mock-ups. I provided a set of high-fidelity homepage mockups as well as wireframes for content pages. I hope that these can help Scotia Youth further to implement the design.
Although the design has been accepted by the organisation, it is only a vision. The UI elements were largely designed for fictional personas developed from the secondary research and my own assumptions. I use fictional personas as an initial sketch of user needs, as they allow for early involvement with potential users in the UX design process. However, the UX strategy should be developed based on direct research with the target audience. Furthermore, on reflection, it’s better to use other research methods to test main user flows before crafting a visual design for the homepage.
In short, the project gives me an opportunity to learn more about the UK charity sector and discover some great design strategies for improving online reputations and connecting with people. I gained some experience in crafting fictional personas. I very much appreciate this opportunity.