The Challenge

While there’re many downloads of the podcast episodes on mobile apps, the client wanted to shift the focus to the main website where she will be offering career counseling and online courses. I needed to breakdown the problem and find out how to improve the usability of the website to attract more users.

User Research

During the initial stage of brainstorming, I created below two personas based on one-on-one interviews and surveys:

Client’s View On Current Design:

• More user friendly and easier to discover contents

• A new design to attract more subscribers to the weekly newsletter and the podcast

• The current website includes a home page, about page, podcast page, blog page, career page, coaching page, contact page, and subscribe page. She also has podcast subscription links on the side of each page. On the podcast page, blog page, and career page, hundreds of episodes of podcasts are arranged in vertical scroll by chronological order. Users have to scroll down indefinitely to find what they are looking for.

User Pain Points:

• Infinite vertical scroll of podcast episodes on Podcast and Career Page

• Information arranged in chronological order instead of by industries or professionals

• Want to learn more about a professional’s background

• Almost impossible to search for a specific person

• Really hard to explore other episodes or person that could be interesting

• All kinds of blogs are mashed together on one page, makes it hard to choose which ones to read

“I would only click into the first few episodes because I just don’t have the patience to keep scrolling down endlessly to find something that I might be interested".”

“I don’t know where to start searching because I have no idea what my options are. Who’s on here? What are they talking about in the episode? Is there even a page with content previews for me to search?”

The Problem

Features for Improvement

After user research and the ideation process, I came up with six features that need improvement to solve user problems. These improvements can help achieve a seamless user exploration experience and optimize the number of subscribers.

1. Career Page by professionals: regroup all the podcasts by the featured professional within a certain industry and display under the professional’s thumbnail

2. New individual professional page: create a page dedicated to each professional with their personal information and all the podcasts and blogs that they are featured in.

3. Podcast Page by content: regroup the podcasts by what type of information is presented in different episodes and with certain length.

4. New search page: separate search page that allows users to look up information based on professionals with simple preview.

5. Blog Page: redesign to keep consistency with the other two pages after regrouping.

6. Subscription section: redesign and replace the subscription sign-up box to be more prominent and attract user attention

 Sketches

Thumbnails:

Career Page:

Professional Page:

Podcast Page:

Blog Page:

 User flow +  Wireframing

Low-Fi

Mid-Fi Wireflow

Usability Testing

After creating a mid-fi prototype, I recruited 10 users for the usability testing, during which I gave them several tasks to complete and also asked additional questions to further measure metrics such as satisfaction, emotional engagement, and fit within existing practice.

Data Analysis:

1. Career Path: needs to be more precise and easy to scan

2. Interview Highlight Content: users would be more interested in some information over others; need to change the hierarchy and placement

3. Search by Featured Topics: too detailed and will need constant update; users were confused when too many search functions were presented

4. Podcast Categories: users were confused by the names that Time4Coffee uses for different podcast types; needs constant reminder

 Iterations & Explorations

Professional Page Career Path:

Professional Page Interview Highlights:

Podcast Dropdown Menu:

Subscription Section:

Final Design

Visual Guidelines:

Final Design:

Podcast Home Page:

I created a new page to display the podcast episodes by different categories. Users are able to choose the categories at the top of the page with the number of available episodes. Underneath, each episode shows its title, featured professional, and related industries. They are clickable links which can lead users directly to the individual professional page and explore by industry page. 

Professional Search Page:

This newly implemented search page allows users to look up professionals by names and featured topics. They can also choose to display in list or thumbnail grid. Users can directly click into their individual professional page or explore other podcast episodes by industries.   

Industry Professional page:

This new page is created to organize all professionals within a certain industry. Porfessionals are listed with names, position, company, and related industries. Each thumbnail is linked to the individual professional page where users can find their information. 

Individual Professional Page:

After conducting user research, this new feature was created to provide the aggregated information on an individual professional for users to better understand and relate to the podcasts. This page includes their company, position, education background, featured podcast episodes, career path, interview highlights, and recommendations of related professionals. Users can get a preview of this professional before listening to the actual podcast. 

Blog Home Page:

This newly designed blog page allows users to skim through contents faster with a three-column layout  and keep consistency with the rest of the website. 

Subscription:

I rearranged the subscription section to distinguish subscriptions for the podcast and the weekly newsletter. I also adpoted more casual tone for the sign-up button. 

Reflection

Challenges and Learnings:

This was actually my first time redesigning an entire website for a client, and it was overwhelming at first since I was the only person in charge of this project. It was very different working with a client because I realized how much back-and-forth communication was involved within each step. While I had to put users’ needs as priorities, I was always reminded of my client’s demands as well, and it was challenging to come up and iterate designs that satisfy both ends. Furthermore, Search Engine Optimization was also taken into consideration in the design for a greater online presence of my client’s podcast. Throughout this redesign process, I also made a lot of mistakes such as forgetting to organize a set of design guideline before prototyping and realizing missing links when prototyping. However, it was a huge step for me and an extremely valuable hands-on learning experience.

Next Step:

Since the Professional Search Page is more complicated to implement than the rest of the pages, it has yet to be incorporated into the redesigned version of the website. More work needs to be done in its search filter and display. My client and I are still discussing about a potential “featured topics” search to increase the website’s visibility alone with the discussion of current events. Looking back at this project, I would play more with different modes of interaction to add a variety in user experience and explore more effective ways to display professional’s past experience. Being a continuous building process, the T4C website needs future updates on more programs that my client is currently working, and I am currently populating the website with more contents.