Project #3: Funky Spaces and the Website Optimisation (in-depth case study)

This is a case study for our third UX design project as Red Academy trainees.

Main intended audience: UX Professionals or UX hiring managers

Client:

• “Funky Spaces is a platform for work, event and community spaces with a commitment to ‘doing good’ and a certain sparkle that makes them special.” (https://www.funkyspaces.co.uk/about)
• In other words it connects people looking for a space to rent with people offering space, this can range from office spaces to leisure spaces
• It also offers networking opportunities for the space providers that take place monthly. During these meetings space providers have discussions on themes that are important and relevant to them.
• Funky Spaces is based in Bristol and it is mainly run by Mike Zeidler

Team: Anna Skoulikari and Will Duncan

Base: WeWork Aldwych House

Duration: 2.5 weeks

Working process:

We adopted the Agile philosophy and implemented it through elements of the scrum methodology. We would hold a scrum every morning at 9:15 before classes started covering:

• What we worked on the day before
• What went well
• What didn’t go well
• What we were going to work on today
• Blockers

I also kept a handwritten journal throughout the project.

Project focus: The focus of the project was optimising an already existing site.

Overview: With an even tighter schedule than previous projects and a long distance client we definitely faced some challenges throughout the project. However we managed to turn what may have initially seemed like a setback into an opportunity to explore new roads less traveled by (a la Robert Frost). I will be elaborating on our journey in more detail throughout this case study as I narrate the five main stages of our project:

Deliverables and contents list:

• Business goals
• Google analytics (led by Will)
• Interviews (led by Anna)
• Survey
• User tests (led by Will)

Business goals

From the initial client meeting with Mike we were able to narrow down to two distinct business goals:

Google Analytics

We had three important findings from looking at the google analytics data of the website:

1. 73% of the website visitors visited through desktop rather than mobile

Therefore we decided, in the limited amount of time we had, to focus on the desktop version of the site.

2. Of the 608 website visitors in our data, 326 of them dropped off on the page presenting all of the Bristol-based spaces to rent. This was a 53.62% drop off.

We planned to focus on re-designing this page.

3. We noticed that website visitors usually looked at the page with all the spaces to rent. And then there was an 81% drop off after looking into 3 spaces. We didn’t however know whether this was because people had found what they were looking for or not!

We decided to recommend making different URLs for each space so that when you click on a space you’re taken to a new page with a space-specific URL so Google Analytics can track user behaviour better. We also recommended to include UTM tags on the the contact info on individual space pages (website, phone number and email address) so that we could have some sort of estimate of how many people contact spaces.

Interviews

From the beginning, we were aware of the fact that we had two groups of people to interview and research:

We also knew that:

• All the space providers we could contact were in Bristol
• We had contact details for all the Funky Spaces space providers (since they were on the website)
• We had no contact details for any space renters

The plan was therefore to initially contact space providers and then get access to space renters through them.

With a total of 46 Funky Spaces on the website platform, we initially contacted 11 space providers by email. However after a couple days the response rate had been extremely low and so we got our thinking caps on for other ideas to get more research participants.

We called both the contacts we had previously emailed and new contacts and the response rate was strikingly larger. We were able to book interviews for the next couple of days and we also gathered interesting research insights from this simple exercise.

For example, we initially asked to do Skype interviews rather than mere phone calls however we found out that many of these places didn’t use Skype. This was surprising, because in London, Skype was quite a popular application to use.

In order to keep track of the individuals contacted and the stages of the process they were at an elaborate excel document had to be created:

We managed to speak to quite a few space providers however we knew that we needed to focus on getting access to space renters and so…

This worked well and although it was not ideal, since the London-based space renters were note 100% our target audience, it still helped to talk to them about some basic aspects of the rental process.

Survey

One of the previous learnings from our first project was that in the case of a long distance client it could be helpful to conduct a survey in order to gather more data from more potential users.

The focus of the survey was on how people searched for a place to rent and what criteria they found most important.

In designing the survey we wanted to have:

A. Minimal questions: We assumed the shorter the survey the more people would answer.

B. Relevant questions: The survey had many sections and people arrived at the sections relevant to them according to their previous answers.

The survey went through a couple iterations before it was ready to be sent out. In between iterations we changed the format of some questions in order to extract as many insights as possible from the results. For example:

User Tests

Since we had an existing website we could use, we crafted a scenario, and then observed as users made their way through the website.

This ended up being the one of the most useful research exercises. (Definitely to be used again in future projects.)

Deliverables and contents list:

• Affinity diagram
• User Persona
• Key insights and product features
• Scenario
• User Flow

Affinity diagram

We had two main groups of people that we had researched: space renters and space owners. Therefore we decided to do two affinity diagram. I did the one for the space owners and Will did the one for the space renters.

Affinity diagram for space owners

The insights from our affinity diagram informed our user persona and our product features.

User Persona

This is Timothy, or just Tim for short.

He is a graphic designer and he has recently decided to start freelancing!

…working with likeminded people.

“I am looking for a community, it’s all about the experiential angle.”

… working efficiently and on projects he cares about.

…extremely corporate environments.

…the isolation that comes from working alone.

…the right atmosphere.

“If I will be spending the majority of my day somewhere, it better have the right kind of vibe.”

…something suitable.

“I’m a one-man-band so I either need plenty of hot desking space or a dedicated desk, an office is a bit too much.”

Key Insights and Product Features

By doing the affinity diagram and user persona we sifted through all of our research and came up with 6 key insights that would be translated into product features that we wanted to focus on:

We were going to make sure to prioritise location and price in the website design.

We wanted to eliminate this confusion.

We would more effectively communicate the Funky Spaces culture. (Note this was also one of the business goals.)

We would completely re-design the sorting process.

We would include more visuals.

We could analyse the information architecture and prioritise the information users found most important.

Scenario

In order to understand what would get Tim to visit the Funky Spaces website we drafted a scenario:

In the scenario Tim finds out about Funky Spaces through his friend, which we categorised as a word of mouth discovery. We chose this because it was one of our findings from the survey:

User Flow

With a clear idea of how Tim would end up on the site we needed to clarify what he would do once he was there.

Due to the simplicity and focused nature of the site the user flow ended up being quite linear. Although we could have taken a more in-depth approach and imagined some alternate scenario with decision points.

We paid particularly close attention to the sorting and narrowing down process in the search:

Finally we had an idea of the product features. We had gotten to know Tim on a first-name basis and we had virtually creeped over his shoulder as he perused the Funky Spaces website. It was time to realise this visualisation and create our first website prototype in our design stage.

Deliverables and contents list:

• Design research: conversion flows
• Whiteboarding
• Initial digital prototype
• Usability testing
• Key changes

Design research: conversion flows

We had recently had a lesson on conversion flows and we thought it would be useful to analyze how they worked on websites similar to Funky Spaces in order to design a good conversion flow in our design, the website of choice? Airbnb.

As illustrated above there are four stages in the conversion funnel: awareness, interest, desire and action. We focused on the latter three as the first one mainly pertains to off-site activities.

Awareness

This mainly has to do with marketing and generally spreading the word about one’s product or service.

Interest

Airbnb engenders interest in the user through various design features:

Note that the location in the search bar promt tends to be “exotic sounding”. Coincidence? I think not.

Desire

After a certain level of interest has been created in the user, airbnb makes sure to keep up the good game and continue creating desire in them.

Below the user has searched for a place to rent in Bristol. The user can flick through images of the homes without even having to commit to clicking into any of them.

The responsive location also makes the experience more familiar giving the user a feeling of where they would be going, making them feel comfortable about what could be an uncertain journey to a new location.

Finally the user clicks into one of the homes and immediately the experience is personlized by introducing the host and humanising them by putting a photo of them.

The information on the homes’ page is extremely thorough and covers almost any question the user may have.

Action

Finally by having created a certain level of desire in the user it is time for action!

The call to action to contact the host is always preceded by their profile close by.

Calls to action are included at the beginning and the end of the space description in order to cater to different types of users. Some are comfortable contacting early on while others may want more time to peruse the information.

Finally, in the end, it is possible that this is not the home the user wants to rent. Instead of leaving the site, the user is offered many other similar homes that may suit their needs in order to continue their journey on-site.

Analysing the conversion funnel for airbnb was very usually and after having analysed the conversion flows of some other booking sites…

…it was time to start working on our own!

Whiteboarding

This time around we whiteboarded in order to get our ideas out:

This was a different approach than doing paper sketches but had similar results.

Initial digital prototype

With only enough time for one round of testing we decided to create a low fidelity digital prototype very quickly:

Click here to view the project `funky_p5_prototype`

Feel free to have a click-through but we will be getting into the nitty gritty details soon!

Usability testing

Our usability testing was led by myself as the facilitator and Will as the observer. We read out a scenario and observed users’ actions. And afterwards we had a list of post-test question in order to extract some more information and feedback on the design.

Key changes

Here are three key changes we made to our next iteration of the design:

Now that our design had a little makeover, how about showing you the final product?

Deliverables and contents list:

• Prototype link
• Prototype: conversion flow
• Prototype: product features

Prototype Link

Voilà the prototype we presented to the client:

Click here to view the project `funky_p5_final`

Prototype: conversion flow

Now let me walk you through the conversion flow we designed in our prototype:

Awareness

Once again awareness is all about spreading the word:

Interest

We designed the homepage of our website so that the minute the user landed on it they would get more and more interested in using our service.

Desire

The next level of the funnel was to create desire, at this point the user would probably have already have narrowed down their search to look at spaces in Bristol:

Once again we have included an inviting search prompt which acts almost as a fill-in-the-blank with the way the copy is phrased.

The filters allow the user to customise their search and thereby speed it up drastically.

The responsive map allows the user to visualise their journey to the space. They can already start imagining what it would be like to go into work every day. Or what their weekly trip to their yoga class would be like. This makes the experience more tangible and familiar.

We also allow the user to flip through images of the space without having to commit to click into any space.

Action

We wanted the host contact box to float vertically down the page as a user scrolled through the space page. (Although we were not able to prototype this in invision). This would allow them to have access to the contact details at any point they felt they had enough information and were ready to get in touch.

We also made sure to include a profile for the host next to the contact information in order to personalize the experience.

And finally, at the end of the page we included other spaces the user could look at in order to continue their journey on-site.

Prototype product features

We had 6 main key insights that we wanted to tackle with product features and here is how we did it:

1. From the very first thing the user reads, the value proposition that is, we wanted to communicate the social mission of Funky Spaces.
2. We also included a brief description that more explicitly explained what Funky Spaces does.
3. Furthermore, we made sure the copy implicitly reflected the social ethos.
4. And we continued this implicit and explicit communication throughout the entire site.

And with all the above is how we met our business goals:

Finally, there were a lot of things that we found would be extremely valuable to do for this project but due to lack of time were not able to pursue. Therefore we drafted a next steps packet in order to walk the client through our thoughts and recommendations for following actions.

In total we had 5 next steps that we wanted to cover.

This next step is in line with business goal #2 ‘communicate the culture of FunkySpaces and its community effectively’. Because FunkySpaces has a social mission this should be reflected in all aspects of the design of the website. Therefore it should be easily accessible to everyone. Four main categories of disabilities that could be considered in the following iterations of the design are: visual, auditory, mobility and dexterity and cognitive disabilities.

Co-creation and co-design allow for users to have a much bigger part in the design of a product or service. Due to the FunkySpaces social mission, we believe using participatory design techniques would be in line with the FunkySpaces ethos and culture. One example in which this could be implemented in particular is deciding on the filtering system for the spaces on the site. We would suggest using the open card sort exercise in order to carry out a workshop with potential users of the site.

We would recommend conducting more user research into the naming of FunkySpaces as well as its visual representation. Two key aspects of the visual representation are typography and colour theory. In terms of typography, it is important to use a selection of fonts that effectively communicate what sort of business FunkySpaces is and wants to be. In terms of colour theory, it is important to choose colours that will suit the ethos of the business.

These are some further features we believe would be useful to include in the site in later stages, for example:

• Comparison tool: A tool to “favourite” different spaces and facilitate the comparison between them for users
• Niche clarification: Way to indicate whether a space is suitable for a niche use case, e.g. music practice or pottery for example

The first part of the conversion funnel is awareness and therefore it is really important to take various measures to market the Funky Spaces brand. Developing various social media channels could be considered as a part of Funky Spaces’ digital marketing strategy.

With the handover of the next steps guide to the client we concluded our project and prepared ourselves for the closure.

Presentation (created by me)

Retrospective

This time around we had a more discursive retrospective with a new facilitator. Here are a couple things that came out of our retrospective:

Client’s comments:

“…three weeks later, Anna and Will made a highly professional presentation, walking me through their research, logical process and design proposition. I was so delighted with their work that I have instructed my developer to apply their design recommendations in full. Thanks to the excellent work Anna and Will have done, I am confident the FunkySpaces Network will perform better and grow in strength as an organisation.

Anna may have been a student at the time, but her skill and service delivery are already at a higher standard than other professionals I’ve experienced. If you want to improve user experience on your website, I strongly recommend Anna to do a thorough job. Personally, I couldn’t be happier with the results.”

— Mike Zeidler, Director at Funky Spaces

The full review can be found on my Linkedin!

Contact:

Hope you have enjoyed this case study and if interested in contacting me, feel free to pop over an email at: annaskoulikari@gmail.com ✉️

Otherwise maybe:

• Check out my case studies for my 1st project or 2nd project 💼
• Browse through my Linkedin 🔎
• Or read more about me and what I’ve been up to the last 5 years here! 🙋

Otherwise check out this video 🎥 where I introduce myself:

Bibliography