The Problem

The Idiot’s Guides site had limited resource and budget. As a result it had been neglected, both in terms of UX and UI.

The task was to update the look and feel of the site to make it appear more considered and to bring the aesthetic in line with today’s design trends. A clear value proposition was required for the homepage and a rethink of the layout with clear sections and CTAs.

The case study covers the homepage and profile pages, with further pages to be updated in the coming sprints. At the time of writing. development work is yet to start, so revised designs are not live.

idiot's-guides-profile

The Profile page looked bare on sign up due to empty states not being considered.

The Process

Working with the publisher of Idiot’s Guides we drew on a small amount of user feedback and learnings from similar projects to outline the goals for each page. The homepage in particular had no clear hierarchy and confused most users.

Although content was already defined I reimagined the content structure and hierarchy giving more weight to the more important parts of the page. I then reflected this in the design by ordering, spacing and titling the elements to make the content more easily digestible for the user.

We reduced text on the homepage and used a large, clear value proposition at the top of the page with clear, bold CTAs for all of the most important actions for the user.

Empty states were considered on the profile page along with a more refined layout and consistent design approach. All designs were completed in Sketch before being handed over to the devs via Zeplin, with accompanying notes and assets.

The Result

The result is a clean, simple design in keeping with today’s design trends that honours the brand and provides a professional appearance for the business.

I have applied a unified site style guide to all elements, such as buttons, content tiles, typography and icons. Text has been reduced to keep messaging clear, readable and in line with usability best practice.

The designs are yet to be developed but stakeholders are happy and when compared to the old designs, users should be too.

Lessons Learned

Less is most definitely more, particularly on a homepage. User testing from this site and numerous others consistently shows that too much text is a turn off for users. The demand for a more concise and visual experience is increasingly highlighted and with the influence of social media will continue to grow.

Whilst flat design is ever present the pendulum has started to swing back ever so slightly towards skeuomorphism. Google’s material design being a good example. Subtle drop shadows and gradients add depth to CTAs and content and provide a more engaging and clickable interface for the user.

Subtlety is the key though, shadows, transparency and gradients should be almost imperceptible but when used correctly make the difference between a good design and a great one.

idiot's-guides-closeup

Subtle shadows and gradients make the difference between a good design and a great one.