Itsu UX review and homepage redesign
Who doesn’t love a challenge? Here at Thin Martian we are always on the lookout for ways in which we can expand our design knowledge and ideas. We are continually fine tuning our design and UX skills so we are able to exceed in every project we work on.
The team here were tasked with finding sites and products that they believed could be improved. After much deliberation we agreed to complete a UX and design review of the current Itsu website. We started with conducting a review of the site to look at what was and wasn’t working and then suggest how we could address changes to the design as if it was a live project. A few issues that stood out to us on initial review of the current site were:
- Outdated design
- Pages too text heavy
- The site isn’t user friendly
- There are two different designs for desktop and mobile
In this article we will walk you through how we would address these issues and present our recommended redesign of the homepage.
Information Architecture and UX
We begin each project with an information architecture phase, this helps us work out what the structure of the site should look like. Information architecture focuses on the hierarchy of information on a site, making sure the more important interactions and pieces of content are more prominent for the user.
During this phase we examine the number of pages and how the users flows between them. On revision of the current Itsu site we found that there are a staggering 76 pages. This is a large number of pages for any website and can drastically impact the level of accessibility for users. An important task for this project was to cut this number down. We managed to get this down to 34 pages, making the site more accessible and much easier for the user to find what they are looking for.
Similar content has been grouped together to create sections, which reduces the need for so many pages. It was important to bring relevant information to the top of the page and earlier on in the user flow, especially on the homepage to attract users to explore the rest of the site.
As well as reducing the number of pages on the site to make it more streamlined, we also needed to work out how we would optimise the content for web. We concluded that the best solution for the Itsu site would be to use HTML buttons and shorten sections of text so that only the most important information was available. This would help eliminate the issue on the current site where pages are too text heavy, which makes it harder for users to digest the content.
Mobile
Itsu currently have one design version for desktop and a different one for mobile. This offers users good accessibility, however to keep a consistent look and feel across the site, we would advise using one design of the site which is then made responsive to meet tablet and mobile requirements. Making sure designs are responsive is extremely important with statistics showing that users are visiting more and more sites on their mobile devices. In our mobile version the design has been stripped back to ensure optimum use on a smaller device. For instance, there is less imagery, as on mobile this would take too long to load using 3G or 4G. As well as this, we have included different CTA’s, as consumers visiting the mobile site are likely to be out on the move looking for food, therefore wanting to know where their closest Itsu store is.
Design highlights
Photography
After researching Itsu and close competitors, there were certain design elements we wanted to take advantage of in our redesign. We wanted to make sure we gave the page a fresh new look to abandon the current basic and outdated feel. The primary concept for the design was to use lots of photography, a mix of images and graphics to show off the food that Itsu sells. The food sold by Itsu is extremely visual, particularly the range of sushi. Therefore, it is important to have aesthetically pleasing photography and presentation to share the different products and portray the intricate detail of the food. For Itsu it is important to show off the products they are selling rather than their stores, with one of their aims focussing on food being beautiful.
Full width design
With larger screens becoming more common we felt it important to take advantage of the real estate space available with full width designs. The current Itsu website does not make use of a full screen design, limiting what the company are able to present to their customers. With the current Itsu website not being dynamic for users, we included a new feature in the form of a sticky nav. This means the user is constantly presented with the navigation menu, helping to access any part of the site they require. The main header on the homepage works as a carousel to help Itsu incorporate offers into the site.This is followed by space for smaller products and promotions, for example Itsu could showcase some of their new products in this area.
Social media
Social media has a larger presence within our redesign. Instragram instantly felt a clear winner because of the use of photogrpahy but also, Sushi is the second most Instragmmed and Hashtagged food, pizza being number one (http://www.telegraph.co.uk/travel/food-and-wine-holidays/The-most-Instagrammed-foods-around-the-world/).
We felt that Itsu should be taking much more advantage of this therefore, we incorporated their Instagram feed into our homepage design. This allows users to browse their feed and interact with the brand on the social platform. Links to their other social accounts gives the user the option to socialise with the brand on other platforms.
Style Guide
The Thin Martian team completed a branding exercise to work out what styles we were going to incorporate into our redesign. Itsu have two versions of their logo, we decided to use the yellow Itsu logo with no butterfly, which is seen on their store fronts. Different versions of the logo are used on the current site, we felt it was important to use one logo on the website to ensure consistency for users.
The current Itsu site, especially the mobile version, uses a broad colour palette which is overwhelming for users. We decided to focus on two main colours for the site, these are yellow and pink used throughout the new design. This is to ensure consistency for users and to make sure that the colour palette is not overwhelming on the eye. Black is used as a secondary colour for text, with grey and white being used as background colours of the website to divide sections. During our review we identified a problem with the typography on the current site. The font family used in headings, buttons, titles and CTA’s is not web-friendly, meaning the font has to be used as images and not as html/css. This hinders accessibility and optimization for users as it isn’t clear where certain features are. To solve this problem, our designer chose a similar but web-friendly font, Lato font family. The Lato is a well presented and a complete font family from Google fonts.
We also needed to refine UI elements within the redesign. Opting for simple buttons, for example the icons used within the main menu on the site. These are set up as a rollover state, enabling the user to have more visibility on what is available in different sections of the website. As our design includes a large amount of photography throughout the site, it was important to keep the UI elements simple, to ensure the new design was not overwhelming for users. CTA buttons have also been kept simple, with the added touch of changing colour when users rollover to show they are actionable.
Conclusion
Overall, we are extremely happy with the outcome of the redesign. Working together as a team we were able to identify issues and then collaboratively solve them. Although it isn’t a real project, we believe it is important to experiment with different companies, to be able to learn new techniques and tips to help improve our skills for any future projects we take on.
