After gathering and reviewing feedback from the existing designs I went about producing wireframes with a mobile first approach. It was apparent that the previous templates didn’t have enough content blocks so the decision was made to add more. This helped with the overall hierarchy and grouping different types of content. I went through several iterations of wireframes, going to the wider team and carrying out A/B testing to help identify the best way forward.

Once the wireframes had been tested and agreed, I moved onto high-fidelity visuals for further testing. The new layouts make use of subtle differences in padding and spacing to help differentiate content and reinforce the hierarchy. I created alternate layout options for desktop / mobile so that content will be displayed in the most appropriate way.