Rebranding and Designing College Radio Website
Web Designer & Developer @ KSDT Radio
Challenge
KSDT is a college radio station that provides a friendly, counterculture environment for students at UC San Diego. Their website’s previous design failed to reflect the unique community or advertise the extracurricular opportunities and services the station provided. Our challenge was to create a website that was aesthetically modern yet punk while providing features and functionalities that aided the goals of the school organization.
What I did:
Over the course of 10 weeks, I worked with a team of 4 on the branding, design, information architecture, and code to rebuild a college radio website with the goal of increasing student involvement and web traffic. I have since continued my involvement with the client as a developer.
Deliverables
Process
Research
As the lead UX researcher, I strategized our research goals and interview protocol for the project and spent a lot of time at the station doing field studies and interviews. I was responsible for analyzing and documenting the data.
Requirements Gathering
To understand the key goals and objectives of the project, I interviewed stakeholders, asking questions concerning their goals, branding, technical constraints, ect. As the only researcher on my team, I was also responsible for field studies and brought back knowledge about user types, the culture and relationship dynamics.
I used the qualatative data to construct a Client Proposal that documented a description of the client and audience objectives, design perspective, heuristic evaluation of the site, and user information as well as my insights from the research.
Understanding Users
I created 3 proto-personas and we worked together to recruit and interview participants based on these profiles. We wanted to understand audience design perspective, goals, and problems with the site. I strategized the interview questions and testing script for users to do a walkthough of the site. We used the resulting data to refine our personas and write user stories, then compiled the information into a Features & Function Priority List by tallying the frequency of use cases and severity of errors.
Competitive Analysis & Content Evaluation
I analyzed various radio sites and looked for the best and worst elements in branding, functionality, scheduling, ect. We compiled our evaluations into a presentation and this work influenced our decision-making for the IA, visual design, and branding of the site.
Visual Board
At this point, we had an overall sense for the aesthetic preferences of our client and audience. Together, we created a visual board that featured UI elements and relevant images that captured the inclusive, fun, and counterculture brand we evaluated for KSDT. I presented the visual boards to the stakeholders for approval, and we continually referenced it during design brainstorming sessions.
Design Proposal
Our research resulted in a deeper understanding of stakeholder and user needs, competitor sites, use cases, design goals, technical constraints and branding aesthetic which we compiled into a creative brief for our clients to review.
Use Cases
- Tune into live station
- Find DJ schedules
- Apply for station positions
- Discover events and opportunities
- Learn and contact organization
Design Goals
- Home page - highlight live radio & show schedule
- About Page - include photos and student opportunities
- Events Page - include photos, past events and giveaways
- Info Architecture - improve path for schedule, events and opportunities
- Contact page - update copywriting, photos and location
Design
Info Architecture & Site Map
Before putting our ideas to paper, we had to ensure the skeleton was correct. I did a content evaluation of the original website and reorganized the IA based on our competitive analysis, documenting the hierarchy of features and links into a site map.
Writeframes and Prototyping
We worked as a team to ideate the appropriate UI to accomplish our gaols. After the wireframes were approved, I worked with another designer to create web and mobile prototypes, teaching her to use Axure and UI libraries in the process.
Testing on Users
We validated our designs by using a task list I created and observing how users performed as well as their reactions to our design. Due to time constraints, I only evaluated efficiency, effectiveness and attitude as well as cognitive walkthroughs of the interface with our 3 user types.
Development
To meet this challenge, we created an ambitious development plan where I worked on the About, Events, and Contact page. We used Git to collaborate and I was the 2nd highest contributor. Coding languages used: Javascript, HTML, CSS.
Results
The website was a success during client and user feedback and we took them away from a "boring fashion template" to "accurately capturing the staff and audience counter-cultural aesthetic." I received an A in the course and esteemed remarks from my professor, who applauded our ability to turn "anti-design into something functional." After the project, I worked with the KSDT Web Development team to implement our HTML, CSS, and Javascript files into WordPress and PHP.