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.
Julie and Jen shared with me that the target audience of their podcast was young Asian-Canadian women aged 20–40 years old.
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 were created based on Sincerely, JJ's target audience of young Asian-Canadian women aged 20–40 years old.
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.
“I love listening to podcasts in my spare time to learn about new things.”
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.
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.
“This podcast seems interesting, I want to check it out!”
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.
Based on the previous competitive research, I learned that users of podcast sites would expect the following features from a podcast in this order:
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.
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.
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.
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.
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.
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.
Moderated usability study
Remote (Global)
5 participants
5–10 minutes
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.
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.
Participants noted that they can't really tell where they are on the site.
It was noted that participants couldn’t tell right away that this was a podcast site.
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.
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.
Colour choices were checked with the WCAG standards to ensure a minimum of level AA contrast.
Colour choices were checked with colour vision checkers to ensure no elements of the designs were lost as a result of colour blindness.
Headings and content follow the order that a user would expect when browsing the content on the page.
All images were ensured to have alt text.
Pages are not limited to orientation, and can be viewed at any size or on most devices without affecting content or functionality.
Text can be zoomed up to 200% without losing content or functionality.
Though the site is currently being developed, Julie and Jen were excited to have a web presence to help with their podcast’s discoverability.
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.