Skip to content

Redesigning the UX for Jus-Rol: An agile adventure

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

Jus Rol responsive website

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.

I worked 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.

Responsibilities

My responsibilities on the project included:

  • Defining our key audience
  • Reviewing the existing site analytics and drawing out any major trends
  • Feeding both of the above into a two phase UX strategy
  • Reviewing the current ‘UX Universe’ with the Digital Design Director for UX and UI inspiration
  • Developing a new site architecture
  • Modelling the existing content types
  • Defining key breakpoints for our fluid content grid
  • Developing top-level wireframes for global page elements e.g. navigation
  • Developing top-level wireframes for key page layouts
  • Overseeing the development team building the HTML prototype
  • Ensuring the digital design team followed the UX vision and layouts defined in the HTML prototype
  • Liaising with the technical partner to ensure the design and UX was feasible from a back end build point of view
  • Presenting key UX deliverables to the client along with the Project and Account Managers

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.

A big shout out to Matine for her awesome front-end skills that resulted in a fantastic HTML prototype and to Ted Sterchi for his digital design slickness.

HTML Prototype Video Walk-through

Analytics Review

Reviewing the existing site analytics enabled us to develop a solid UX strategy centred around engaging, findable, accessible and sharable content.

Sitemap

Jus Rol responsive website sitemap
Defining the new site architecture.

Content Model

Jus Rol responsive website 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.

Wireframes

Jus Rol responsive website navigation design
Capturing initial thoughts for an off-canvas mobile navigation which provided the development team with a clear vision for the development of the HTML prototype.
Page layout development.
Jus Rol responsive website breakpoints
Defining how the fluid grid structure would behave across various breakpoints.

HTML Prototype

Off-canvas navigation.

HTML Prototype

Jus Rol desktop prototype
Product page layout.

UI Design

Jus Rol recipe listing page
Final design for the recipe listing page with facetted navigation.
Jus Rol recipe detail page
Final design for the recipe details page.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.