![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/34e4f0a2a80f5f5298e86140_rw_1920.jpg?h=2b49db9a38ff7cb8ef14fd4b94128833)
About
What Hi-Fi?, founded in 1976, is the world's leading independent guide to buying and owning hi-fi and home entertainment products. For 30+ years, the What Hi-Fi? Awards have been the ‘Oscars’ of the hi-fi and home cinema industry, with a Product of the Year and Best Buys at a series of price points in every product category.
What Hi-Fi? was born in print, but it needed to move into the digital age with a cutting edge website that offered what the magazine did, but online.
Brief
What Hi-Fi? needed a responsive website that would serve reviews of all of their products to the user across all platforms, internationally. It was a big job. The first step was to establish the business goals, which we constantly referred to to ensure every decision and feature aligned with them.
![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/93ef9a877780c22c88fd0aa6_rw_1920.jpg?h=f045acb71cff66be0a62b3b5cd7eb5b1)
To give myself a better understanding of the features and facets of the product, I created the below mind-map.
![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/5bea49b9115ebd2ec25b8145_rw_1920.png?h=c847ceafeadb4d8b653a9e727f2d9c61)
Deciding to be truly digital and cutting-edge, I decided to create wireframes, design a 'style guide' and then prototype the whole website in-browser instead of creating design assets to hand over to the development team. I believed this would help all stakeholders and myself see the website on real devices and test them instead of just seeing and signing-off on 'pretty pictures'
Wireframes
![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/8197a01e242b09d72a30d0a2_rw_1920.jpg?h=ff386299379c350303fe3be8b95d7171)
Design
![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/6cfd21521f3d8de0705b1b6b_rw_1920.jpg?h=f314f1a037710b06db52652843184ca1)
Prototypes
Below are links to the the HTML prototypes I designed and built in-browser.
Final product
![](https://cdn.myportfolio.com/0f2b0e3c0fd7a52ce0af921a0fdadc78/3e5e0e0ac98669f1121c6f8e_rw_1920.jpg?h=e7856dd1ec788788a261d490fc91b5aa)