AsianBossGirl is a multi-media company that originated as a podcast dedicated to sharing the experience of the Asian-American woman. Their platform is a podcast, online community, and social media presence that helps young professional women navigate their careers and personal lives.
The existing AsianBossGirl site reflects their brand as primarily a podcast. In the past few years, AsianBossGirl has expanded their company to include a larger community and has started producing content on multiple platforms. The current scope of the website is outdated and does not highlight the complete range of media AsianBossGirl has to offer. The brand is also lacking a centralized hub to host all of their content and to alert users of new updates or content releases.
I spent time speaking with Helen, Mel, and Janet, the founders of the AsianBossGirl, to understand how they want to serve their community within a website redesign and the creation of a mobile application from scratch. A special consideration was not only portraying their various forms of content, but also including their community and finding ways for their community members to connect and empower each other at frequent touchpoints.
After spending some time to review AsianBossGirl’s competitors, I concluded that...
Beyond speaking with the founders of AsianBossGirl and analyzing the competitive landscape, I also took the time to connect with the AsianBossGirl community to understand how they feel about the current site and how they typically interact with the AsianBossGirl community and content. In order to connect with these users, I sent out a survey to the ABG Collective on their Discord server in addition to six virtual zoom interviews with community members.
Users expressed thoughts surrounding the website’s organization, visual design, accessiblity, and key desires in a redesign.
“While I love the ‘A podcast for the modern day Asian American woman’ tag line, just looking at the website, it still makes me think that ABG is primarily a podcast and not necessarily a multimedia company.”
- Survey Participant
In my surveys and conversations with the AsianBossGirl community, I also asked users about a native mobile experience dedicated to the AsianBossGirl platform and content. Specifically, I wanted to know if the creation of a mobile application would be useful and if so, what users would like to see in it given the saturation of mobile applications in the market.
After gathering more information about the AsianBossGirl community through surveys and interviews, I created a persona that captures the essence of an engaged listener, community member, and enthusiast of the brand. Meet Michelle Wong! 👋
The creation of the persona and in depth user research allowed me to establish a basic understanding of how a user might navigate the AsianBossGirl site and mobile application in an optimized manner. I built out a site map for a user who visits the AsianBossGirl website as well as a task flow for a user looking to listen to a podcast episode and discuss with the community. This site map and task flow was key to keeping the design focused on users' core interactions with both the site and mobile application.
With a basic structure in mind, I whipped up a few sketches with the good old fashion pencil and paper. I spent more time curating concepts for the mobile application as I knew I would using SquareSpace templates to format the site redesign.
Using templates from SquareSpace as my base, I constructed a new design based on the survey and interview feedback as well as the stakeholder's goals. After discussions with the AsianBossGirl team, we ultimately decided using the SquareSpace platform made the most sense for accessible maintenance and other functionalities like their newsletter which they build on SquareSpace as well. You'll notice there are no low-fidelity wireframes for this stage as the templates designed on SquareSpace were my starting point.
I adapted my sketches into mid fidelity wireframes that included the key screens users will need in order to complete a simple task flow of logging in, listening to an episode, and leaving a comment to engage with other AsianBossGirl community members.
While staying true to AsianBossGirl's existing style guide and branding, I updated the color theme of their site to improve contrast and accessibility as users had mentioned difficulty viewing specific links and components in their site.
In my first attempt at creating a revised site for AsianBossGirl, I focused on creating a landing page that better prioritized the content users frequently interact with (ie: listening to podcast episodes). I also adapted and transferred over other commonly used pages like "Shop" and "About" while consolidating pages like "ABG Spotlights" into a new "Community" page that houses all community related content.
I iterated on my mid fidelity wireframes to produce high fidelity designs that reflected the AsianBossGirl UI and branding. I incorporated their color palette, keeping in mind contrast and accessibility, and further fleshed out the designs for greater interactions and prototype testing.
With the initial designs drafted, I moved onto to the next stage: usability testing. I gave users a SquareSpace prototype to interact with and a task to complete in order to assess three key objectives listed below. Additionally, I sat down with the founders of AsianBossGirl and presented my first round of designs to hear their thoughts and feedback.
You are on the AsianBossGirl website and looking to listen to a podcast episode. Please browse through the website and its current offerings and select a podcast episode that you would like to listen to.
“This [site] is good for someone who started listening to ABG recently. It’s a good way to be introduced to their [offerings]. ABG’s online presence showcases their community and this site reflects that even more.”
I distilled the main feedback, observations, and considerations from users in the process of usability testing into an affinity map. This allowed me to identify priority revisions and isolate the user's wants from needs when iterating.
Piecing together the feedback from the stakeholders and the AsianBossGirl community itself, I identified the key areas I could improve upon given restraints on the SquareSpace platform and limited time.
Adjusted the home screen to include a more balanced look and focal point with the center image.
Next Step: Locate an image that better suits this full-bleed homepage.
A new page dedicated to connecting with the ladies and community to address the desire for connection and communication.
Categories organized based on “Top Listened To” buckets rather than “Mood/Feeling.”
Revised the presentation of the ABG newsletter by embedding an Issuu file to mimic a real life “reading” experience.
Creates a more accessible and organized feel to the newsletter.
Turning around feedback from the stakeholders and the usability tests conducted with the AsianBossGirl community, I implemented key revisions to strengthen the site's design based on user interactions and ability to complete tasks.
Major adjustments in version two of the mobile design centered around a more approachable UI that appeared more on brand with a feminine yet professional look. I also modified the flow of chatting with the AsianBossGirl community by creating a more clear entry point in the shape of a button and including a feedback notification to show users their post was successfully shared.
View Prototype
Working with the AsianBossGirl team gave me access and insight into a very engaged pool of users and community members who were invested in the future of AsianBossGirl beyond simply the website. From my experience, it's not always easy to identify, contact, and set up interviews in the research or usability process. The community of ladies made this step much easier for me.
Given this engaged community was responsive to survey and interview requests, I also must recognize that we have a potentially skewed audience as all the participants were sourced from the ABG Collective on Discord. The AsianBossGirl community extends beyond the Discord platform and has a strong presence on other social media platforms like Instagram. If we had sourced users from other platforms, might their desires, wants, and needs have been different?
The last key takeaway I learned from this experience is that using website builders and tools like SquareSpace certainly has its limitations. For greater customization, other platforms like WebFlow or Wordpress which I researched may have been better options. However, the tradeoff with those platforms is that the ABG team could have difficulty with day to day upkeep and maintenance without proper training and experience using the tool.
