Brand, UX, visual
Stars At Your Service was a show on Channel
4 in Autumn 2014. I was design lead on the companion website, a
tool which allowed members of the public to book a celebrity to
do something with, all in aid of raising money for Stand Up to
Cancer. The resultant ‘bookings’ would be filmed for the show,
and, hopefully, heartwarming hilarity would ensue.
In it’s most basic form it was a casting tool for Endemol, the production company behind the show. Every idea submitted would be reviewed by their team and a select few would be picked and filmed. By the time the show aired, close to 20,000 people had applied in just a few weeks.
I worked on the the design of the product from pitch to final delivery, with support from a second designer during the UX stage. This case study will trace how I approached design in this project - from inception, early sketches and prototypes, through to the final visual polish, with a focus on the core of the site, the tool which allowed users to craft their booking.
At the stage of pitching the idea was still
very broad, should users be able to create their own ideas or
just ones pre-determined by the production team? If they can
create their own, how much freedom should they have? Can they
nominate someone else for the task? And perhaps most
importantly, how can we encourage people to donate to SU2C
(Stand Up to Cancer) as part of the booking process?
Mint’s approach is always to talk to users as soon as possible, even at pitch stage, to gather some real world findings which will ground our early thinking. We were less concerned with pitching a ‘big idea’ based on assumptions, and more interested in finding some nuggets of insight which we can question, test and build on as we move forward.
A booking coould be as simple as an empty text field and a submit button, but we felt there was an opportunity to create something where the booking process itself was a fun experience, this was especially important as we considered that people might want to make a booking and get involved, without any real desire to end up on TV.
To begin with we had a quick look around at interesting services that handled bookings and form filling, we especially liked how Oscar Health and Not Another Gift made form filling in fun, we also looked at games like mad-libs and paper fortune tellers - how one word or decsion at a time can generate a story.
At the same time we put an advert on
Gumtree with a call to answer a questionnaire to gauge a couple
of things 1) What will motivate people to get involved in Stars
at Your Service? and 2) How do people want to get involved?
In brief, we found that people were more motivated by charity and doing things with celebrities, rather than appearing on TV. There was an equal split between people who wanted to suggest an idea and do it, and suggest an idea only. And a two-thirds split in favour of worthwhile ideas, versus silly ideas.
These findings stirred up a few more questions, mainly around how Stars at Your Service should feel and what exactly the proposition was. We began sketching to feel out the different approaches, should booking a celeb feel more like booking a holiday, like a matchmaking site, or like a fruit machine?
From these sketches we produced some basic wireframes of the entire booking flow - the proposition we arrived at was charity focused with a simple and personalised matchmaking UX, which created an outcome that felt shareable. We were still making a lot of assumptions here, and of course, part of the goal of these was to 'wow' in the pitch, whilst still reamaning grounded in some intial insight and gut feeling.
We quickly put these wireframes in
front of a couple of people in the office to see how their
expectations were met and if they felt engaged with the
proposition. We found that:
These tests were done quickly, and
without a clickable prototype, but we felt in a comfortable
position to draw a few conclusions:
The overall tone of the project was
still to be explored, and would to an extent be dictated by
the production comapny and Channel 4, but we created some
early moodboards as a starting point for discussion which
we’d revisit later in the project.
Our pitch was well received and we began weekly sprints with the client in late Spring 2014, aiming for a mid-Summer launch, with the show iteself airing in the Autumn.
Initial meetings helped flesh out
technical requirements, features and the broader scope of
the website - as well as allowing people to make bookings
there would be competitions, one-off bookings and celebrity
profile pages, alongside some static content pages. We
started to think about how the site would appear in
different states (before and after transmission) and how
celebrities would appear once they were booked.
Our focus was still the booking flow, so with these other requirements mapped out in a rough site map, we began sketching sessions with the client which built upon our initial wireframe. Everyone picked up a pen and had a first stab at what the flow of booking a celebrity could look like.
Sketches from these workshops moved us away from the text-led initial wireframes into something more visual which put the celebrity at the forefront. Our original design constructed a booking in a sentence with four parts:
As we played around with different
booking examples it soon became clear that this would be
difficult to scale and keep as a coherent sentence, it also
didn’t lend itself well to mobile devices where space is a
We also sketched rough versions of the homepage in these sessions, and thought about how these would link in to the booking flow.
It was crucial for bookings to be easy
to make on mobile as we anticipated a lot of users visiting
the site after seeing adverts for the show on TV, sitting
at home, not necessarily near a laptop/desktop. Given that
it could be quite a complicated process, it also made sense
to start mobile-first to help ensure we created a slick
experience here, which could be enriched on desktop, rather
than something which had to be compromised for mobile.
I was keen to trial Flinto a new wireframing tool which allows you to quickly put together clickable prototypes. It has it’s limitations, but for quickly testing out a flow, at the time, it was ideal. After some rough paper sketches, I created very basic wireframes in Illustrator, exporting these as PNG’s into Flinto, then linked the various screens together with hotspots. The prototype can then either be viewed in the browser, or saved to a home screen on an iPhone for a more realistic experience.
We moved through four iterations of
mobile prototypes over two or three weeks. I would share
the latest version with the client before our weekly catch
ups in which we would go over the flow and discuss where it
could be refined, testing internally along the way.
These weekly meetups included the tech lead, myself as design lead, and occasionaly a third Mint. Members of both the production company, Endamol, and Channel 4 were present. Typically we'd run through the past weeks work, look ahead to the next, and try to push ahead on both design and tech simultaneously, whilst design was still evolving.
The solution I had arrived at was a kind of ‘mixing deck’ where the user could create and fine tune their booking. On this screen were options to refresh the suggested booking, write a custom booking, change celebrity, share on facebook, share on twitter, and a button to proceed with the booking. The challenge was balancing all these choices, which was difficult particularly on a mobile screen.
After the first couple of prototypes I moved to a more visual design which placed the booking and options on top of the photo of the celebrity, rather than the celebrity and the booking feeling like two separate things. Since users were picking a celebrity on the homepage, the feeling was that once they were in the ‘mixing deck’ area then it should feel strongly branded to that celebrity.
We continued toying around with the UI, adding a shuffle option (random celeb and random booking), but the interface was beginning to become overloaded and although we were providing the user with every conceivable option to craft their perfect booking, in doing so it felt like we weren’t directing them enough and the fun had been lost.
Matthew McConaughey, probably
It was at this point we took a step back.
The client also shared our concerns with the crowded UI, and
there was now a demand from the production company to try and
get as many custom bookings from users, rather than a lot of
pre-generated ones we’d populate the site with.
We had a rethink about the entire mixing deck, and quickly, and crudely, sketched a possible solution which stripped back the UI to it’s essential parts.
In this revised flow, after selecting a
celebrity the user was presented with an area to write their
idea, if they got stuck or needed inspiration they could hit a
‘Give me an idea’ button beneath, this generated a random
activity which could be rewritten or built on. Hitting done
took them to a kind of confirmation screen which brought back
the more visual approach of earlier wireframes - overlaying the
booking over a photo of the celebrity.
From this screen hitting ‘Book This’ took them to the next step in the flow - a chance to say why exactly they wanted to do their booking. We kept in options for editing the activity, this took the user back a screen, and a button to change the celebrity which opened in a dropdown to allow them to quickly switch between celebs and try different combinations without jumping back two steps.
The production company were keen to receive as many custom bookings as possible. The hope was from these they’d been some stand out suggestions which would make great TV. To try and encourage this I introduced a screen in between the first screen where the booking was created, and the confirmation screen. This was an overlay which would appear if the user had just selected a pre-existing idea, trying to nudge them to go back and be more creative.
It was a hard balance to strike - trying to
encourage users to be more creative, but not put them off using
an existing idea. We tried a number of different options for
copy to get the right tone but ultimately we dropped this
screen, it felt like an unnecessary barrier to entry, and was
quickly flagged during informal user testing in the office -
both at Mint and on the client side - as something which didn’t
Nonetheless, we were at a good point with the prototype. The client was happy with where we had landed, and we felt that the reduced solution we’d arrived at was simple and quick to use, and hopefully a little more fun as a result.
At this point I moved on to looking at desktop wireframes - translating the booking experience for larger screens, and starting to consider the many auxiliary pages which made up the site. These included:
I produced around 5 iterations of desktop
wireframes. Prototyping elements of the more interactive
elements in Axure where necessary. Of course, a lot of
fine tuning would happen in the browser, and learnings from the
skeletal, rough version of the site we had up and running were
informing my wireframing decisions here. I began to work more
closely with our front-end developer at this point, though
visual design would still have to wait.
The booking generator scaled up nicely, with few tweaks needing to be made. One concern was image quality, as on desktop these would appear full-width, so at an early stage we made it clear that we’d need to be provided with decent, high quality images and began to trial these.
I approached the pages in a modular way,
using a one-third / two-thirds layout for many of them which
stacked well on mobile. Around this time we also began to build
out a loose style guide in the browser featuring a library of
what were beginning to become the common elements across the
As design and build advanced, content was still a little behind - something we were going to be provided. Often your designs won’t appear in the ‘ideal’ state you have in mind, so I had to ensure pages and modules would adapt to large and small amounts of copy and that the design could degrade gracefully.
There are two points in the flow at which a
push for donations is made. Firstly inbetween you creating your
booking and entering your details, and secondly at the end of
the flow, once your booking is complete.
Mid-flow the donations screen included details on how you could text to donate, an image, and a brief amount of copy. We were careful not to overload the user with information at this point, or snd them off to another destination when they were most interested in completing their booking. However, at the end of the booking process a full donate form is introduced, along with further copy, and all the celebrities, looping the user back into the creation flow if they want to make another booking.
I often find a homepage is best to end with
rather than start with, it can be tempting to launch intp
homepage design before anything else, but it's a bit like
designing the cover before you've got a book to wrap it
The homepage needed to satisfy many requirements:
The solution was again to take a very modular approach so blocks of content could be added and removed easily from the page without the design falling apart. This was especially important when considering the post-transmission state which would be a lot sparser.
Visual design was pushed back to late in
the project as we were waiting on visuals from Channel 4 - the
show logo, and set designs, which would feed into the look and
feel of the site. We were eventually given a logo which had a
glitzy, Hollywood, red carpet feel.
Up until this point my wireframes were flat, and image led, but now I could begin to elevate this slightly, though I was keen to craft a style which complimented the over-the-topness of the logo, rather than one which mimicked it.
As we received the logo late, just under
two weeks were available for visual design. I designed several
key pages, but otherwise paired closely with our front end
developer to apply the style guide and design and tweak
indivdual elements where needed.
The look and feel remained predominately flat with bold typography and one strong colour. Yellow can be tricky to work with but using an online colour checker I ensured all text was legiible and passed Channel 4's accessibility guidelines.
Certain areas, such as the header, where embellished with stars to mesh with the logo a little more closely, though I was keen to limit the extent to which this was used, concious the pages size was already a little bloated due to the number of photos.
Once the style was established and implemented I had a little time to add some love to a few areas of the site. I created a number of small illustrations and icons as well as finessing empty and error states. Visual tweaks were also so made in the browser, for example, refining type size, and the darkness of images with text on until the balance was just right.
In under three months we had a fully
responsive site ready to launch. It was compliant to Channel
4's accessiblity and browser support guidelines, and in the
time it was live it collected over 20,000 bookings.
Here is a partial demo of the live, final site.
Overall I was very happy with the finished
product. Bookings were quick and easy to make and the process
felt smooth and fun. A big shout out to Mint's tech team for
keeping things lightweight and speedy.
In hindsight, perhaps we could have been more consistent and in-depth with our user testing. Once the project was underway most user testing was done informally and quickly in the office. Of course, part of the challenge was satisying all parties in charge of the show, managing their expectations, and delivering on time. As the website had a short lifespan we didn't have the time to gather in-depth learnings from our user base and apply these findings to the site in the way we can with our own products.
That said, I think the result was highly usable and the investment in time spent prototyping on mobile, afforded by great tools such as Flinto and Invision, more than paid off.
This project also taught me a lot about working in a modular, style guide kinda of way, rather than thinking on a page-by-page basis, something i've come to love and have since refined on more recent projects.
Director, Mint Digital