Classical King wanted to refresh their brand and digital presence to appeal to a younger more diverse audience without alienating long time listeners. To help them with this, they hired design firm States of Matter. States of Matter developed a brand strategy and visual identity. I was asked to help with the UX of the website. My goal was to ensure that we delivered a clean, simple and usable design that would support the needs of new listeners and long time fans.
I reviewed existing market and user research reports, talked with stakeholders to capture requirements, and conducted a competitive audit.
Based on the research and requirements provided to me, I planned the ideal user experience with sketches and wireframes.
I created detailed interactive prototypes. These prototypes were used during the usability study to evaluate the usability of the design.
I planned and moderated a usability study for the website. I optimized the designs based on the findings from the study.
In Figma, I establish styles and a library of custom components. I built each unique screen for the website with auto-layouts.
I was responsible for planning and monitoring the project schedule and timeline.
Key Deliverable
Over the course of several rounds of review and iteration, I refined an approach to the website gathering input from stakeholders and developers along the way. I designed the UI for desktop, tablet and smartphone breakpoints. Key interactions were designed and prototyped as a spec for the development team as well as a tool to evaluate usability during the usability study.
Key Deliverable
I provided recommendations for structuring the website, including labels that supported end user needs and goals.
Key Deliverable
During the usability study I met with several participants and observed them as they interacted with a prototype of the website. I also listened to their feedback to gain a better understanding of their mental model for the station and what they expected to see from the website.
Overall, the usability of the prototype was strong. However, we did uncover opportunities to improve the user experience in several areas and focused on sharing those recommendations with the client.
Key Deliverable
The Creative Director at States of Matter designed key screens based on the brand look and feel established. My role was to extend those designs to all key screens across desktop, tablet and smartphone breakpoints.
Key Deliverable
I created a column and baseline grid in Figma to guide the structure of the user interface design. All screen designs were built with auto-layout techniques to ensure the modular design could be updated with ease in the future.
I built custom components in Figma for all key user interface elements such as buttons, links, calendar pickers, and form elements.
The client is pleased with the work and excited to launch the site, which is expected in 2023.
A website redesign for a Seattle area public transportation organization.
Case Study
