Mattel Kids Playsite
The Mattel Kids Playsite is a hub of interactive sites for children ages 5-10 years old. The rebranded websites include embedded Youtube videos, Mattel apps which include Barbie
and Hot Wheels games, and printable pdfs. All Playsite sites were designed with Sketch.
Playsite Objectives
-
There were multiple Playsites each dedicated to multiple Mattel Brands like Barbie and Hot Wheels. We needed a central landing page of the Mattel brands on one site.
-
A rebrand was needed for Hot Wheels and Barbie websites exclusively as well.
-
The new Playsites needed to be more interactive for kids. A mix of apps, games, & videos needed to be included on the rebranded sites.
-
The playsites needed to be designed in a simple manner so kids and parents could easily interact with the site.
-
The sites should be designed so it could be easily maintained and require minimal development updates.
Old main Mattel Playsite
Old Barbie Playsite
Old Hot Wheels Playsite
Research
Research consisted of different gaming website for kids. Websites from Nickelodeon.com and Nintendo were studied for playsite wires.
Kids Landing and Branding page Wires
The intended user for Playsites are kids ages 5+. With the intended user being older kids, any apps or games for younger kids, like Fisher-Price, would not be on this website.
​
The landing page acts as a bridge of content to take the kids to different destinations. Other pages for this site would be the games detail page. Videos and apps link out externally. The Landing page is divided by content type throughout which mixes the brands together. At the top are the Bubbles that would anchor to that section of the page.
​
The Youtube Videos would be embedded onto the landing pages and individual branded pages.
​
Console games such as Uno and Skip Bo and other content would be added throughout as "ads." They would visually look different than the main content and would link out externally.
Low-Fidelity landing wireframe
Low-Fidelity Landing wireframe
Mid-Fidelity Hot Wheels wireframe
.jpg)
Mid-Fidelity Barbie wireframe
.jpg)
Low-Fidelity Interstitial wireframes
High-Fidelity Interstitial wireframe
.jpg)
User Flow
When the user clicks on any of the games app, it would lead them to a games detail page.
When the user clicks on any of the apps, an interstitial would pop up and the user would have to agree to leave the page, if they do, then the page would lead them to the app store page to download the selected app.
Games User Flow
.jpg)
Games User Flow
.jpg)
.jpg)
Final Screens
The final screens display the approved layout and art for the main landing page, Barbie, Hot Wheels, Interstitial message, and 404 error page.
​
Each screen included their own branding guidelines. Barbie, Hot Wheels, and American Girl all include their dedicated colors, and embedded youtube videos.
The Landing Page:
Includes minimal branding because we had to assure there wasn't any clashing with any of the multiple brands displayed on the landing page. Each main brand module at the top of the page displays brand art with a banner below which includes each brand's perspective logo and color.
Every module has a go CTA in white. We needed to include some consistency within the CTAs for easy accessibility to users. The Games H1 is designed in the Mattel Red which matches the Mattel Kids logo.
​
We kept the background colors minimal so it would not clash with the vibrant colors of the multiple brands.
​
The Barbie Page:
Includes the classic Barbie hot pink as well as an additional Barbie pink. We utilized the classic hot Barbie pink in the background of the Games module and the title of each printable in the printables section. White was also utilized on the Games module for the banner below the brand art.
​
The Hot Wheels Page:
Includes the Hot Wheels yellow, and blue colors. The Hot Wheels blue was utilized as the background color behind all Youtube videos. We made the banner under the videos, and the See More CTA white. The text style for the youtube video titles are styled in black.
​
The Games background is a simple white behind a series of bright yellow game modules. The text style for the app names are in black.
​
Interstitial:
The interstitial had to be designed in a way where all the Mattel brands could coexist with each in an organized way. The different brands had to be displayed together but not bombard each other. The message itself displays a warning to the users that they are leaving the Playsite.
​
404 Error Page:
Is a simple designed page users will see when there's an error loading the playsite. The page displays an image of a child using a tablet.
Final Landing Page
Final Barbie Page
Final Hot Wheels Page
Final Interstitial
Final 404 Error Page
