User Interface Design
PodBlogger is a mobile application that combines the growing trend of spoken audio consumption with the power of social media to promote knowledge sharing. Users are able to privately consume podcasts by tuning into curated radio stations as well as trim, note take and share snippets among like-minded communities to promote conversation.
⌛ 6 weeks
đź› Miro, Sketch, Adobe Illustrator
👤 Designer, Researcher
The CEO of “Podblogger” has raised significant capital to start a new social media service which is focused on people sharing spoken word audio recordings (podcasts). Their pitch was based on three core ideas: (1) people often consume media in situations where audio is the preferred medium, such as when driving the car, walking, cooking dinner, etc.; (2) people are increasingly using smart speakers and personal assistant interfaces; (3) there is much untapped knowledge in the world – enabling people to share knowledge via audio will “make the world a better place”.
Podblogger requires an overarching design concept for their app and medium fidelity designs for two specific components which reflect two core features of the app.
Market Research and Competitor Analysis
To gain a better understanding of the problem space and existing market solutions, I undertook primary research by using existing podcast apps such as Apple Podcasts and Spotify and noted down good and bad design choices. Noteworthy good design choices included Spotify’s category tags which enables users to filter podcasts by their interests, as well as easily accessible subscribe/follow buttons. A big opportunity for improvement is increasing discoverability and recommending similar podcasts.
User Research
Further online ethnographic research was conducted into the general behavioural principles and habits of regular podcast users. It was found that people generally consume spoken audio by themselves and the audience comprises of a relatively affluent and educated group who enjoy using social media. I defined the target audience to be everyday smartphone users who generally consume audio passively and summarised my key findings into a list of user wants:
User Personas
Using my key findings, I created 2 user personas.
For Carla, PodBlogger should serve as a platform for her to learn and share insights with other users, serving as a source of stimulation to keep her busy while travelling and studying.
For Toby, PodBlogger should provide an efficient, hands-free gateway for him to listen to topics he’s interested in while he focuses his time on more important matters like driving.
Brainstorming and Mash-Ups
After defining the needs of the target users and collating my findings into 2 user personas, I started to develop potential product features, focusing mainly on producing a wide variety of ideas that I would later filter through.
I utilised the Mash-Up ideation method where I'd combine potential features with existing solutions. One of my mash-ups with the online publishing platform Medium led me to the idea of treating podcasts as a learning medium. The highlighting feature in Medium inspired Podblogger's snippets feature which will allow users to trim and save snippets from podcasts with a note. The other notable feature was a radio station which would be curated to the users interests and offer a hands free listening experience.
I then decided to base my overarching design concept around the metaphor of a pack of cards. This metaphor encapsulates core app features like the shuffling of podcasts when playing a radio station. Cards often belong to suits too, similar to how podcasts can be from the same creator or belong to the same series.
Since the project challenge asks for two specific components, I summarised my ideas and clearly defined two user activities (core features):
From here, I created user journeys for each user activity and started prototyping with the overarching design concept of 'playing cards' in mind.
User Journey
My first user journey centres around Toby and his daily routine of travelling to and setting up for his cafe. After opening the PodBlogger app, he discovers the curate a radio feature and follows through a series of screens to customise a radio station to his liking, by entering hashtags and usernames into a search bar. After accidentally tapping the curate button again, a pop-up appears to confirm his action.
I then defined the relevant key features to develop in Podblogger:
Iteration #1:
The radio feature is inspired by the act of shuffling cards as well as playing card suits (curating a radio station based on 'suits' of interests, hashtags, topics in a shuffled order). I started off with rough paper prototypes before transitioning into medium fidelity prototypes in Sketch.
Usability Testing
Interface testing was done via the Wizard of Oz method with paper prototypes and sticky notes to emulate popup windows and extra elements that would appear after button presses etc. I highlighted positive and negative design aspects through callouts (as seen in the picture above) and summarised them in the table below.
Iteration #2:
Areas of improvement discovered from user testing were worked on during this second iteration. I've highlighted a few of them in the callouts in the picture below.
User Journey
My second user journey follows Carla who’s listening to an entrepreneurship podcast on her train journey. She hears a super interesting insight and wants to note it down, but doesn’t have pen and paper, and doesn’t want to switch apps. Using the cropping feature, she creates a snippet of the podcast and saves it to her library to share later.
I then defined the relevant key features to develop in Podblogger:
Iteration #1:
Similar to my process for the first user journey, I started off with rough paper prototypes before transitioning into medium fidelity prototypes in Sketch. I also used Adobe Illustrator to mock up the audio waves. Snippets will be visually represented as a card that the user can store in their library and share.
Usability Testing
This activity was a bit harder to test because the trimming functionality was near impossible to recreate on paper and digitally at this stage. However, I was able to test and evaluate the existing audio trimming features in the Voice Memos app on iPhone and used my findings to form the basis of what was good and what needed to be improved. I summarised the main points in the table below.
Iteration #2:
Areas of improvement discovered from user testing were worked on during this second iteration. I've highlighted a few of them in the callouts in the picture below.
With the second iterations done, I had successfully completed the challenge as per the brief. My solution for Podblogger consists of the following two core features:
Browse and Radio
Podblogger's Browse feature allows users to scroll through a home page of suggestions as well as use the Radio feature which curates a podcast radio stream based on a user's selection of tags. Podcasts will be automatically selected to fill a queue and play for as long as the user wants.
Snippets
Podblogger's Snippet feature allows users to trim podcasts to save or share. It plays upon the remix culture that is popular among social media apps like TikTok.
By letting users trim and share audio snippets from podcasts, they are able to contribute to a community by growing the discussions around certain topics. This goes with PodBlogger’s core idea of enabling people to share knowledge to make the world a better place.
I was able to experience almost all of the end-to-end design process while undertaking this project, excluding the high fidelity prototyping and final usability testing. However, I believe that I've successfully created the overarching design concept while keeping the target user needs at the centre of my solution.
A key learning from undergoing this project was the importance of following an iterative design process. By creating and testing ideas quickly, I was able to repeatedly refine my designs to ensure it always addressed the user needs in the most effective way. I found that the use of sticky notes during paper prototyping was a great way to emulate on-screen popups as well as patch in any quick design changes. Furthermore, conducting market research and competitor analysis was useful for learning about the consistency and standards of existing podcast apps. This avoids the need to reinvent the wheel as well as ensuring my solution matches user's well-established mental models.
I would have liked to conduct usability testing with audio to simulate the full user experience of a podcast app. Integrating audio will add another sense on top of sight and touch, so testing may yield different insights to what I had gathered initially. For example, users may find it hard to focus if they are listening to a podcast and trying to navigate the interface. The next step of this project is to translate the medium fidelity prototypes into high fidelity prototypes and continue the iterative design process. I will do this in Figma as it is a more recognised platform in the industry for prototyping.