Doing What Works: Website Design
Sustainable Design: A Podcast Website UX Journey
Introduction
Creating a captivating and interactive website for the "Doing What Works" podcast, designed to enlighten and engage users in the area of the sustainable economy.
Timeline
4 months
UX Challenge
Design a website that provides comprehensive information about the sustainable economy, facilitates easy access to podcast episodes, and offers career resources.
Overview
Project Challenge
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.
Project Contributions
Role
As the lead UX designer, I was responsible for the end-to-end design process of this project.
Responsibilities
- Conducting user and competitive research.
- Developing initial wireframes and iterating based on feedback.
- Designing a user friendly interface focused on intuitive navigation.
- Integrating user feedback to refine to a high fidelity website prototype.
Research
Stakeholder Interviews
I conducted insightful 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.
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 is vital in connecting the audience with real-world applications of the topics discussed in the podcast.
Industry Research
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:
Attended an event featuring 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 this netnography key user needs were revealed. These insights would later be instrumental 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.
Competitor Analysis
Through researching these competitor podcasts, I found many things to inform the design direction I want 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 executed a meticulous card sorting exercise to strategically determine the optimal placement of information on the website. For this purpose, I engaged in a detailed interview with my peer, Oliver, effectively 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 crucial, 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.
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 prominently featured in the top menu bar. Intrigued, he clicks on it and is seamlessly directed to a page brimming with job postings related to the industry. Selecting a listing that catches his interest, Kyle is taken to a detailed job description page, which thoughtfully includes an external link for application purposes.
Design
Sitemap
I meticulously crafted a sitemap, grounded in insights gleaned from my comprehensive 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 insightful 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 a thorough overview of the podcast and its creators, combined with an easily accessible contact page for user inquiries.
Stakeholder Feedback
I engaged in a pivotal 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.
Revised Wireframes
In response to valuable feedback, the wireframes have been thoughtfully refined:
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.
Prototype
Based on the revised wireframes I developed a fully functional prototype, with enhanced features and design elements:
Text Content:
Meticulously 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 buttons were made clickable, offering an interactive and intuitive user experience.
Stakeholder Presentations
After a second presentation to stakeholders, this time featuring my refined high fidelity prototype. The feedback received was exceptionally 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 commended 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 high praise. The meticulous attention to text and imagery details was particularly noted for enhancing the site's appeal and functionality.
Going Forward
Reflections
Project Recap:
Executed an end-to-end design of a user-friendly website for the "Doing What Works" podcast. This encompassed comprehensive industry research, competitive analysis, user testing, and stakeholder feedback. The process culminated in a high-fidelity, intuitive prototype, blending user-centric design with business objectives to enhance the podcast's digital presence.
Successes and Achievements:
The project's standout success was the intuitive user interface and the content strategy that effectively communicated the podcast's topic to the uninitiated user. The use of highly detailed episode pages and thematic categorization based on card sort insights. Along with implementing sections to learn and get involved with the industry. The informative homepage layout was another triumph, making the website welcoming and accessible to new visitors.
Challenges and Learning Experiences:
One of the main challenges was balancing the diverse content without overwhelming the user. Initially, the navigation felt cluttered, but iterative design and user feedback helped streamline the experience. This challenge taught me the importance of simplicity in UX design and the value of iterative improvements.
Feedback Integration:
Stakeholder and user feedback were pivotal in shaping the final design. Particularly, feedback on the early wireframes led to significant changes, like the addition of a detailed episode page section. Along with changes to the homepage layout, get involved section, and the overall design. Which can be clearly seen in the final high fidelity prototypes.
Areas for Improvement:
In hindsight, more emphasis could have been placed on the website's learn about the industry section. Additionally, integrating more interactive elements. such as career guidance tools, could further enrich the user experience.
Future Implications:
The insights gained from this project, especially regarding content organization and user flow, will be invaluable in my future UX endeavors. I plan to apply these learnings to better balance aesthetic and functional aspects in upcoming projects.
Closing Thoughts:
This project was more than just a design task; it was a journey in understanding the nuances of UX design in the context of a unique subject like the sustainable economy. It not only enhanced my design skills but also deepened my appreciation for the impact of UX design in making complex topics accessible and engaging to a diverse audience.