Distil Co-working
UX design | Stakeholder management | Brand design | User research | Client project
Full website design and re-brand focused on UI communication, for a central Bristol coworking space - design sprint.
Deliverables
- Visual brand identity
- Hi-fidelity prototype
- Mobile responsive design
Date
- Jan 2023
Scope
- 9 days, a team of 3
Client
Founded in 2020, Distil Co-working offers co-working desks in a calm, light space in Central Bristol. The space is located in a historic building that also contains a gin distillery and a premium cocktail bar.
Brief
Identified through a client workshop, the brief was to design a website for the space with the aim being for potential members to make contact to tour the space. Booking pathways and interactions for current members were not included in the brief.
Key area of opportunity
After conducting useability and desirability testing on the existing website we found;
The main opportunity lies in improving the website’s communication of positive features, benefits and events available at Distil to generate more tour sign-ups.
Problem statement
Using the in-depth understanding of our users gained through interviews ad survey research, we defined the problem statement.
Professional, remote workers looking for co-working spaces in Bristol need to find a way to quickly understand the many unique amenities and experiences Distil offers and book a tour through the website because they are isolated, unproductive, have an unsuitable workspace and crave a social community - all to elevate their lifestyle and improve productivity.
The solution → Five page website + brand identity
Home page - Design solutions
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10
Or read on for a full project and process overview.
Process and research
Design thinking process
Empathise
Secondary research
Competitor analysis
User survey & interviews
Define
User persona
User journey
Problem statement
Ideate
Initial sketches
MoSCoW Matrix
Happy path
Prototype
Lo-fi & mid-fi prototypes
Brand design
Hi-fi prototypes
Test
User testing
Design iterations
Desirability testing
What is co-working?
Flexibility
Socialising
Networking
New surroundings
Coworking is a concept in which individuals from different companies or freelancers share a common workspace. It has grown in popularity since the pandemic has changed the way we work.
In 2022 the worldwide co-working industry was worth $16.17b, a figure that is set to increase +118% to $34.99b by 2027. (TBR, 2021)
Step one of the design sprint
Our goals were to fully understand the business, its users, key needs, future goals and current blockers to these goals.
In a two-hour client workshop, we completed a business affinity diagram, explored the current user's journey, defined a problem statement recapped our design process and the covered client’s hopes, fears and next steps. Completing problem statements individually and then bringing them together helped ensure the client and each member of the team were on the same page.
It was clear early on in the workshop the client's need was for an informational website. The business handles bookings and member profiles through external software outside of our scope.
Client workshop
Key themes
A need to better communicate the qualities of the building and explain the different spaces on the website to potential users
Attract new users who are looking for an “elevated working experience” - client quote
Tell the full story of the business, defining it from other businesses in the building
I want to emphasise that home-from-home feeling, the ergonomics of an office with the aesthetics of a much lighter space…
We are selling a calm, stylish workspace where they can get on with their day.
Owner of Distil Co-working
Primary research
Surveys + Interviews
We wanted to identify and validate the most attractive features of the co-working concept and understand which amenities users liked and disliked the most to foreground these features in the happy path. We chose to undertake a survey as a fast way of gathering this broad and quantitative data from co-working users.
With clear data trends in attitudes around co-working and spaces’ various amenities, we chose to interview people with co-working experience, both in other co-working spaces and at Distil. The purpose of this was to further explore the decision-making processes behind the favoured areas and better understand users’ mindsets, drivers and barriers to finding a new co-working space.
Survey
People want people
Respondents’ top amenities were not a surprise; Wifi, quiet, pods and coffee. The insights came when asked what, beyond the basic amenities, would attract people to a co-working space.
People are joining co-working spaces to work in a space with others. We found no difference in preferences between people who had and had not used co-working spaces before.
Survey parameters
Ten questions
62 respondents
52% experienced co-working before
User interviews
With quantitative data on people’s preferences, we moved on to interview three users of co-working spaces to explore their thought processes, preferences and pain points when choosing co-working spaces.
In addition to this, we interviewed an existing member of Distil to understand their journey from interested outsiders to full-time members and what features of the space they like the most - to better help us with what features to promote on the site.
We also performed a brief user test on the existing site.
Existing site
Interviews → Quotes
→ Affinity diagram → Insights
Interview findings
Central needs of a coworking space are wifi, coffee and a quiet workspace
A desire for community and social events from a co-working space
Existing website, user testing
Existing branding described without passion as, ‘Modern, clean, okay’
Confusion about the current tariffs and how they relate to the different spaces and amenities on offer in the building
As with the surveys, users expressed that once the key practical needs of wifi, coffee and a desk had been covered, the main desire was for community and social events. Interviewees expressed a desire for ‘opt-in’ social events where there was no pressure to join in, ‘A chilled community, If I am working late I don’t want to be made to feel bad for not coming to have a beer and play ping-pong.
On Key amenities
Good wifi & good coffee.
That is all we need the rest is bull sh*t.
On working at Distil
Distil is really easygoing. some people want to chat with others just to focus, but everyone respects each other’s space.
On community
It’s nice, to have the ability to chat. I’ve made loads of friends at co-workings, it’s the best way of making friends.
User persona
Next, our survey and interview insights were interpreted, via an empathy map, to create a user persona - Isolated Idris.
In summary, Idris is a remote worker from a large tech company in London, which he left behind when he moved to Bristol. He misses having people around him during the day, is tired of sharing weak wifi with his WFH partner, misses office life and so seeks a change of scene for his work life.
User journey
From this, we developed Idris’s journey, from being frustrated, isolated and bored with his routine through to becoming a full member of Distil - using the current site.
As he begins his search for a coworking space and finds Distil’s current website, it is ok and he is interested enough to take the next step towards becoming a member and book a tour of the building. On seeing the space, meeting the host and hearing more about the community on his tour he is quickly enthused and signs up on the spot.
MoSCoW matrix & Happy path
The final step before ideation!
The existing site already fulfilled the MVP of communicating essential information about the space and enabling users to contact the space to book a tour.
With this in mind, we had the freedom to focus on more should-have and could-have features, including;
A complete re-brand
A page focusing on community and events
Improve information hierarchy, including a new way to communicate the different tariffs and their relationship to the many spaces in the building.
Three pages are vital to the happy path so we designed additional pages that users had expressed interest in browsing more information in these areas.
Key area of opportunity
The main opportunity lies in improving the website’s communication of positive features, benefits and events available at Distil to generate more tour sign-ups.
→
Problem statement
Professional, remote workers looking for co-working spaces in Bristol need to find a way to quickly understand the many unique amenities and experiences Distil offers and book a tour through the website because they are currently isolated, unproductive, have an unsuitable workspace and crave a social community - all to elevate their lifestyle and improve productivity.
Ideation & Prototyping
Ideation sketches
Lo-fidelity
Mid-fidelity
Initial ideation formed the basis for lo-fi sketches which were refined through testing to generate mid-fidelity prototypes.
After four rounds of user testing mid-fis, we re-structured items of information to make the happy path more informative and on the home page added an introduction to the concept of co-working. The Book a Tour CTA button was renamed to Join Us after users expressed confusion about what their next steps were.
Lo-fidelity
Click to play/pause
Mid-fidelity
Click to play/pause
Branding
We wanted the interface to communicate a community atmosphere, so we collated key visuals into a mood board which we tested with users, asking them to list five key adjectives the board represented to them. Users validated the key feelings we wanted to convey with the visual elements of the design as users returned words including cosy, modern and friendly.
Based on these visuals and the feelings we want to convey, we have curated colours and fonts to develop a style tile.
Brand values
Cosy
Modern
Friendly
Welcoming
Community
We brought to the interface sketches, rounded shapes and overlays, playing on transparency effects to add a sense of homeliness and creativity to the site. We kept the original logo and the original green accent colour, adding a range of warm monochrome colours to the palette.
We met with the client at this point to approve the shape of the site and the proposed brand identity. The client explained they wanted a sans serif heading font to communicate a clean, modern feel and create distance between the co-working space and other businesses in the building which have more traditional branding. After a discussion with the client, the original heading font we had selected was swapped out in favour of a sans serif font.
The overall result of the rebrand was warm and creative while keeping the clean and modern spirit of the company.
Style Tile
Hi-fidelity Prototype walk through
Unmute for my guided walkthrough and design insights.
Design solutions
Spaces page
Spaces page
Memberships page
As mobile is incredibly important we were happy to present this responsive design for the home page.
Responsive design
Hi-fi testing
1. Modern
2. Stylish
3. Clean
4. Inviting
During hi-fi testing we found users were not interacting with some parts of the site, so we added hover animations to promote clicks. Overall, users were delighted by the hi-fi, they summarized the design of the site with reaction cards and the most popular adjectives were modern and stylish.
Next steps & Learnings
The next steps for this project would include more testing of the menu bar to refine the design for simplicity, adding a location page to highlight the features of the area local to the co-working space and finally, exploring the need for an app to be used by existing members to make bookings and engage with the community.
The main learning from the project was the value of community to all of us and the power of research to inform user interface and ultimately influence users to take action - in this case booking a tour of the wonderful Distil Co-working!
Finally
I would like to thank Distil Co-working for the opportunity to work with them and my teammates Eva and Charles who were my colleagues on this project.
If you are interested in collaborating on a project or expanding your full-time UX team, get in touch.