Doing What Works
Overview
Brief
Design an interactive website to support the “Doing What Works” podcast by making content about the sustainable economy accessible, engaging, and actionable for users.
Process
Stakeholder Interviews, Industry & User Research, Netnography, Competitor Analysis, Card Sorting, Journey Mapping, Wireframes, Stakeholder Feedback, High-Fidelity Prototyping, Usability Testing
Role
UX/UI Design, Research, Prototyping, User Testing, Content Strategy
Stakeholders
Podcast hosts Ashanti Blaize-Hopkins and Ferris Kewar
Project
Problem
The podcast needed an engaging online presence to make career exploration in the sustainable economy accessible and appealing. Along with informing the user about the podcast and why it’s topic is so important.
Insight
User research indicated a need for simplicity, intuitive navigation and ways to get involved with the industry. Also above all a need for informative content about the sustainable economy, as many users knew little about this.
Solution
A well structured website featuring sustainable economy educational content, podcast episode details, user reviews of the podcast, and a careers section.
Episode page
Careers page
Discovery
Stakeholder Interviews
I conducted interviews with key stakeholders, Ashanti Blaize-Hopkins and Ferris Kewar, to delve into the "Doing What Works" podcast's core objectives and discern the specific needs of its audience. The main insights were:
Defining Website Essentials: It became evident that the website must serve a dual purpose: firstly, to seamlessly link to and provide comprehensive information about the podcast, and secondly, to focus on delivering educational content about the sustainable economy.
Highlighting Industry Engagement: A crucial website feature identified was the inclusion of resources and opportunities for listeners to actively engage and participate in the sustainable economy. This component important in connecting the audience with real world applications of the topics discussed in the podcast.
Industry Research
Climate Palooza Event
I participated in an event highlighting the sustainable economy's scope, diversity, and career opportunities, gaining valuable insights for the project's design focus.
Diverse Industry Representation: There were a wide range of booths and activities, showcasing the many facets of the sustainable economy.
Awareness and Career Opportunities: The event served as a platform for raising awareness about key sustainability projects and foundations.
Insights into the Sustainable Economy: Gained a deeper understanding of the industry's scope and the diverse organizations involved.
High Job Demand: Recognized the high demand for jobs in this expansive field.
New Perspective for Design: The event provided a fresh perspective on the aspects to focus on in designing for this project.
Netnography
Through conducting a netnography key user needs were revealed. These insights would later be important in refining the design and functionality of the website:
Visual Engagement: Emphasized the importance of visuals, advocating for the use of infographics, engaging thumbnails, and interactive elements to capture and retain user attention.
User Centered Design: Highlighted the need for a design that prioritizes user experience, with features like episode summaries, and intuitive navigation.
Mobile Optimization: Underlined the importance of a mobile friendly design to cater to the growing number of mobile users.
Community Interaction and Clarity: Showed a preference for features that encourage community engagement, like comment sections, and stressed the value of clear, concise content.
Competitive Analysis
Through researching these competitor podcasts, I found many things to inform the design direction I wanted to take the website. Some design insights I found were:
Detailed Episode Pages: on the actual pages for each episode there were details about the guests and the topics to be covered.
Episode Players: Homepages with large players for recent episodes and accessible archives.
Informative Homepages: Clear information about podcast themes, hosts, and guest profiles.
Listener Reviews: On the homepage clear reviews of the podcast and its usefulness.
Unique Theme: The focus of the podcast and its themes are clearly shown.
Intuitive Navigation: Access to episodes and additional information are clear.
User Interviews
I conducted a card sorting exercise to determine the optimal placement of information on the website. For this purpose, I engaged in an interview with my peer, Oliver, leveraging his insights to inform the website's content organization. These are the insights I gained:
Homepage Focus: Develop a dedicated area on the homepage highlighting the sustainable economy its essence and significance. This is important, considering the general lack of widespread knowledge about the topic.
Organized Content: Strategically segment the website into distinct sections for enhanced user navigation. These sections should separately cover industry learning, podcast episodes, and career opportunities in the sustainable economy.
Simplicity and Clarity: Emphasize a minimalist approach in the website design. Streamline content to avoid redundancy.
Reconsidering the Store Section: Given the podcast's focus, a section for merchandise is not essential.
Card sort exercise
Oliver the participant
User Journey Map
Scenario
Kyle is a college student interested in getting a career in the sustainable economy. He wants information on the industry and opportunities available.
Steps
Kyle navigates to the homepage of the website and immediately notices the "Get Involved" section featured in the top menu bar. Intrigued, he clicks on it and is directed to a page with job postings related to the industry. Selecting a listing that catches his interest, Kyle is taken to a detailed job description page, which includes an external link for application purposes.
Website homepage to the Get involved page
Job Description page
Design & Ideation
Sitemap
I created a sitemap, grounded in insights taken from user research and competitive analysis. This blueprint laid the foundation for a streamlined and intuitive website design, featuring key sections:
Podcast Episodes: A dedicated hub for listeners to explore and engage with the podcast's content.
Industry Involvement: An interactive space for users to discover ways to actively participate in the industry through careers.
Sustainable Economy Education: A resource rich section offering in depth insights into the sustainable economy, along with contextual information about the podcast.
Contact Page: A centralized point for all major inquiries, ensuring easy and direct communication for users.
Wireframes
Homepage: Anchored by content about the sustainable economy, this section also showcases an episode player, highlights various career opportunities, and introduces the podcast hosts.
Learn: This segment delves into the importance of the sustainable economy, enriched with comprehensive details and external links for more learning.
Listen: Dedicated to the podcast's episodes, this area provides a curated list of all episodes, complete with convenient external links for broader access.
Join: A unique, interactive local map displays diverse career opportunities. Selecting any icon on the map reveals detailed job descriptions and directs users to relevant external application links.
About: Offers an overview of the podcast and its creators, combined with an easily accessible contact page for user inquiries.
Homepage
Episodes page
About page
Learn page
Careers page
Contact page
Stakeholder Feedback
I engaged in a presentation of my project progress to the stakeholders, receiving valuable design and feature feedback. Their insights included:
Enhanced Episode Pages: Implement individual episode pages with comprehensive details, enabling users to gain context and information prior to listening.
Highlight Sustainable Economy's Importance: Ensure the website's initial experience prominently explains why the sustainable economy matters.
Listener Review Section: Introduce a section for listener reviews to foster community engagement and provide firsthand insights about the podcast.
Expand Homepage Features: Enrich the homepage by incorporating select elements from the about page, broadening the range of accessible features.
Optimize Space and Text Size: Streamline the website's design by reducing text and feature sizes, enhancing overall space efficiency and readability.
My presentation, with my wireframes and a functioning computer mockup.
Presenting my wireframe to stakeholders.
Stakeholders providing feedback.
Revised Wireframes
In response to stakeholder feedback, I refined the wireframes to include:
Episode Detail Pages: Rich overviews, guest introductions, highlights, and quotes for each episode.
Refined Design: Improved layout with optimized graphics and text for better space efficiency.
Updated Career Section: Redesigned for easier navigation, featuring a comprehensive job list with filters.
Listener Review Section: For audience feedback and engagement.
Expanded Homepage: Additional content like recent episodes, host bios, and more.
Homepage
Episodes page
Individual episodes page
About page
Learn page
Careers page
Contact page
Solution
High-Fedelity Prototype
Based on the revised wireframes I developed a fully functional prototype, with enhanced features and design elements:
Text Content: Crafted copy for each section, ensuring clarity and engagement throughout the website.
Strategically Placed Imagery: Integrated relevant, high quality images to complement and enrich the site's visual appeal.
Refined Visual Aesthetics: The overall visual design of the website was polished for a more cohesive and professional look.
Interactive Elements: All major buttons were made clickable, offering an interactive and intuitive user experience.
Homepage
Episodes page
Individual episodes page
About page
Learn page
Careers page
Contact page
Stakeholder Presentations
After a second presentation to stakeholders, this time featuring my refined high fidelity prototype. The feedback received was very favorable:
Episode Page Acclaim: The stakeholders were impressed with the episode page, appreciating how it provided viewers with in depth context about each episode.
Homepage Appreciation: The decision to feature information about the sustainable economy prominently on the homepage was highly liked for its effectiveness in conveying the podcast's core message to uninitiated listeners.
Career Section Praise: The careers section was seen as a valuable resource for listeners, enriching the overall website experience.
Design and Detail Approval: The overall design and aesthetic of the prototype received praise. The attention to text and imagery details was particularly noted for enhancing the site's appeal and functionality.
My presentation, with my prototype and a functioning computer mockup. Presenting to stakeholders and guests.
Reflection
Project Recap: I designed a user friendly website for the “Doing What Works” podcast from start to finish. This included industry and user research, competitor analysis, wireframing, testing, and incorporating feedback from stakeholders. The final product was a high-fidelity prototype that blends clear design with the podcast’s mission to make the sustainable economy more understandable and engaging.
Successes and Achievements: One of the biggest wins was creating a simple and intuitive interface that made the topic easier to understand for new users. Detailed episode pages and a clear structure, based on card sorting and user insights, helped make the site feel organized. The homepage also turned out great, offering a helpful overview for first time visitors.
Challenges and Learning Experiences: A major challenge was figuring out how to include lots of content without making the site feel overwhelming. At first, the navigation felt too cluttered, but through testing and feedback, I learned how to simplify and streamline the layout. It was a good reminder of how important clarity and iteration are in UX design.
Areas for Improvement: Looking back, I could have given more attention to the “Learn” section and added more interactive tools, like career resources to help users take the next step.
Future Implications: This project taught me a lot about organizing content and guiding users through a topic they may not be familiar with. I’ll carry these lessons into future projects, especially the balance between clear visuals and functionality.
Closing Thoughts: This wasn’t just a design assignment, it was a real chance to explore how UX can make complex topics more approachable. I learned a lot and gained more confidence in using design to connect people with important ideas.