SaySay Girls

Previous Project Next Project

Main project image

The Brief

Better Brief

2012

"Nice hot colours and a kind of 'Glee' feel to it all."

Steven Lipman - IP holder

SaySay Girls are a new entry into the girl's doll market, dominated by such existing brands as Barbie and Bratz. Their unique selling point is their ability to 'talk' to each other, with each doll storing a number of conversations and more being available to download from the internet.

The entrepreneur behind the product (initially labelled WinWin Dolls, as you can see from the various mockups here) approached Littleloud to devise and build an online social network/persistent game experience as an extension of the brand, to be launched before the physical dolls themselves to generate some buzz for the product. I was involved from the very outset of the project, sketching some very early ideas for layout and palette, and was involved right up until the end of the initial launch phase. As Lead Designer, I was responsible for all UI and (by extension) UX design, the web design, animation and also overlooking and steering the process of asset integration into Flash.

Development

With so much functionality involved in the online world for the SaySay Dolls, early designs were tricky and subject to continual changes. In-game panels needed consistency and logical design so that they could be understood by the young target audience, and I wanted to establish a palette and typographic ruleset early, so that I could knuckle down to producing the designs for each of the in-game screens. I often had to think deeply about how the UX of popular online tasks (email, instant chat, friend management) would need to work for both a young audience, and within the constraints of a fixed-width Flash window, occasionally needing to roll back a phase and amend wireframes based on the resulting observations.

Initial sketch of in-game navigation, made before proposal mockup.

Sketch of the user journey through a Store screen.

Button style and alternative nav sketches.

First design mockup as part of pitch tender.

An alternative colourway for pitch proposal.

Wireframe for the player's Penthouse location and UI.

Wireframe for the Decorate functionality inside the Penthouse.

Wireframe for the Wardrobe, which later became 'Customise'.

Wireframe for the Send A Gift functionality.

Icon, colour and typeface development stage.

Where possible, I tried to remove clutter from the persistent user interface, instead relying on strong iconography only backed-up with text on rollovers. With many textual elements being dynamic numbers or unknown quantities (the length of a username, for example), some design challenges were tricky balancing acts - ensuring that lengthy text or number strings were accommodated whilst smaller ones didn't appear lost in the design.

In the Messages section, I tried to marry up the functionality of iPhone SMS with the sorting options of email, whilst stripping down both to avoid feature creep and overwhelming the target audience. The Friends component needed some clever space management in order to incorporate all its intended functionality, using the advantages of Flash rollovers in order to achieve the solutions.

Final design for the Friends panel.

The Customise panel, where users can change the appearance of their doll.

Messages - a cross between email and SMS functionality for kids.

The design for writing a new Message to another user.

The Talent Show - a monthly competition for all SaySay users.

IM-style chat functionality.

With the in-game design wrapped up, I was then involved with the design of both the website portal and the online shop. This needed to be bold, bright and inviting - a strong starting point of the brand. Illustrations (by Theo Bain) were featured prominently, and the strong palette (young and feminine, without being too 'girly') was again applied to form a cohesive look between the Flash game and the surrounding HTML pages. I was even asked to skin the AIR app which interfaces the dolls with the user's PC when plugged in via USB

A very involved and challenging project then, but one in which I learned a lot about UX and cohesive design.

The landing page for SaySay Girls Online.

The Login/Register page.

The Game Page, with the integrated Flash Window.