UIUX Design.
Visual Branding.
2 Empower U
Website Redesign.
"To empower my younger self, and everyone else who needs help." 2 Empower U is a Christianity podcast dedicated to inspiring people in their 20s and 30s to have better, more fruitful lives from a God perspective. I worked as a UIUX and visual designer to redesign the podcast's webpage on the Podbean platform and the visual brand identity.
My Roles & Contributions \
UIUX Designer
As the hired designer for 2EmpowerU's webpage on the Podbean podcast hosting platform, my responsibilities included creating a project plan for the team, conducting design research, and redesigning the website layout, along with another UX designer. As the UIUX designer of the team, I also owned creating all-fidelity prototypes, making visual designs for the website, and producing graphics.
Visual Branding Designer
I owned the redesign of the podcast's visual brand identity, including visual guidelines, logo, hero image, and other visual resources on the Podbean page.
​
​
Team \
​
2 UX Designers · 2 Researchers · 2 Developers
Project Goals \
Redesign the Podbean page to ...
Increase Donations
1
2
3
Increase Listeners and Downloads
Increase Traffic to the Host's Website
Redesign the visual branding to ...
Attract more target audience (20-40 years old Christian)
4
Challenges \
Strict platform templates
Design with Technical limitation of in-line CSS
Solution \
A new podbean page with brand-new layout, visual, features, and branding
Impact \
+ 30%
+ 22%
+ 20%
Downloads
Daily Listenrers
Host Website Traffic
+ 15%
90-Day Retention
Decide Project Direction
After communicating with the stakeholder with two rounds of stakeholder interviews, I found:
Current problems the stakeholder is facing :
Not enough traffic on Podbean page
2
Not enough conversions (downloads, donation, subscription and clicks into the host's personal website) on Podbean page
3
Not attracting the target audience [20-40 years old Christian]
1
Solution I proposed :
Project Direction 1:
Redesign the layout, features, and visuals of the Podbean page
to provide a better user experience, in order to increase user retention to increase donation and downloads
Project Direction 2:
Redesign of podcast branding
to draw in more listeners and target audience, increase traffic, subscription and clicks into the host's personal website
Design Research
Product Understanding
What are the constraints and possibility space?
The Podbean platform requires hosts to choose one of the templates provided by the platform when designing their podcast page. Hosts can then make limited modifications to the chosen template.
Given strict constraints, we decided to start by understanding the design possibilities and limitations.
Can Do
In-line css in text editor
Change header Menu items
Assign tags to episodes
Change episode display among List view, Simple list view, and Grid view
Amount of episodes displayed before 'load more'​​
Add emojis in podcast description
Cannot Do
Closed caption
Expanded CSS
Spaces in podcast description
Duration of episodes cannot be shown by system
First two sections in all templates cann't be customized by in-line CSS. Only content, font, and background images can be changed.
Competitive Analysis
Draw Inspiration from competitors
The Podbean platform requires hosts to choose one of the templates provided by the platform when designing their podcast page. Hosts can then make limited modifications to the chosen template.
Insight 1
Clear Value Proposition
Some podcasts didn't stress on values that set them apart from their competitors, making it difficult to capture the interest of visitors.
Insight 2
Clear Visual Guidance
Some podcasts lack clear visual focal points, making it challenging for users to identify key information and CTAs (Call-To-Actions).
Insight 3
Only Essential functions
Keeping only essential functions. - Some podcasts have too many features, with some being less impactful and leading to user attention being dispersed.
Empathize with Users
While we were conducting the design research, the research team was doing usability testing on the original Podbean page, and interviews with the target audience, in order to help us locate the problems of the original webpage from user perspectives and empathize with the potential users.
Problems of the Original Design
What's the current experience like?
Hard to notice 'Follow' Button
+ 10 more episodes
Calls-to-action that lack significance
Information that lacks practical value
Repetitive Host Photos
Too much texts
Too much scrolling
Visual design not captivating enough
Not drawing enough attention to important links like donation links, the host's personal website, and other services
Archetypes
Who are the potential users? What do they need?
After synthesizing the results of the usability testing + interview conducted by the research team, we created 2 archetypes based on how long they've been listening to podcasts, in order to empathize with the potential users.
Dedicated Listeners
Needs:
1. Quickly find specific episodes
2. Easy to contact Pastor Thomas
3. Take notes for future reference
New Listeners
Needs:
Quickly decide if the podcast is what they are looking for, including content, release schedule, style, and religious belief inclination.
Define Problems
What problems are we tackling?
We compiled a comprehensive problem statement by combining current experience pain points, user needs, and stakeholder requests.
The important information and calls-to-action (CTAs) are not prominent enough
1
Too much repeated information causes visual fatigue for users and occupies cognitive space
2
Users are distracted by information and features that are not useful to them
3
Users are unable to quickly identify the characteristics and value of the podcast
4
Ideation
Brainstorming
I like..., I wish..., What if..?
Since some problems listed in the define phase are broad goals, like 'increase donation', we chose to use the 'I like, I wish, What if' brainstorming structure to help us broaden our thinking and generate innovative solutions. PK and I put our stickers on the ideas we think are plausible and effective to solve the design problems.
Idea Priority List
Which ideas are technically impractical?
After presenting the ideas to the developer, we found that some of the ideas are technically impractical due to the strict platform constraint, which we failed to find out during our initial constraint investigation, so we removed them from the list. Unfortunately, all of our ideas resolving two of the needs for dedicated listeners were unfeasible, so we had to postpone them or give up on them.
Dedicated Listeners
Needs:
1. Quickly find specific episodes
2. Easy to contact Pastor Thomas
3. Take notes for future reference
Template Choosing
Which of the 7 platform templates should we choose as the basis for making changes?
I evaluated the templates, weighed their pros and cons, and selected three potential options aligned with our priority list and project goals.
I then presented the stakeholders with the potential impact of the three templates on the project, and they ultimately chose the 'Podisc' template for its effective curiosity-introduction page flow.
Low-fi Prototypes
Sketches
Sketching with problem statements, idea list, and constraints in mind
According to the idea priority list we came up with in the ideation phase + template we chose, while taking technical constraints into consideration, we created wireframe sketches:
Donation
Follow
Website
Services
Topics
Clear
Diverse
Credibility
......
Prototyping
Two versions of prototypes (A/B)
PK and I decided to combine our preferred elements from the sketches to create two low-fidelity prototypes for user testing purposes. Why did we create two versions for user testing? Because we feel that the initial design lacks the support of user feedback, and the designer's subjective opinions played a significant role. Gathering additional data through presenting two versions of prototypes allowed us to steer the direction of future design iterations while reducing investment costs. It enabled us to present users with two distinct designs for each section, efficiently gathering valuable feedback from a limited number of tests.
When deciding on the two low-fidelity prototypes, we considered how to obtain the most useful insights from user testing. For example, we explored different layouts and image usage, such as Ver.A with a side-by-side structure and more images, and Ver.B with a top-to-bottom structure and fewer images.
Version A
Version B
Arrow pointing to 'Follow' button
More and detailed podcast topics
Less and more concise podcast topics
Horizontal layout, more visual
Vertical layout, less visual
Grid view with images
List view with images
Message box + clear background
Email info + color stripe background
Rapid Mockup
A quick mockup for client comprehension
At this point, the client requested a higher-fidelity prototype to gain a better understanding of our design direction. In response, I quickly produced a mockup based on Ver.A while awaiting the A/B testing results.
User Testing Results & Insights
The research team did qualitative user testing on 5 potential users.
The participants:
-
Preferred a vertical section layout more than a horizontal one.
-
Were looking for host information on the Podbean page
-
Wanted Emojis to be descriptive and professional-looking, also in a small amount
-
Were trying to click on the two service images in the service section
-
Liked the graphics in the donation section, but distracted them from the paragraph.
-
Liked the arrow pointing out the follow button
-
Liked the dialogue box in the hero image
Insight 1
An 'About the host' section
Make it easier for users to find host information, while placing the host's website button in this location to make it more prominent
Insight 2
More professional-looking emoji choices
We feel it's necessary to retain the design of emojis, as it's the only way to add visualization to the podcast description section in the template's first two sections where structural changes can't be made. However, we will opt for more serious-looking emojis to increase credibility.
Insight 3
Service graphics into buttons in Ve. B
Participants instinctively clicked on the two graphics, so we decided to follow their instinct. We made the two service graphics clickable, which directs users to the corresponding page on the host website. This not only increases traffic to the host website but also saves users time in navigating to learn about the service.
Insight 4
Vertical layout and simpler graphic
Participants liked the graphic but requested vertical text layout, so we will find a way to accommodate this without making the section too long
Prototype Iteration
We iterated based on testing insights
Dialogue box from Ver. A
Arrow from Ver. B
More professional-looking emoji, and less amount
Add 'About the host' section and move the website button here
Change two services to buttons; Change to simpler graphic
Color stripe as background - Speaks back to the first section; Create a vertical layout illusion while saving space
List view from Ver. A
We iterated based on Ver.B because the developer discovered that the direct messaging function in Ver.A could not be achieved after testing.
Visual Branding Redesign
Product Overview
Who Am I Designing for?
2 Empower U is a Christianity podcast that aims to empower young audience (20-40) by strenghening their relationship with God.
The value proposition includes:
"Words I would like to say to my younger self," aiming to empower young Christians
1
Motivate the audience to take action in their lives in a direct and practical tone
2
The host is an employed pastor
3
Research
Branding Survey with 30 participants
I conducted research to determine what type of podcast identity appeals to our target audience. To accomplish this, I created a survey featuring 12 podcasts that share a similar theme to 2 Empower U. Participants were asked to rank their interest in these podcasts and provide reasons for their rankings. I also gathered their opinions on 2EmpowerU's original branding.
I received 30 responses, and synthesized the data.
Insight 1
Highlight Christian theme
Insight 2
Intense colors & contrast
Insight 3
Warm color tones
Insight 4
Creative & Stress-free
Insight 5
Down-to-earth
Insight 6
Keep it general but clear
Design Keywords
Combining product values and research insights, my keywords are:
Empowering
Christianity
Guidance
Straight-forward
Down-to-earth
Practical
Sincere
Young (20-40)
Stress-free
Creative
Results
Color
I took the red from the cover of the Bible, and the blue from the sky, to deliver Christianity, empowering, guidance, and sincere vibes
d80000
5bcbff
000000
FAFAFA
Visual Style
Typography
I selected Agency FB as the primary font to create a direct, pragmatic, and action-oriented tone that matches the podcast style and complements the brutalism art style.
Agency FB
Agency FB
PT Sans
PT Sans
Used for H3, body text
Used for H1, H2, H4
Logo
High-fi prototype
After the branding redesign is done, I made the high-fi prototype based on the style guideline and the low-fi prototype.
Highlight the host's portrait as the branding survey shows that the potential users find it warm and welcoming
Create a vertical section layout illusion using repetitive patterns to focus user attention on the left half. Incorporate Christian-themed patterns to increase the chances of donation.
Changed the original host portrait to a mic: 1) The portrait appeared to be to dark due to the black overlay; 2) The mic design speaks to the concept of the logo
To grab attention towards the buttons, utilize the same arrow as the one used in the first section. Also, incorporate simpler graphics to apply psychological cues.
Use simple list view without images for now instead of imaga list view, since the host is still adding covers images to the previous episodes
Final Result & Impact
