‘Party with Selfridges’ — Case study of a UX microsite design

“Make the planning as easy, and as fun, as the party itself”

Client
Selfridges & Co.

Problem
High-end retailer Selfridges have decided to expand it’s services to include party-planning and the associated party-products to make it easier for it’s customers to plan parties. My persona Willow is a highly sociable 24 year old fashion marketeer who finds it difficult to plan parties due to increasing costs, limited time and wanting to stay ahead of the curve with on-trend themes.

Solution
Create a microsite that gives Willow the ability to plan all aspects of her party from theme inspiration and purchasing of products to budget and guestlist management.

Duration/Team
10 Days / Individual project

Methods
User interviews, competitive analysis, task analysis, concept mapping, user flows, user journeys, site mapping, navigation schemas, card sorting, sketching, prototyping, testing, wireframing.

My process
For this exciting project, there was two very distinct phases — discovery and design. During the discovery phase I researched the persona, other users, tasks, Selfridges and both their direct and indirect competitors. This gives me direction for my design and keeps the project grounded in real data to avoid assumptions and mistakes further down the line. In the design phase, I used that data to test designs iterations with real users — gaining fantastic insight on how to improve the user experience embedded in the design.

Discovery

Persona
I was given three very different personas for this project and my first task was to decide which of the personas I was to use as a primary persona. I could've used multiple personas if I felt it was necessary but after careful consideration I concluded that Willow was the best for this project. The main reasons for this were:

  • One of her preferred brands was Harvey Nichols — a similar high-end brand to Selfridges
  • Willow has high product knowledge — Selfridges is a high-end retailer with selective designers and brands
  • High spender on parties — would be more willing to spend at a high-end retailer

I used Willow’s persona profile to step into her shoes and create a concept map of her — this would help me to link her personality traits, processes and highlight pain points she has when planning a party.

Competitors
A look into competitors threw up some interesting options for Willow to look at when researching and planning parties.

  • Planners: these sites and apps helped with the practical side of planning such as guestlists, scheduling and budgeting.
  • Suppliers: these companies supply decorations, disposable plates/cutlery, outfits and other products for parties.
  • Department stores: direct competitors in the retail sector for Selfridges that stock a large variety of high-end products in a limited amount of stores across the UK.

Looking across a selection of online suppliers and department stores, I gathered data on the categorisation of party products, site features as well as the look and feel of the site design.

Looking across a selection of online suppliers and department stores, I gathered data on the categorisation of party products, site features as well as the look and feel of the site design.

Suppliers had a great deal of products available, the range was astonishingly large but they are sites that cater for the mass market and not necessarily to Willow’s demographic.

On the other hand, department stores such as Harvey Nichols, Harrods, and John Lewis had very little in terms of actual party supplies but you could find on-trend fashion advice in blogs that would definitely appeal to Willow.

Regarding site-design, the department stores research was very insightful. These department stores are portraying a high-fashion identity that appeals very much to Willow and other users like her. Minimal with plenty of whitespace, page elements are allowed room to breath — very very different from the party suppliers who have an dated e-commerce look that could potentially deter a high-end customer.

User Interviews and Task Analysis
Moving back to the user — I was determined to create a task analysis for her that was as accurate as possible. As such, I conducted interviews to gather detailed information about the tasks involved in creating a unique party. I did this with Zelia and Zoe — both working as designers (jewellery and UX respectively) in London and both with an extremely keen following of fashion.

Whilst conducting the interviews, I endeavoured to discover their feelings towards the tasks to get a good sense of how this microsite can serve them in the best possible way. The main takeaway from both interviews were:

  • Trying to get replies back from people is frustrating
  • The time before the party is always stressful

Although this was a great start and really helped me get under the skin of the problem, I wanted to gain more data to confirm the conclusions I was forming. I was given access to a series of interview information that pertained to the same problem. Combining everything together gave me two things:

  • The categorisation of tasks
    The tasks could be broken down into 11 main task groups: Theme, Budget, Venue, Time/Date, Invites, Clothes & Makeup, Entertainment, Food & Drink, Decorations, Pre-Party Prep and After Party.
  • Confirmation of the pain points
    Creating Willows user journey graph (below) plus adding other user’s data, confirmed where most pain points occurred. From of the main tasks, budgeting, and pre-party prep were the areas for me to concentrate on.

However… this wasn't the complete story because during one of my interviews with Zelia, she said this:

“There would be no stress immediately before the party if I’d planned my outfit properly”

This is a key quote. I realised that if the theme details had been sorted way in advance of the party, stress later on down the line could be minimised. Afterall, the users I interviewed said that researching the theme was NOT a pain point (and this is something Willow would find enjoyable too) but the consequences of not getting right was where problems could arise.

This research guided me into creating a user flow for Willow, plotting out her tasks that might gain more insight into further pain points. The results of this were interesting and helped validate my previous research.

Budgeting came up as an issue again but the user-flow revealed that theme generation was indeed an area to be concerned with. And again, invites/RSVPs came up as a pain point but specifically because of the different communication channels Willow’s guests might use.

All in all my discovery phase had highlighted these three main pain points:

  • Sourcing a theme
    Getting all the products needed for that theme ready for the party.
  • Budgeting
    Keeping on top of whether those products are on budget.
  • RSVP’s
    Invite management and across different communication channels.

Selfridges Visit
I felt it was important to visit Selfridges’ main store on Oxford Street. I’d never been to this store before so, for me, I wanted to get a feel of the place — it’s products, it’s staff and also how the party supplies were displayed in the physical store.

I have to admit that my findings were disappointing. It was a Wednesday evening at 6:30pm when I arrived and although visiting the store was a great experience, it gave me little insight to help with Willow’s problem.

However, I did glean the following information on my visit:

  • Location of party supplies 
    The party supplies are tucked away on the top floor between ‘Lifestyle Gifts’ (I would say that these are perfect Wedding gifts more than anything else) and Children’s Toys. It was not busy in the slightest around the party supplies and as there were no customers looking at the products (there were hardly any customers on that floor), it was impossible to observe customer behaviour.
  • Customer service
    Selfridge’s reputation for great customer service is well founded to say the least. All the staff I spoke to were welcoming, friendly and extremely helpful. The overall Selfridges experience from a customer perspective was delightful and made you feel as thought you’re in very good hands — a feeling that needed to be emulated in the microsite. But…
  • Locating the party supplies
    It took me a good 20 minutes to find the party supplies as the staff were clearly not sure where they were — I spoke to five people before I was directed in the correct direction.

Sitemap and Card Sorting
After all my research was complete I created a draft sitemap of my proposed solution. Although I was happy with this concept I conducted a card sorting test with two users to try and ascertain whether the different sections of the site fitted correctly within my site structure.

This threw up some interesting findings. Mainly that the titles of ‘Find A Theme’ and ‘Organise A Party’ were not clear enough to users. The different aspects of the microsite I wanted to include didn’t fit clearly into these two categories. This was good information that I determined to feed into my design testing phase.

Design

Design Workshop
Earlier in the process (in fact, during the discovery phase), a design studio was conducted. In a group of four people, we aimed to sketch out solutions to help Willow schedule here party planning.

This really was an excellent way of rapidly producing design solutions that I knew I could incorporate into my finished design. Concepts such as a countdown clock, moving tasks between dates, grouping tasks into date or type were all dreamt up in this intense (but enjoyable) group design session.

Sketching
As I completed my research and saw that getting the theme right was imperative to the life-span of party planning, I decided that this was to be my starting point for the microsite. Also, looking back at Willow’s persona information, I noted that there were two mentions of mobile-ready design and how important this was to her.

Taking these two points, I started sketching a mobile design in the hope that this would concentrate the flow down to it’s bare essentials. I believed that this approach would give me a focused user flow to employ in my desktop designs. Combining my sketches the knowledge gained from my user-flow research I designed a screen flow to test on.

Testing
Taking a selection of participants who were mainly from the creative industries, I determined to find the holes in my first designs.

The main takeaways from my first round of testing were:

  • Preset themes weren’t popular
    The majority of my users weren’t keen on preset themes being forced upon them and wanted to design their own party theme. One user said “I want to design my own party, not somebody else’s”. Flexibility in creating a look for the party was very important to my users.
  • The blog was the first port of call
    The Inspiration Blog was a very popular way of finding ideas for a theme. Users liked that you could take the advice and add products to your party planner from it.
  • The party microsite should be be found in the mega menu
    Users went from the main site onto the microsite by clicking ‘Inspiration’ in the global mega menu.

I enjoyed seeing my design being tested my real users but it highlighted issues with the overall concept that needed addressing. Mainly:

  • A theme-first approach wouldn’t solve Willow’s issues with budgeting, scheduling and invitations
  • Testing with mobile limited the scope of the design too much

It was time to change tact and concentrate on approaching party planning holistically instead of concentrating on one aspect in the hope that this would solve all the issues.

Using my new approach, I sketched an idea for new design and converted the new screen flow into digital wireframes to test further.

Iteration 1

These designs were far more successful when tested with users and were hitting all of Willow’s pain points that I wanted to address.

Through basic paper-prototype testing, I attained some fantastic feedback regarding the flow and design features. These were:

  • Having the party planner as a secondary link to the blog on the main page didn’t steer people towards it (which is kind of the point).
  • The party planner’s purpose isn’t clear enough.
  • Users found it hard to progress through the site.
  • The to-do list was more of priority than the calendar.
  • The budgeting page was very popular.

Iteration 2
My main concern from the previous design’s feedback was the way that people were not flowing through the site in the way I’d hoped. Although they understood the tabs, there was no clear understanding that this was supposed to show a progression.

The design changes I made were:

  • Change the tabs from a standard box to an ‘arrowed’ box.
  • The party planner became the primary link on the homepage, with form elements added that asked users basic party details.
  • The calendar and to-do list was swapped (to-do list at the top of page).

Iteration 3
It was at this point that I felt that transferring my wireframes into an interactive prototype would be a good step forward. Testing from this prototype would highlight more design changes to be made that may not have been picked up on paper-protoypes.

Testing this iteration on users provided me with the following feedback:

  • When getting to the bottom of a page, users didn’t know how to get to the next section.
  • Slider-bars would be a good alternative to text input on the microsite frontpage budget and guest form elements.
  • Users wanted a way of deleting products in the review page.
  • Users didn’t fully grasp that the theme dropdown and search function in the ‘Your Party’ page were flowing products into the area above.

For my final design prototype I took this feedback and made these changes:

  • Buttons added to the bottom of each page to guide users to the next step.
  • Slider-bars added on the frontpage.
  • Checkbox added on frontpage for users to choose whether they wanted a schedule auto-generated.
  • ‘Trash’ icons added to all products in the review section.
  • Theme dropdown, search and blog link moved above the products in the products section of the planner’s ‘Your Party’ page.
  • As the majority of users wasn’t interested in preset themes , I removed that option from the front page.

Please see the final design on my interactive protoype here: https://marvelapp.com/efa5gf and please, if you have any comments or suggestions, please just let me know.

How does my design help Willow?

In review, the ‘Party With Selfridges’ microsite helps Willow in the following ways:

  • Saves her time by keeping everything in one place
  • Helps her stay on budget and on schedule
  • Keeps her inspired

Next steps
The scope of this microsite is limited within this first sprint but I can see that future sprints could explore certain concepts even further. Certainly, there is research that needs to be conducted to make the ‘Auto-Generate Schedule’ functionality as accurate to Selfridges’ customer base as possible.

Early on in my user research, it was clear that Pinterest plays a major role in the research of a theme — from clothes to decorations. I would like to see Pinterest integration in the microsite to the point where users can link private Pinterest boards to specific parties. I would look to use this data from Pinterest boards to suggest similar products that Selfridges does stock so everything can be bought from the one source.

Inspired by Pinterest, a Chrome extension for the party planner could be a great edition. From this extension, users could save items they’ve seen online to a specific party and then Selfridges would suggest their similar products. 

Finally, I would like to test whether checkout integration with the microsite would be something users would utilise. My current design hands off to the main Selfridges checkout procedure and I wonder whether users would prefer to stay in their party planner.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.