Case Study Overview

In the winter of 2018, I was the team lead at a University UX Design agency: Design Clinic. We partnered with WCBN, a student-running free-form music station, to revamp their website.
‍
I led a team of 2 other designers to finalize the overall flow from concept to finish. During the actual design process, I focus on designing the global component, like the header, sidebar and footer, homepage, schedule page and donate page across desktop and mobile. I also established the visual direction of the website. Here is a high level overview of our design process, UX methods used and deliverables for each step.

Final design samples

Homepage

Schedule Page

Donate Page

Design

Create exploratory mocks

To iterate fast, we didn't invest too much time on making things pixel perfect in the beginning. Instead, we want to explore different directions of structure, get critique from the team, our design mentor, stakeholders, put it in front of users, see what works and what doesn't work, and make changes until we make it right.

Design Iteration

Creating a UI library

I led the team to decide on a visual direction and made an UI library for the team to help the collaboration.

We are using a rem spacing system of 16px as a single unit, and a CSS Flexbox layout.

We chose Century Gothic for heading because of its gracefully geometric look. Its clear, sleek and clean design allows for legibility at almost any size. It is also optimized for different screen displays. For body text, we chose open sans, because it feels modern and friendly, which is also the direction we are going after for the new WCBN look.

Since we are going for a modern, clean and youthful look for the new WCBN, we picked dark blue as our primary color with a complementary color of light yellow and pink. When placing the white typeface on top of a dark blue background, we are making the experience more focused and engaging, whereas the yellow and pink adds a favor of playfulness, optimism and youth into the overall experience.

Final Design

- Easy Access to livestream throughout the experience
- Featured events, programs and interviews to keep users updated
- Newsletter sign up and links to sister programs

- Only showing the most relevant event information upfront
- Offers both grid view and calendar view to make it easier for users to find interesting events that works for their schedules

- Showing today's schedule first with options to see other days'
- Showing DJ today to encourage user engagement

Clear Call To Action button for donation with explanation of donation benefits

- Showing contact information for all the departments with general contact defaulted to expose
- Having an job application form directly below the about section for recruiting purpose

Take-aways

There are many factors to balance while making a design decision. But to create really effective and meaningful experience, we should always take into consideration the context where that design will be used by the user.

‍When working with a team of designers, how can we make sure they all speak the same design language?
This was the challenge we encountered back then, everyone was using different font size for different level of heading, different color blocks and different card styles to create their own wireframes, which makes it hard to work collaboratively. To solve this problem and make the team better focus on the page structure instead of being distracted by the visual details in the initial wireframe stage, I created a wireframe library that included some basic components like typography, colors and canvas.
As we locked down the flow of the page, I aligned with my teammates on a visual direction and created more defined rules and components like spacing, hierarchy, buttons, cards. When working through the actual design, other team members also helped me translating the style into mobile design. The UI library really helped the team moved faster and worked more collaboratively

It was my first time lead a team of 3 other designers. I organized the weekly team meetings and have one-on-one sessions with my fellow teammates. Through this experience, I've learned a lot regarding to project planning, leveraging the skills and balancing the needs of teammates, resolving conflicts and checking on the team's progress. We always say developing empathy for user is the key to become a good UX designers. However, developing empathy for your teammates is the key to build a successful team.