I worked with the Electrical Computer and Engineering (ECE) department at the University of Washington to design a website for the Northwest Energy System Symposium (NWESS) 2022. As a solo designer, I led the entire design process, collaborating with multiple stakeholders.
Conducted competitive analysis and user interview
Crafted Information architecture
Sketching & wireframing
Created hi-fi prototype
Site development with WordPress
Jan 2022 - February 2022 (6 weeks)
When the NWESS website was last built in 2018, the ECE department didn't have a designer, which resulted in the site looking completely outdated. The program manager told me they want to revitalize the website to enhance their online presence and attract larger audiences.
By implementing a user-centric approach and branding effort, I successfully enhanced the website's usability, accessibility, and aesthetics. Below are the final designs of the landing page and schedule page where the most significant transformations were applied through various refinements for optimal user experience.
From here, you can learn my research and design process
Since my client had limited knowledge of UX design and branding, they did not ask me to conduct any research. However, I suggested we take a user-centric approach to successfully attract and convert audiences. Due to their limited budget, I opted for some quick and dirty research methods to gather information at no cost, such as competitive analysis and internal user interviews.
Learned about the trends and patterns of conventional event websites
Understood what people expect from the site and primary information they need
Built an easy-to-navigate site structure based on the research data
Created a page layout that is easy to scan and find the information quickly
Made sure that users can complete the task without errors and frustration
Ticket prices, dates, and topics are the top 3 decision-making factors for conversion."
Users want to gather the most information from the landing page
Many event sites use a similar site structure and naming convention
Users think that the presence of sponsors and well-designed sites enhances the trustworthiness and reliability of an event, making them more likely to show interest.
After gaining a better understanding of users' needs and familiarizing myself with common design patterns for an event site, I began crafting the site structure. To achieve user-friendly navigation, I implemented the following:
Made primary information accessible on the home page
Moved the secondary information to the right sub-pages, FAQ, or the footer
Made the navigation simple by using simple words and following the conventional naming I found through competitive analysis
Utilized FAQ to provide answers to more specific questions users may have
In response to user preferences for efficiently accessing essential event information, I opted to optimize the landing page to serve as a comprehensive source and allow users to grasp the gist of the event without visiting multiple pages. Once the content for the page was determined, I sketched out several design ideas for the scannable page layout. I then created wireframes, employing grid systems with 12 columns for desktop and 4 columns for mobile to ensure precise alignment of elements on different devices.
After the page layout was determined, I decided to establish the style guide first. Since the NWESS event committees didn't have their brand assets, I crafted it from scratch, making sure they followed the WCAG 2 Level AA. For the primary color, considering the NWESS logo, I chose turquoise blue and yellow to represent sustainability and energy. Establishing design guidelines in advance helped me cut down a significant amount of editing time.
For the event schedule page design, the organizer provided me with a spreadsheet with speaker information, presentation details, and timelines. My task was to organize and present this extensive data in a user-friendly, scannable format. So, I explored various designs to find the most intuitive one and made the page easy to navigate.
Scattered information caused busy eye movements
Too many boxes made it challenging to identify the CTA
This design was the most intuitive for users - easy to scan and find CTAs
While I was informed by the event chair that the majority of users would access the site from desktop devices, I strategically planned the structure of the schedule table with mobile responsiveness in mind. I employed 2 columns designed for its ease of scaling down to a mobile view. I also optimized the user experience for a smaller by collapsing the boxes to minimize scrolling and incorporating a distinctive colored edge to the expanded box, aiding users in identifying open sections. This adjustment significantly enhanced navigation on smaller screens.
The landing page drastically increased user engagement and the average time spent on the site by 38%.
The optimized event timetable decreased task completion time by 50%.
This website attracted over 100+ users to purchase event tickets, and the client was also pleased with the enhanced online presence.
This design served as the template for the following year's symposium.
From this project, I learned that when stakeholders are not familiar with UX, it's important to advocate for UX research and design to achieve successful outcomes. When we don't have enough budget and time, designers should be able to choose easy and low-cost methods as well.