Mockup image


Transforming an event website for robust online presence and conversion

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.

My Role & Contributions

Web Designer

  • 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)




Figma, WordPress


The outdated original design needed to be revamped

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.

Original designs

Design Solution

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.

Landing Page

Home page prototype

Event Schedule

Schedule page prototype

Mobile Design

Home page demo (mobile)

Landing page

Schedules page demo (mobile)

Event page

From here, you can learn my research and design process


Taking design initiative with a user-centric approach

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.

1. Competitive Analysis

Learned about the trends and patterns of conventional event websites

2. User Interviews

Understood what people expect from the site and primary information they need

3. Information Architecture

Built an easy-to-navigate site structure based on the research data

4. Wireframe & Prototype

Created a page layout that is easy to scan and find the information quickly

5. User Testing

Made sure that users can complete the task without errors and frustration

Key Findings

  • 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.

Creating a simple navigation that makes a logical sense to the users

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:

Information architecture

Transforming the landing page into a comprehensive yet easily scannable source.

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.

Sketch image
Desktop & mobile wireframes

Setting a style guide to cut down editing time

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.

Style Guide

Finding the most intuitive and scannable schedule box designs

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.

box design idea 1

Scattered information caused busy eye movements

Box design idea 2

Too many boxes made it challenging to identify the CTA

box design idea 3

This design was the most intuitive for users - easy to scan and find CTAs

Responsive Schedule Table

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.

responsive design image


  • 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.

Let's connect,

if you want to learn more about my projects, give feedback, or work on an exciting project together!