contribution
UI Design, Brand Design
year
2019
duration
1 month

About the client

Yippee is the umbrella company for Babymaxi.com– an online store that sells baby products, mainly focusing on carriers. A baby carrier is an increasingly popular carrying method, which allows parents to ergonomically carry their infants much more intimately than a pram would.

Incentive

Support for Yippee's e-commerce CMS was about to cease, so they reached out to Blauwfruit to set them up with the most recent version. Blauwfruit asked me to redesign and rebrand Yippee's website, while they updated the client's CMS.

Layout restrictions

My contribution to the project was mostly in its brand design. Reinventing the wheel is neither practical nor necessary for most online stores, so we chose to use PrestaShop's default layout options.

Kickoff

First things first: Let's see what we're workin' with! We started off by identifying pain points and discussing what the client would like to get out of their website.

  • Users would benefit from...

  • A more streamlined UI. Really double down on what's clickable and what's decorative.
  • A refreshed information architecture. Highlight the elements that drive sales and deprioritize secondary elements.
  • A professional and contemporary brand design, to make a lasting impression on users.
  • A responsive layout. A lot of consumers use their phones while browsing.

Delivered version

The website was the central part of the assignment. The client was happy and so was I, but I wanted to take it a bit further. After the initial delivery, I dove back into the Babymaxi brand design to see what it could look like without the layout restrictions.

Brand design

Color palette

Primary palette

If a client tells you to 'make it pop', you make it pop– though popping colors aren't usually associated with infants. The palette chosen for this project is a new spin on the classic pastel baby color scheme. The off-pink Salmon hue is offset by a complimentary aqua tint to keep things interesting.

Salmon

Coral

Scuba

Charcoal

Secondary palette

The secondary palette serves as a background palette for the block buttons in which Yippee's suppliers are shown. Additionally, the secondary colors can be used for illustrations or as a base tone for color filters.

Typography

Quicksand Medium

Quicksand Bold

Photography styling

By juxtaposing isolated product photos over Yippee's brand colours I was able to create professional-looking and on-brand image material for the website. The majority of photos used are product photos– simply because that's what was available.

Results

Product cards

Desktop

Mobile

Checkout flow

The wave element serves as a progress indicator in the website's checkout flow. The toy car that 'rides' it is a wink to one of Yippee's other ventures: An online store that sells old-fashioned toys.

Learnings

Ye Olde Photoshoppe

I'm somewhat embarrassed to admit it, but the first version of this project was entirely done in Photoshop. In my defense, that was the way I learned it during my internships. When I got cracking on the updated version of this project, however, I used some more modern software options– and it shows, if you ask me.

Final-final-v2.9-copy

The Yippee project I wrote about in this case study is an update of the original project, with about a year in between the two versions. It's interesting to see how my skill developed over that time period and how that ultimately affected the more refined version of these designs. Wouldn't it be nice if a yearly update round was the standard?

piqued your interest? let's talk.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.