(310) 386-6171

KOTX Website Design

January - March 2019

Background

For this project, my team and I were tasked with finding a client in the San Diego community to either design a website or redesign their current website. The end goal was to create a high-fidelity website prototype to give to the client so they could find a developer to code and run the website to the prototype specifications. We created both desktop and mobile versions, but designed mobile-first.

Key Skills

- User Research

- Competitive Analysis

- Mood-boarding

- Prototyping

- Style tiles

- User Testing and Iterating

Our Client

We chose to work with KOTX, a dance group focused on Korean pop music, or K-pop for short, based in UCSD. One major reason we chose them was because one of our team members was an active member, so we would be ensured constant communication with our client. Based on our initial client interviews, we found some key insights:

Theme

"What are keywords you associate with KOTX?"

"Approachable, inclusive, diverse, fun"

Purpose

"Why do you want to create a website?"

"We use Facebook for information and it can be confusing and hard to find details like how to become a member or upcoming events"

Audience

"What is the primary audience for the website?"

"New and returning students, as well as potential sponsors or people looking to book KOTX for performances."

User Interviews

We interviewed people from the different audiences that KOTX was targeting, and created personas for each group:

Competitive Analysis

We conducted a competitive analysis with four key competitors based on branding, functionality, content, site architecture, navigation, and design. See the competitors and our thoughts on their websites in the embedded Google Slides below:

Here is a summary of our findings and key takeaways:

Paper Prototyping

We each created our own paper prototype, then consolidated our ideas into one paper prototype that became the basis of our further iterations.

Initial Digital Prototypes

We created a low-fidelity digital prototype for both desktop and mobile using Figma. We used Figma because it allows for real-time collaboration and most of us were familiar with it. The prototypes were in black and white other than the images we used, which we copied from the KOTX Facebook page.

Landing screen has relevant image and motto for people new to KOTX

Contact info at the bottom of every page

Upcoming event links for prospective/returning members

Navigation is easy to understand

You can find the link to our interactive mobile prototype here and the link to our interactive desktop prototype here.

Styling

We wanted the styling and theme of the KOTX website to be fun and approachable. We also wanted to set ourselves apart from other dance organizations, since the K-pop aspect is unique to them. Lastly, we also wanted to keep the existing color scheme of KOTX, which uses primarily purple and pink. We each created style tiles in order to settle on the visual language of the website.

We sent these to KOTX staff members, and a majority voted for the bottom left style tile. Our team also voted for this one because we thought it had the most character and conveyed the feeling of a K-pop group the best.

Final Prototype

We used this information as well as data from user testing to create our final prototype. These were the changes in content that we made.

Made the difference between being a member and a non-member easier to understand

People said it was hard to find contact information, so we created a contact page where people can fill out an email form

Made staff categories a drop-down so people can find the people they are looking for easier

You can find the link to our interactive mobile prototype here and the link to our interactive desktop prototype here.

Final Thoughts

This project was very fun and insightful for me. It was nice to be able to dedicate around two months for this project, unlike some other classes that I've taken. Working with a client that we chose ourselves was also insightful in terms of what it's like to work with real people, and balancing their needs with the needs of the website visitors. Communication was key in order to be on the same page with our clients and with each other.