LFNS.co.uk | Website Architecture Redesign

London Friday Night Skate and Sunday Stroll [LFNS.co.uk] are weekly marshalled street skates in central London. Both are weather dependant and it is announced on the site if a skate is running a few hours before the scheduled start.

THE GOAL AND CURRENT SITE PROBLEMS

The main goal of LFNS website users is to check if the skate is running on the scheduled date or cancelled due to the weather, as well as to see the right time and place of departure for the skate.

This function is fulfilled and works well. However, the website is also providing a number of other services and hosts quite a few other pages that are hard to explore due to a non-intuitive and complex navigation.

Thus, our main goal for redesign is setting up the intuitive well organised navigation across the site.

The secondary goal is to create a more visually pleasing experience for mobile and desktop users. (Currently in process)

lfns-current-ui-analysis

To understand major issues more in-depth, we need to analyse present hierarchy, identify the service’s user and their pain points while on the site.

Right now, there are (1) main top bar navigation with 2 levels of sub-navigation and (2) secondary footer navigation. Current navigation and hierarchy seem to be quite confusing and make it hard to navigate through the site. We quickly colour coded items that seem to belong to different groups in the current navigation:

lfns-wireframe-10

After this quick exercise, we could outline the following issues:

1. Sub nav items do not always belong to the parent nav item;
2. Some sub nav items are outdated or unnecessary when it comes to representing the service;
3. Not all items in main navigation seem to be representative of the service;
4. Some items from the sub nav should be in the main nav;
5. Sub nav items in the same group do not belong to the same group.

PERSONAS AND EMPATHY MAPS

For better understanding what users’ pain points are while using the service, we held a few interviews and created personas.

Andrew Smith – PERSONA 1

35 y.o., single, American.
A full-time photographer.
BA in graphic design.
Into electronic music, technologies, interactive theatre, roller blading, skate boarding.

Nexus 6P, iMac, iWatch.

Andrew recently moved to London and was looking for social activities in the city. Being into roller blading and skateboarding, he found lfns.co.uk an interesting community. Navigating through the website, he was trying to understand whether he can join the community, what the conditions and rules are, whether he is advanced enough to skate with the group, and when the next skate is.

To see what users feel, think and do about the service / when browsing the website, we created empathy maps.

lfns-wireframe-13

We ended up with 3 major types of users and their goals across the service:

1. New user – she wants to learn about the service and know the details about the next skate (time, place, if the skate is on or rained off);
2. Existing user – she wants to see the details of the next skate;
3. Marshal (or user who wants to become Marshal) – she wants to see the details of the next skate and learn about Marshalling rules.

What we found during this exercise:

1. Primary information for all type of users is the details for the upcoming skate (Friday, Sunday, or next holiday skate);
2. About the service and rules of the service are both important information for the new users;
3. Photos and videos from previous skates can be used to make service more attractive for the news users;
4. Marshalling rules are important for existing users who want to become Marshals;
5. Contact us page is important if new users have more questions, or for media;
6. Other information did not reflect on users’ needs.

SCENARIOS

Having identified our personas and their empathy maps, we created scenarios and storyboards for them:

codebar-wireframe-14

ARCHITECTURE ORGANISATION

Based on previous exercises’ findings, we removed a few pages that were irrelevant to our users, and added a few that were more important.

After identifying users’ needs, we started card sorting to organise currently existing information in the service. We used usabilitest.com to sort groups of information, the results of the test can be seeing [here].

codebar-wireframe-12

There are 5 major groups of information users pointed out at:
1. Home – to let community users know where, when and if the next event takes place,
2. About – for the new comers to get to know what LFNS is all about,
3. Rules – a page with rules, and legal information,
4. Marshalling – explanation of rules for Marshals,
5. Contact Us – a page for users and media to contact LFNS.

 

Date

November 19, 2016

Category

UX Design