UX Design for Jus-Rol

I led the UX design whilst at Karmarama for the responsive website refresh for pastry brand, Jus-Rol.

Ju Rol Project Hero

Project Overview

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.e. responsive.

The Challenge

To work closely with the Project Manager at Karmarama to define an agile UX workflow that focused on cutting out documentation as much as possible and developing useful artefacts such as content models and HTML prototypes.

 

My Role

  • UX strategy
  • Competitor Review
  • Analytics Review
  • Content modelling
  • Site architecture
  • Wireframes
  • Liaising with the technical partner
  • Presenting key UX deliverables to the client
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 front end code up front. This provided us with not only a functional prototype but also a foundation on which to essentially write a theme directly on top of their existing code, saving valuable time and money.

Ju Rol Analytics

Analytics Review

Reviewing the existing site analytics enabled us to pinpoint exsting 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.

Jus Rol Sitemap

Sitemap

I worked with the team to develop an intutive site structure that would allow users to easily navigate the website.

Jus Rol Content Model

Content Model

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

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

Wireframes

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

HTML Prototype Video

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.

 

Jus Rol UI Design

Client 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.”

Tools

  • Sketching

  • OmniGraffle

Deliverables

  • UX Strategy

  • Content Model

  • Sitemap

  • Low-fidelity Wireframes

Type

  • Responsive website

Sector

  • FMCG

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Download CV