Jus-Rol

A brand and website refresh to coincide with a new product launch

  • Client: Jus-Rol
  • Agency: Karmarama
  • Date: Winter 2014
  • Duration: 1 month
  • My Role: UX Designer
  • Deliverables: Competitor & analytics reviews, sitemap, wireframes

Jus-Rol is a ready-made pastry product from the General Mills suite of food brands.

To tie in with the launch of a new product line the client wanted to redesign the existing website to be able to accommodate the new campaign and also ensure that the site was accessible to multiple devices.

I was contracted by Karmarama to lead the UX design on the project.

Jus Rol UI designs displayed on multiple devices
Ju Rol Process

Image courtesy of @rawpixel

Process

The UX deliverables were developed in conjunction with the HTML prototype and visual design elements, with UX having enough lead time to be a few steps ahead. This enabled us to react quickly to both internal and client feedback and incorporate improvements into the design and build.

Instead of creating a throwaway prototype, the development team handcrafted the scaffolding for the production-ready, front-end code.

This provided us with not only a functional prototype but also a foundation on which to develop the web site's theme, saving valuable time and money.

Analytics Review

Reviewing the existing site analytics-enabled me to pinpoint existing strengths and weaknesses in both the site’s content and user experience.

These insights enabled me to develop a solid UX strategy centred around engaging, findable, accessible and sharable content.

Website analytics journey analysis
Jus Rol Sitemap

Sitemap

I developed an intuitive site structure that would allow users to easily navigate the website.

Content Model

Modelling key content types ensured that none of the existing page details were lost when creating the new architecture. This also provided the technical partner with a reference from which to create the new CMS.

Excel spreadsheet showing website content model
Jus Rol Responsive Breakpoints

Responsive Breakpoints

Defining how the fluid grid structure would behave across various breakpoints prior to development ensured there was no guesswork when it came to front-end developer hand-off.

Wireframes

I developed key wireframes to act as a guide for the development team who later created the HTML prototype.

HTML Prototype

Below is a video walk-through of the HTML prototype. It was used to demonstrate key functionality to the client prior to design and build. I was responsible for the wireframes and liaised with the in-house development team at Karmarama who developed the actual HTML.

UI Design

The responsive UI was designed by (then) Karmarama designer Ted Sterchi.

Ui Design for Jus Rol website

Testimonial

Ted Sterchi Profile Photo
Ted Sterchi
SENIOR DIGITAL DESIGNER
“Ben is motivated, thorough, and an all-around awesome guy! A pleasure to work with.”