Overview
Shopping has become a routine part of daily life, there are so many factors to how a product page functions, which in turn will impact sales. At itison the ‘feature page’ is where we can really sell the deal to the customer. Unfortunately our feature page was slightly outdated, and very muddled, as the years progressed more elements were stuck onto the existing design.
The goal of this project was to create a more streamlined product page, where we can let the deal really sell itself with a more logical layout.
Role
Research, prototyping, visual design, and user interaction design
Jan 2020 - Ongoing
Background
itison is a deals and events website where you can browse and buy special discounted deals. The feature page consists of all the information relating to one deal, and relating to the host, i.e the restaurant or hotel owner. Users can read through this information and can make a purchase.
Understanding the problem
The current feature page was outdated in style - as well as some other major problems. Information was not where you suspected it would be, it was difficult to work out the details of the deal before purchasing - availability, small print, purchase options were some of the bigger problem areas. The image gallery is one of the top selling points which we were not utilising in our current design. 80% of our clients are browsing from their mobile phones - though our old feature page on mobile were not designed with this in mind. The page ended up being crammed with text with no room to breathe. There was a lot that could be improved on.
Take a look at the old feature page here
Research and inspiration
I conducted initial research, focussing on what other sites were doing on their product pages, how to structure the page, and overall design of the page. The team collected screenshots and jotted down ideas we liked or didn’t like about other sites. This helped us form a small check list of components we might want to have on our own page.
The next steps was to collate all existing components that make up a feature page. A post-it for each element. And a sheet for each grouping.
Tracked data
Without making presumptions, we wanted to check that our design decisions reflect with how our customers shop. We were able to do this by asking our development team to track some data for us. We wanted to know how many purchase options there were per deal - so that we would know how many deals we should probably show on the page initially. How many images are there per deal and how many of those images do users usually scroll through - typically users would scroll through all images so creating a gallery view makes sense. We also checked if customers use the social links and how many left questions on the feature page.
Wireframes
After considering page structure and groupings on the page, I took my rough sketches and ideas and digitalised these creating quick wireframes to further develop the page the information hierarchy of the page. Myself and another designer worked through each section, testing out different styles and how each component would work. Once we had some rough ideas, we started compiling these into one larger page layout.
From the initial wireframes, I started developing our UI elements on the page - from our research and testing out ideas on our wireframes, there were a few key ideas I wanted to include on the final design:
-
Easily recognisable icon led small print and summaries
-
Large gallery view on desktop and tablet, with a “Instagram style” revolving gallery on mobile
-
A clean and modernised feel across the page
-
Clear sections with headers across the page
-
Easy navigation across all devices
-
Improved presentation of common copy such as menus, legal content and small print etc.
The outcome
The final page layout is optimised perfectly across devices. The page gives off a fresh and clean aesthetic, while still providing better semantic data than we had previously.
The hero section has an improved gallery view, where a selection of images are shown - a great selling point for hosts to show off their deal. Important selling points have been pulled out of the small print, and a cleaner layout has been designed for purchase options.
Our page sections have made the shopping experience a breeze, customers can easily scan over the details, check out the hosts menu, and read reviews all within the feature page. Data has been grouped so that everything you may need to know about the hosts availability all live in one place.
Thoughts and learnings
This project was a big one, and it was an eye-opening experience for me. I learned a lot about collaboration, and putting function over design. Unpicking all the elements and working out their hierarchy on the page before even considering the look of it was really important here. Creating a logical layout for the customer was the main goal and I think the team have succeeded greatly.
Apart from the research on this project, this was all done online from early last year. I learnt the value of having brain storm sessions and to review work together. I can't wait to see the future of creative collaboration online and the work that will be produced!