Bring Your Own Story — A UX Case Study

Grainne Kay
Jan 23, 2018 · 10 min read

Redesigning a global supperclub’s onboarding experience.

UNDERSTANDING AND REDESIGNING THE EXPERIENCE OF NEW SUPPERCLUB HOSTS

This case study is about my experience as a UX designer developing solutions for the onboarding of new hosts for my client, Bring Your Own Story.

CLIENT

Bring Your Own Story (“BYOS”) is a global supperclub hosting community. Each supperclub event has a focus on themed, personal storytelling as a way to forge more meaningful relationships with strangers.

THE CHALLENGE

BYOS is currently a side-business for the three founders who all have full-time jobs. The founders want to grow BYOS quickly on a global scale in 2018 and to do so, they needed help redesigning much of their responsive website. With scalability in mind, I helped the client narrow its brief to focus on redesigning the onboarding and training experience of new hosts.

My team with our client, Graham. L-R: Graham, Ray, Emma & me,Grainne!

TEAM FACILITATOR

I was appointed as the Team Facilitator and in this role, I ensured my team remained focused on the UX process, were organised, worked to each other’s strengths and delivered on time and to a high standard. I also facilitated/ran the Design Workshop with our client, see below.

DESIGN PROCESS

We used the Double-diamond design process which has four distinct stages, or as we liked to call it, the four chapters to our design story!:

CHAPTER 1: DISCOVER

Firstly, we reviewed the current onboarding and training process which is predominantly done offline. It goes like this:

  • potential new host fills in very basic, short application form on website;
  • if founders like the application, they schedule an interview via video-call;
  • if approved as a new host after the interview, training is done via another video-call with a founder by screen-sharing and walking through a PDF training manual together.

Competitor Analysis

We reviewed the onboarding and training experiences of a number of BYOS’ direct and indirect competitors globally. Here is a summary of what we learnt:

Competitor Analysis

User Testing and User Research

The research we collated was really important as it helped us understand the user pain points during the onboarding and training of new hosts, especially since much of this process was currently done offline.The challenges at this stage was finding hosts to interview and the different time-zones (BYOS hosts are in New York and San Francisco also). We did:

  • Guerrilla user testing of the BYOS website and current onboarding process;
  • 13 x user interviews with current/former BYOS hosts around the world;
  • 2 x interviews with hosts from competitor supperclubs.

Survey

In order to widen the net, I sent out a survey to an entrepreneur Facebook network that I’m part of. Helpfully, one of the replies was from a host from a competitor supperclub, ‘The Dinner Party’, and I got some great from her insights into their onboarding process — more on this below.

I user tested BYOS’ current website

The Key Insights and Pain Points from Research

Here are our key insights:

1. Lack of inspiration to sign up as a host

The website’s content didn’t inspire or motivate potential hosts to sign-up.

2. Process of signing-up wasn’t clear

The users didn’t feel informed about the process of becoming a host or how to host a BYOS supperclub and were frustrated by the lack of financial transparency.

3. BYOS application form was not extensive enough

Users said it didn’t feel very professional. The host for competitor supperclub, The Dinner Party, said:

“The Dinner Party’s application form was easy to do in 20 minutes. I liked that it was detailed as it seemed like not everyone could be a host. It felt professional, like a filtering process.” — Host for ‘The Dinner Party.org

4. Off-putting interview and onboarding process

Users were surprised that after they submitted their application, they would have an interview video-call followed by another video-call training session with one of the founders — this wasn’t mentioned anywhere on the website.

“I was a little taken back by the formality of the whole process… I didn’t really know the reason for that many calls… It was kind of off-putting for me.” — Current BYOS host

5. Unrealistic training process

Carrying out the training by video-call whilst screen sharing a PDF document “isn’t realistic”, “feels corporate” and “is difficult to digest”. Users said they would prefer to do the training at their own pace, in their own time.

CHAPTER 2: DEFINE

Affinity Mapping

We affinity mapped the research and it became clear that although our brief was in relation to the onboarding and training of new hosts, we needed to address the issue of lack of motivating and informative content about hosting on the website and the process to becoming a host, otherwise hosts would not be inspired to sign-up in the first place and therefore, the company might not reach its business growth goals.

We came up with 6 key frustration that we would address when redesigning the users onboarding / training experience:

Me and my team Affinity Mapping — 6 Key Frustrations

Personas

Using our research, we came up with three personas: one for a BYOS guest, a BYOS potential new host and an existing host.

We focused on our ideal persona, Jane Lovebridge: a potential new host, living in London.

Key Persona, Jane Lovebridge

“Good conversation is addictive to me. My favourite social thing to do is a dinner party — it’s a natural thing for humans to break bread together.” Jane Lovebridge

We mapped Jane’s current onboarding journey in an experience map. As you can see, the current user journey is mainly offline, very manual, is time consuming for BYOS’ founders and not an exciting experience for the user. So we needed to address both Jane’s experience and also make the processes more automated for the scalability and growth of the business.

The current user journey is mainly offline, very manual and time consuming for BYOS’ founders.

This helped us form our hypothesis:

We believe that by improving the onboarding information and process for new hosts we will be able to build and grow the BYOS community faster whilst prospective new hosts will feel informed, assured, excited and prepared for hosting a BYOS event.

CHAPTER 3: DEVELOP

Once we had analysed all our user and competitor research, we started to develop our solution.

Experience Map

As we were integrating most of the offline aspects of onboarding into the website, we created a new User Experience Map that showed the new, happier user journey.

User Flows

Based on the new experience map we created two scenarios for Jane to test our user flows:

Scenarios and user flows to test with users

Design Studio Workshop

I really enjoyed facilitating the Design Workshop with our client and my team. It was great to get the client’s thoughts and ideas and to get his buy-in to ours, based on our research.

We focused on designing a ‘Host Login area’ and also a ‘Host Training page’ as neither of these screens existed on the client’s current site and are new concepts for the onboarding experience. By having the training online, this will remove the need for the Founders to set aside time to train each host that joins and most importantly, solves the users’ frustration with the current training process, to makes it more exciting and instantly engage them.

We held another design workshop as a team and came up with a wireframe for the page on the website that is all about hosting.

Design Workshop with our client

Wireframing, Prototyping, Testing and Iterating

We got to work on testing and iterating our initial designs and also designed any extra pages we needed to complete the full onboarding process, from paper to low/mid-fidelity and then high-fidelity.

Wireframes: I designed the wireframes for the “Become a Host” page, the “Hosting Dashboard” and the “Host Training” pages.

UI Design: I designed the UI for the “Become a Host” page, the “Hosting Dashboard” and the “Host Training” pages.

I user tested the prototype iterations with various users

‘BECOME A HOST’ PAGE

We user tested BYOS’ current page about becoming a host and the key pain points we discovered were:

In the Design Workshop with our client, we redesigned this page, taking into account all the user frustrations. We went through a number of iterations following testing from paper prototype to low/mid and high-fidelity. Here are the key iterations:

The iterations of the “Become a Host” page

‘HOST APPLICATION’ PAGE

We learnt from our research that BYOS’ current host application was too short — users said it didn’t feel legitimate or professional. It only asked for the candidates name, email and city and it didn’t enable the founders to screen candidates. Without finding out at this stage whether or not a candidate met the must-have criteria (see point 9 in the Become a Host iterations above), the founders and applicants might waste their time having an interview.

‘APPLICATION CONFIRMATION’ & ‘HOST LOGIN’ PAGES

Once the user submits the application, they’re taken to an acknowledgment page in order to reassure them that their application was sent. We also designed a login to the new host’s dashboard — the details are sent to the applicant by email if they have a successful interview.

‘HOSTING DASHBOARD’

The challenge here was to not only to overcome the users’ frustrations with the onboarding and training processes but also to help make the process more automated to enable BYOS to scale and grow.

In the Design Workshop, we came up with a Hosting Dashboard. However, I noticed whilst user testing that users didn’t know what steps they needed to fulfill when onboarding and weren’t sure what to do. So I designed an alternative version of the Hosting Dashboard with a 3 Step process and A/B tested this. All users tested with prefered the 3 Step guidance when they first logged in. So we took this into our final iteration.

Here are the iterations we went through:

‘HOST PROFILE’ PAGE

‘HOST TRAINING’ PAGE

One of the user frustrations we discovered is that it felt unrealistic: they didn’t like having to do their training over the phone, screen-sharing a PDF training document and preferred to do it at their own pace, in their own time. In the Design Workshop, we came up with Training page prototype which went through a number of iterations. The key iterations were:

CHAPTER 4: DELIVER

Prototype

After testing and iterating the various versions of our prototype, we produced final wireflows and our high-fidelity prototype.

Here is a link to our high-fidelity prototype.

Design specification

We produced a Design Specification for our client so he could make the changes in the future. This included:

  • A Style Guide for the website
  • Annotated wireframes
  • Wireflows
Style Guide, wireflows & annotated wireframes

OUTCOME

We produced a high-fidelity website prototype by utilising all skills and methodologies we had been taught on the course. Our clients were really impressed with our designs and particularly with the quality of our user research and business analysis, stating that it not only informs the design of their website (which they plan to implement) but also how they will run their business going forward.

Client Feedback

I was really chuffed when the client gave me the following feedback:

“Grainne is a gem! She led a three-person UX team from General Assembly that was consulting my start-up. She’s a great communicator, strategic thinker, project manager, UXer, and delight to work with. I wish we could hire her!”

— Graham Garvey, BYOS Founder

NEXT STEPS

  1. Further user testing of the high-fidelity prototype
  2. Design a “new event” page, so hosts can create and manage their events from within their dashboard (events are currently set up on the website by the founders)
  3. Redesign BYOS’ home page — when user testing BYOS’ current website, we noticed that users who had never heard of BYOS before initially thought the website was for a pub or a restaurant. So I’d redesign the homepage to have clearer content and more motivating and inspiring imagery.

THANK YOU

Thank you for taking the time to read my case study! Please feel free to get in touch if you have any questions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade