Cambridge Audio e-commerce
Cambridge Audio is a British company that creates and sells audio related materials, from headphones or speakers to HiFis.
For this e-commerce website I worked as a design consultant. giving advice in terms of best practices for web and web implementation, and as a hands-on UX/UI designer on determined areas of the website design. What I'm sharing here are just some of the pages / components that I actually created, in this case, the product pages, main top navigation bar and megamenu.
​
More details on how design thinking and more advanced methodologies applied to this process can be given on request.
Task description
​
These are the product pages. The brief and execution are in keeping with a nice pleasant immersive experience at the top, with well taken care of images, that will only later have the detailed specs of the product and call to action.
This approach is seen on many e-commerce websites these days, where the objective is to make people have a pleasant experience with the product and brand and then think about purchasing it. Caters for a higher end market as well. Some very interesting internal research was conducted in terms of CTA positioning and the less is more immersive approaches (I can disclose more information on request).
​
Please see image below for more detail and responsive behaviour example.
Mega menu's key challenges
​
For the mega menu, the idea was to make it a very clear and simple navigation experience. For this brand and according to their products it was possible to list them at the top on desktop. No need to hide them, making it as visible as possible. For mobile and tablet versions this would not be possible, therefore it is kept inside a hamburger menu. I started this with pen and paper trying to understand how the behaviour of the menu would work best. Please see below the Low-fidelity wireframe for the Product pages as well. This was of course tested offline with users first and then AB-tested for validation.
Mega menu's solution
​
In terms of the megamenu itself, it works as a one column list, with a 2 col image. We highlight the selected section with a big title on the left. On the white brand and font, allied with the good image quality, this poses a pleasant visual experience that works well with the rest of the website.
​​
On mobile the menu works by navigating left and right, with 2 levels maximum, as it's not possible to have the top level at the top of the page as on desktop. Please see an example below.
