User interface design for the redevelopment of The RSA website

UI design for the redevelopment of The RSA website, working within a multi-disciplinary UX team to deliver a flexible, scalable design system.

Client

The RSA

Role

UI Design
Person browsing the RSA website on a laptop, viewing an article titled 'Developing Socially Productive Places' with a chessboard image.

The Brief

The RSA needed to redevelop their website to better serve their 27,000 Fellows. The existing site had grown organically over time, resulting in inconsistent layouts and a fragmented user experience.

I joined as freelance UI Designer at MBA, working within a multi-disciplinary team alongside UX researchers, developers, and content strategists.

Apple iMac desktop computer displaying a web design workspace with color palette and project page layout, accompanied by a wireless keyboard and trackpad on a white desk.

Approach

The project followed an agile methodology with iterative sprints, regular design reviews, and close collaboration across disciplines. I was responsible for translating wireframes into high-fidelity visual designs and defining the visual language across all page templates.

Role within the team

Right arrow

Translating wireframes into high-fidelity visual designs

Right arrow

Defining the visual language across all page templates

Right arrow

Creating a style guide for consistent implementation

Right arrow

Collaborating closely with UX, development, and content teams

Right arrow

Participating in regular design reviews and feedback loops

Design considerations

The design needed to accommodate varied content types through a flexible grid system while maintaining clear hierarchy. Sketch was the preferred tool for the project. Having not used it extensively before, I quickly became proficient, delivering all UI designs and a comprehensive style guide for consistent implementation after handover.

Tablet and smartphone showing The RSA website homepage and an article about Megacity 2 with registration call to action.
Six-panel RSA style guide showcasing core tints, content spectrum, heading styles, text styles, icons, buttons, list styles, tables, breadcrumbs, and a sample form layout.

Outcome

The project delivered a complete visual redesign of The RSA website, providing the organisation with a flexible, scalable design system. The style guide established clear rules for formatting and styling elements such as headings, links, and icons, ensuring consistency as the site evolved.

"Jon has worked on a number of design projects for Cubeworks, which says something for the quality of his work in itself. In my experience, Jon is dependable, presentable, flexible to changing requirements and most importantly he's always delivered on time."

Alex Cowell
MD at Cubeworks/MBA
Next Project
Up arrow