- 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.
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.
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.
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.
Testimonial
Ted Sterchi
SENIOR DIGITAL DESIGNER
“Ben is motivated, thorough, and an all-around awesome guy! A pleasure to work with.”
Monthly UX Newsletter
Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.
