Banner image for Sincerely, JJ.

Understanding the User

The goal of my user research was to learn what kind of information users of podcast websites were looking for, and to learn what kind of information Sincerely, JJ’s target market would look for.

Demographics

Julie and Jen shared with me that the target audience of their podcast was young Asian-Canadian women aged 20–40 years old.

Competitive Analysis

When asked if they had any podcast sites they liked, Julie and Jen let me know that they were huge fans of the podcast AsianBossGirl, and wanted to draw inspiration from their site. In addition, I gathered information from a number of other podcast sites to inform which features users expected. This helped create the feature list for the website.

Personas

Personas were created based on Sincerely, JJ's target audience of young Asian-Canadian women aged 20–40 years old.

Main Persona: Jessica

Jessica is a nurse who is looking for a podcast to listen to on her commute because she’s looking to improve her lifestyle wherever possible.

A portrait photo of "Jessica."

“I love listening to podcasts in my spare time to learn about new things.”

User Journey Map: Jessica

Analysing Jessica’s user journey helped show the importance of the mobile version of the site, as most users would end up on the site through their phone’s podcast app.

Sub Persona: Janet

Janet is a designer who found the Sincerely, JJ podcast through searching online and wants to learn more about the show and where to listen to it.

A portrait photo of "Janet."

“This podcast seems interesting, I want to check it out!”

User Journey Map: Janet

Analysing Janet’s user journey showed the other side of discovering the podcast, with the user discovering the podcast through the site. For them, being able to listen to the podcast on their favourite platform was a priority.

Starting the Design

Sitemap

Based on the previous competitive research, I learned that users of podcast sites would expect the following features from a podcast in this order:

  • A way to listen to the podcast quickly if they were interested
  • About page to learn more about the show and hosts
  • Episodes page to see what kinds of episodes had previously been released and listen to that episode if they were interested
  • Social media details to keep up with the podcast on the user’s platform of choice

In addition, Julie and Jen let me know that they also wanted to start a blog, so that would be a required feature as well.

These features informed the sitemap, making sure every feature was included in the sitemap.

Sitemap for the Sincerely, JJ website.

User Flow

The user flow was created using the sitemap to plan out the possible routes a user could take on the site. This was done to provide further insight on the features that would be required for the site.

The user flow for Sincerely, JJ's site.

Wireframes

Paper Sketches

Using my research to inform my decisions, I started off by sketching 5 different layouts of the website and took the best elements of each sketch to bring them together to create the rough of the design I wanted to move forward with.

From my research I had learned that the mobile version of the site would be more commonly used, so the site was designed with a mobile-first perspective, then scaled up to other screen sizes.

As planned with the site map, the main feature that needed to be incorporated was a way to quickly listen to the podcast on the user’s platform of choice. This was incorporated into the navigation bar to ensure that it was always available no matter where the user was on the site.

Other features were incorporated into the main page, with the podcast and its episodes being the main information, and the blog posts following the rest of the information.

Rough sketches of concepts for the Sincerely, JJ mobile site.
Rough sketches of concepts for the Sincerely, JJ desktop site.

Digital Wireframes (Mobile)

As my research had confirmed that the mobile version of the site would be the main version, I started designing from the lo-fi mockups of the mobile version.

Though the initial sketches originally had the blog designed with more presence on the page, Julie and Jen gave me feedback that they didn't want it to be so prominent. As a result, for the lo-fi mockups, the blog was scaled back to have much less prominence on the page.

Priority was placed on making sure the main function of the site, directing users to the podcast, was front-and-centre in the form of a floating button that would allow users to listen on their favourite podcast platform. Initially in the sketches, this button was placed in the navigation, but as it had to accommodate the 3 main platforms, this needed to be adjusted with an expanding button which took more space than would allow for it to live in the nav bar, so this was moved to the bottom within easy touch range.

Low fidelity mockups of the Sincerely, JJ mobile site.

Digital Wireframes (Desktop)

The desktop version adapted the features from the mobile version, making better use of the screen space by displaying content over two columns.

The Listen Now button was moved to the nav as initially planned, as the desktop version had enough space to fit it in properly.

Low fidelity mockups of the Sincerely, JJ desktop site.

Low Fidelity Prototype

Interactive prototypes of the mobile and desktop versions were created to test. These prototypes include all pages of the website.

Usability Study (Low Fidelity)

A usability study was carried out on both mobile and desktop versions of the initial low fidelity prototype to test how well the design was achieving its goal. A group of 5 users fitting the Jessica persona were gathered to help run a usability study on the site. A moderated study was chosen as there wasn't much time to develop the site, so it was important to gather as much information as possible from the short usability studies.

Usability Study: Parameters

Tasks

  • Listen to the podcast on their platform of choice.
  • Find our more information about the hosts Julie and Jen.
  • Read a blog post.

Study Type

Moderated usability study

Location

Remote (Global)

Participants

5 participants

Length

5–10 minutes

Usability Study: Findings

Users during the usability study were able to complete the flows assigned to them, but the study also revealed 3 issues with the initial design.

1. Dates Missing From Posts

Participants were quick to note the dates were missing from posts, so they could not get an idea of how new or old content was.

2. Difficult To Keep Track Of Location

Participants noted that they can't really tell where they are on the site.

3. Can’t Tell What The Site Is For At a Glance

It was noted that participants couldn’t tell right away that this was a podcast site.

Refining the Design

Low Fidelity Adjustments

The results of the usability study showed that the posts for both the podcast episodes and blog posts not having dates gave no sense of chronological order, so dates were added to both podcast episodes and blog posts.

To address the issue of users losing where they were on the site, the navigation was bolded to show where users currently were.

The intro text for the first page was also rewritten to include the word “podcast,” explaining what it was at the start.

High Fidelity Mockups

Once the adjustments to the low fidelity design were tested, the high fidelity mockups were created using the low fidelity designs as a base. Photos and additional details were added.

High fidelity mockups of the Sincerely, JJ mobile site.
High fidelity mockups of the Sincerely, JJ desktop site.

High Fidelity Prototype

Using the mockups, high fidelity prototypes were created for both mobile and desktop variants.

Accessibility Considerations

1. Accessible Colour Contrast

Colour choices were checked with the WCAG standards to ensure a minimum of level AA contrast.

2. Viewable By Users With Colour Blindness

Colour choices were checked with colour vision checkers to ensure no elements of the designs were lost as a result of colour blindness.

3. Meaningful Sequence

Headings and content follow the order that a user would expect when browsing the content on the page.

4. Alt Text On Images

All images were ensured to have alt text.

5. Orientation & Size

Pages are not limited to orientation, and can be viewed at any size or on most devices without affecting content or functionality.

6. Text Zoom

Text can be zoomed up to 200% without losing content or functionality.

Takeaways

Impact

Though the site is currently being developed, Julie and Jen were excited to have a web presence to help with their podcast’s discoverability.

What I Learned

As this was my first project designing on my own without a team, I learned a lot about gathering research myself, and about rapidly iterating with a client that might not be familiar with how design develops over time. I also learned that projects don't always go according to the original plan or some things originally discussed might not have been communicated properly, and being able to rapidly adjust designs according to feedback from stakeholders is important to keep goals aligned for the project.

Though smaller in scale, it was also important for me to fully learn how to develop a design system and components to allow for rapid iteration, reducing the time required to make adjustments across the design.

Thank you!

See More Projects
Back to top