Channel 4
Stars At Your Service - book a celebrity and help beat cancer.


Summer 2014


Design Lead


Brand, UX, visual


Mint Digital

A great photo of myself

The challenge

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.

The Pitch

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.

Hi Oscar
Not Another Bill

Early user research

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?

Initial wireframes

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.

Pitch Wires
Pitch Wires
Pitch Wires

A few of the intial wireframes produced for the pitch

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:

  • Users seemed to have fun creating a booking
  • Both users were excited to create an amusing mission for a friend
  • Users missed the fact you could write your own mission - they had missed the link, but also felt unprepared to do this
  • Users were confused about the concept of missions
  • Users responded better to the concept of booking a celebrity - they knew what to expect


These tests were done quickly, and without a clickable prototype, but we felt in a comfortable position to draw a few conclusions:

  • Generally we felt like we were heading in the right direction
  • More work was needed on messaging and copy
  • Responsive design needs work, mobile will be a big audience
  • How can it be future proofed? (Flexible to different celebrities availability)

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.

Expanding and defining requirements

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:

How about you and celebrity name have a activity at location with friend/family etc..

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 premium.

We also sketched rough versions of the homepage in these sessions, and thought about how these would link in to the booking flow.

Wireframing, mobile first

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.


Setting up a v1 of the prototype in Flinto

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.

Walking through making and submitting a booking, this was around the third iteration

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.

Switching celebs and shuffling the booking

"Sometimes you've got to move backwards to move forwards"

Matthew McConaughey, probably

True Detective

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.


Sketching in collaboration with Noam Sohachevsky

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.

A higher fidelity clickable prototype in Flinto, based on the previous sketches

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.

The final mobile prototype

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 sit right.

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:

  • FAQ's
  • Donations / About SU2C
  • The celebrities
  • An individual celebrity page
  • Competitions
  • Terms & Conditions, Privacy Policy etc..

Translating to desktop

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.

Wireframe, desktop
Wireframe, desktop
Wireframe, desktop

Design vs content

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 site.

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.

Wireframe, desktop
Wireframe, desktop

A few of the desktop wires


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.


The homepage

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 around.

The homepage needed to satisfy many requirements:

  • To introduce the show and concept of bookings
  • Show available celebrities with a link to book them
  • Include flexible areas for competitions and special bookings
  • Include examples of past bookings
  • Have a call for donations
  • At a later stage, links to clips from the show

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 begins

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.

Visual design
Visual design
Visual design

Final flourishes

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.

Stars at Your Service website, icons

The result

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.

Further thoughts

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.

"Kim and the Mint team prototyped, designed, and built an elegant responsive solution across mobile and desktop for Stars at Your Service"

Noam Sohachevsky,
Director, Mint Digital


↢ Prev project

Universal Music

View project

Next project ↣

The Bathory

View project