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

Event Schedule

Mobile Design

Landing page

Event page

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

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:

• 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

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.

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.

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.

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

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.