NUS homepage mobile purple.jpg

NUS (National Union of Students) websites for England, Scotland, Wales and NI

Phone held_campaigns.jpg
Intro pages_Mobile x2.jpg

The original purpose of the old NUS website had been to provide a student discount card, news and advice. However, as the card is now run by another body, NUS wanted to completely revamp the site focusing mainly on campaigns that students cared about and as a second priority, news, press info and staff profiles.

 

The brand assets were limited to just colours, fonts and trapezium shape, so NUS commissed an illustrator whose subject focus fit in perfectly with their inclusive values. The vibrant illustrations allowed me to incorporate some fun and personality into the page designs.

Campaigns_Mobile x3.jpg
People and news_Mobile x3.jpg

Accessibility was particularly important for this website so care was taken to make sure all aspects of the design were compliant with the latest standards

Desktop homepage.jpg
Desktop campaign pages.jpg
Desktop news and people pages.jpg
Desktop_hompage_imac.jpg

UX and UI process

Review the existing NUS website, learn about the organisation and define the strategic goals for the new site

Old site.jpg
Competitors.jpg

Analyse competitor and peer websites, based on the new campaign-led focus

Study UX research data (including the results of a recent survey) to identify all relevant and important user insights

Survey results.jpg
Google analytics.jpg

Examine Google analytics data and record all insights that are relevant to the design and build of the new site

NUS guidelines2.jpg

Familiarise myself with NUS brand assets and design styles as well as the work of the illustrator being commissioned for the project

NUS guidelines.jpg
NUS guidelines4.jpg
NUS illustrations.jpg
Sign up flow.jpg

Analyse user journeys and define the IA

Come up with ideas to address the UX issues then create wireframes and revise based on feedback

Mobile wireframes.jpg
Desktop wireframes.jpg
Our staff mobile.jpg

Design working prototypes, learn from feedback and develop the designs further

Once designs are approved for build, create a component library and style guides for colours, typography, icons, imagery, button & link states, sizing and spacing.

After launch, carry out 
regular A/B testing on page designs, page elements and imagery to discover what works best and ensure success. 

Components.jpg
Laptop on bench2.jpg