AnyTour Copy 8.jpg

1hour

Redesigning the website for an educational platform

TEAM

5-8 people

UX Research

Wireframing

UI Design

Illustrations

FIELD

YEAR

2020

DURATION

Ongoing

About 1hour

1hour matches people willing to donate their time with schools. The aim is to have them teach what they excel at in the school. This could be extremely valuable if the school doesn't offer that discipline and it could help students find out more about the professional world, perhaps helping them decide what they want to do when they grow up.

TOOLS

1hour has a mission to bring a wider education to schools and its promise is that it will only take 1 hour for you to share your knowledge.

It is a new business and for now, its main goal is to spread its word and get more people and schools to sign up.

From the very first user testings, I found that most users couldn't get 1hour's message across and they left the website unsure about what it was, which would have put them off signing up.

I had to get the message through more efficiently to prevent potential users from bouncing off after just a few seconds spent on the website.

I made the website easier to navigate and strip it of most of its copy, leaving only what was strictly necessary.

Created separate pages for schools and for volunteers/mentors so that users would find what they're looking for quickly.

To read about my design process and how I got to the final designs, scroll down

Before going into this project, I asked myself some questions

HOW CAN I IMPROVE THE CURRENT VERSION?

WHO AM I BUILDING IT FOR?

WHEN AND WHERE WILL IT BE USED?

I talked with the founder and documented how the idea developed.

I talked with people that could be interested in the idea, either on the side of volunteer or on the side of schools.

After I got my answers I went into user testings of 1hour’s current product

 

UX Audit

USER TESTING

I aimed to have the whole website tested by around 10 people, ideally by someone that could have been a possible user, whether as a volunteer or as someone representing a school.

The user testings were incredibly useful, as I had a lot of material to work on, I wrote it all down, giving every comment a score based on how easy it was to fix and how much of a priority it was.

In the pre COVID-19 life, I would have plastered a wall with post-its in different colours, mapping out a priority matrix with comments and ideas. Instead, I went digital; took screenshots of the current website and app, writing comments next to it basing the colours on the impact the change would have and the effort it would take to implement it.

To summarise... Which were the most recurring issues during user testings?

Too much copy without truly explaining what 1hour does.

The message of the website is at times directed to volunteers, at time to schools, but without a clear order.

It's hard to find what you actually need and the website feels a bit messy.

In this page, I'll explain how I faced these issues, or you can take a shortcut to the solution ;)

UNDERSTANDING YOUR AUDIENCE

I find it's sometimes necessary to narrow down the customers you are creating a product for and concentrate on each category at a different time. In 1hour's case the 2 targeted audience, volunteers and schools, were essential to each other. Just like there's no AirBnb's customers without AirBnb's hosts and vice-versa. I had to find a way to appeal to both of them at the same time.

FINDING THE RIGHT PLATFORM

Knowing the audience, I started looking at the platform they would mostly use. 1hour already had an app, but it was not as developed as the website, it was still in a beta version.

After talking with ideal users, I decided to concentrate on the website and leave the app for a later date. I justified this decision because schools would have an office and something like 1hour would be dealt using a computer. Equally, most potential volunteers are in a profession that requires them to spend time on their laptop.

The ideal interaction that I imagined between volunteers and schools is not "one click away", schools have to accept the volunteer and before this, they both have to write something about themselves that would be a lot easier done with a keyboard.

 

I started listing what each category would deem important:

Easy and clear steps

They are the ones deciding how big of a commitment it is

The school will give them clear instruction on what to teach

Easy and clear steps

 

Reassurance it's safe and they will not get people they haven't vetted in their school

 

Their students will get something out of it

PRIORITIZING

Trying to solve some of the issues above, I set into creating a site map.

Even while creating, I was aware of how much a site map could change throughout a project, but I find it's a good anchor to have from the start.

TASK FLOWS

As I decided to concentrate on the 2 actors in 1hour: volunteers and schools, now I asked myself "Would they need two different websites, or would one website with information for both suffice?"

I decided to keep all the information on one website, but I wanted the distinction between what was there for volunteers and what was there for schools to be always clear (one of the things I heard from testings was that they didn't know whom the text was talking to).

Already in the sign-up, I wanted to mark the distinction between a volunteer account and a school account.

VOLUNTEER USERFLOW: Signing up and setting up your account with your details and what you could teach

 

SCHOOL USERFLOW: Signing up and setting up your account with the school details and what topic you would like volunteers to teach

 

Illustrations and UI

ILLUSTRATIONS

To give 1hour a stronger brand recognition, I decided to create some illustrations for the website and future blog articles.

1hour started with 5 categories that volunteers could help with; coding, event volunteering, gardening, finance and languages. 

One of the next steps would be to broaden the scope of the categories volunteers can teach, in so doing maximising the number of people that would otherwise feel left out if they can't teach any of the above categories.

For now, I created illustrations to depict some of the available categories.

For these illustrations, I worked off libraries such as Humaans and Rawpixel.com, combined them together and created my own when I couldn't find what I was looking for. 

LANGUAGES

GARDENING

FINANCE

CODING

TYPOGRAPHY

The font family for the website was already Raleway. It was perfect for its purpose so I decided to leave it as it was. A sans-serif felt consistent with the message and the style for 1hour; it was serious without being too conservative. 

COLOURS

The main colours for 1hour were already the colours of the logo, dark blue and orange (or "cosmic cobalt" and "pumpkin" if you are more sophisticated). I kept those as primary colours, adding some secondary ones. 

Just like for the language, I wanted it to be joyous but not childish, inspiring but not inspirational.

(I'm always grateful for coolors.co that gives me endless names for colours).

TYPOGRAPHY

Aa

RALEWAY REGULAR

BODY COPY

 

IGNORING ISN'T THE SAME AS IGNORANCE, YOU HAVE TO WORK AT IT

by Margaret Atwood, The Handmaid's Tale

Aa

RALEWAY BOLD

H2-6

 

IGNORING ISN'T THE SAME AS IGNORANCE, YOU HAVE TO WORK AT IT

by Margaret Atwood, The Handmaid's Tale

Aa

RALEWAY BLACK

H1

 

IGNORING ISN'T THE SAME AS IGNORANCE, YOU HAVE TO WORK AT IT *

by Margaret Atwood, The Handmaid's Tale

*Forgive me for the quote, I thought it was better than ABCD...

PRIMARY COLOURS

#1D3085

Cosmic Cobal

#F57317

Pumpkin

SECONDARY COLOURS

#F4BFDB

Cotton Candy

#A14790

Plum

#BAE5EC

Powder Blue

#FFC63B

Sunglow

BACKGROUND PATTERN

MICRO-INTERACTIONS

One of the things I love about UX is that it stretches out into so many different directions and in every direction you go, you can go deeper. So lately one of the directions I have taken has led me into micro-interactions. I find they add a nice flair to websites and it makes me want to cultivate my JavaScript skills so that I can bring onto the webpage what's in my head.

For 1hour I decided to have a play around square and rounded rectangles for "hoverable" elements such as boxes or buttons.

 

My Solution

HOW DID I SOLVE THE PROBLEMS I FOUND WHEN I FIRST STARTED?

Too much copy: 

Stripped down to the essential, more copy might come in the future when more features will be added, so it will have to be constantly revised, but for now, I wanted everything to come down to the essential steps our users will have to get through to start using 1hour.

Confusing message:

The original website would call schools in 3 different ways (schools, organisations and venues) I avoided the other 2 and only talked about schools. The items on the main menu are mirroring ("For Volunteers" "For Schools" instead of "For Volunteers" and "Organisations") and they are sitting together now instead of being separated by other menu items. In pages where both audiences are being referred, I always specified before the user would start reading whom the copy was talking to.

Hard to find what you need:

Stripped the website to the bare essentials and made sure our users would instead write more in their profile (what the volunteer is expert in or what the school is looking for specifically) so that there would be no confusion whether this opportunity or this person is the right one for you. 

Scroll to see the 2 homepages and the original homepage

HOME PAGE FOR NEW USER

2020.jpg

Along with solving the problems, I found during testings, I wanted to change what new users would see from what recurring users would see. The copy to explain the mission to a new user (and subsequentially try to turn him/her into a volunteer) is valuable "real estate" and a logged-in user shouldn't see this every single time they go on 1hour.

Even though I had many ideas in my mind, for now, I kept it to an MVP, mostly having the same elements in both versions but simply repositioned to where users would need them the most.

I wanted the page to speak to both possible volunteers and schools. Of course, the menu items at the top would redirect them towards their pages, but I made sure that both had a section for them on the Homepage.

Therefore the 3 steps in "How it Works" are for volunteers by default, but schools can click under the heading and immediately see "How it Works for schools".

This wireframe was not my first attempt, I started with sketches and messy notes. In my first high fidelity wireframe, I created an intricate pattern of waves throughout the homepage that as it was pointed out during a user testing, it made the whole website look like a sailing school.

I decided to create a case study on this project when the project isn't finished yet, but the more I am working on it, the more I realise that it could never be truly "finished" as new features will be rolling out or more ideas will come out, which is a good thing, or my job would really have a short life.

What I’ve learnt from this project

Finding the right users to do user testing might set you on the right path from the beginning, and it will not just be a simple user testing but it might turn into a great brainstorming session that will open your mind for future ideas.

This is the first product I have worked on where I have designed for specific groups of people; schools and volunteers. This changed my perspective completely, I had to imagine how their day is spent and how my product could intertwine with their everyday life. This was also important when deciding which platform to prioritise (mobile app VS website).

Words ARE important. As a non-native speaker, I might sometime miss subtleties that others would instead catch on. It's important to understand one's limit and I was lucky enough to have people happy to test and ask advice to, making sure the website reaches the level of reliability that a strong copy could convey and learning something myself at the same time.

Say Hi!

I love feedback (the crueller the better) and chatting over a cup of coffee

(in person or over Zoom)

Drop me a line and I'll get back to you :)

More Projects

East West Foundation Top _Giallo.jpg
MyTimeOut_Mock.jpg
Taylor Brown Hover Copy.jpg
AnyTour_Mock2.jpg