Humboldt Hot Air
"…a community-centered internet radio station…"
Overview
ROLE:
UX Designer; team of 4
TIMELINE:
3 weeks - 30+ hours
TOOLS USED:
Figma / Canva / Procreate / Trello
Assignment
Redesign a non-profit organization's website. Create a mobile and desktop version.
Note: This project is a fictitious scenario, completed as a part of UC Berkeley’s Online Extension UX/UI Design Program. The interviews and user testing were all conducted with real people, however.
view final prototype
Project Goal
Improve the User Experience/User Interface of Humboldt Hot Air's website.
01 / Empathize - User Research
About Humboldt Hot Air
According to their website, Humboldt Hot Air, or HHA, is "a community-centered internet radio station based out of the Creamery District in Arcata, CA. Our aim is to amplify the diverse voices we have in our community of Humboldt County and the surrounding regions."
The main features of the HHA website are livestreaming the currently scheduled radio show, "About HHA", their photo gallery, program schedule, a contact form, information about their underwriting, sponsors, and links to their social media accounts. The entire website exists on one webpage, pictured below along with their "About us" section. Their header navigation names are "home", "now playing", "about us", program schedule", "contact", and "underwriting".
Competitor Analysis
One of my team members took the liberty of completing a quick competitor analysis, focusing on the pros and cons of a few other online radio stations.
Heuristic Evaluation
Another team member and I handled the heuristic evaluation, focusing on opportunities for improvement in our redesign.
Research Approach
Since this project involved an existing website, we were able to dive right into a round of user interviews to get feedback on the current HHA website. We were also able to get in contact with the founder of HHA for a stakeholder interview.
User Interviews
I came up with six questions for us to ask our five users to better understand their first impressions, pain points, takeaways, and other general feedback on the current HHA website.
Examples of user feedback
"Fonts could be bigger in body text"
"Hated the schedule, overwhelming and not accessible"
"They should make it more immediately clear what they do"
"Every time you click on something, it shoots you down to the bottom; hard to navigate back to the top"
"They should include bios/pictures of the DJs"
"Include more clear/obvious descriptions of the radio show"
Stakeholder Interview
One of my team members is native to Humboldt county, and knows the founder of HHA personally, allowing us the opportunity to get a stakeholder interview along with our five user interviews.
Top Takeaways
HHA's core values:
Community
Eclectic
Diversity of Programming
Past, present, and future goals of HHA:
Build community through radio
Bring in folks from all corners of the community (and beyond!)
Hyper local - All About Humboldt!
Opportunities for Redesign
Make sure older users can easily use website, stream live
Play button front and center is crucial
Improve overall clarity of website
Remove dead space and include more graphic/visuals
Improve display of program schedule and archive
Overview
About Humboldt Hot Air
Competitor Analysis
Heuristic Evaluation
Research Approach
Interview Findings
02 / Define - Synthesis
Overview
Empathy Map
Persona Development
User Insight
Problem Statement
Value Proposition
Empathy Map
Once our team had a better idea for the general direction of our redeisgn, we came back to our users, and put together and Empathy Map to put ourselves in their shoes. Ths ultimately helped to guide the creation of our User Persona.
Persona Development
From our user and stakeholder interviews, we found opportunities to increase the immediate impact and clarity of the landing page/above the fold portion of the website, giving a better sense of what HHA stands for and thereby encouraging increased engagement and support.
Additionally, we wanted to flesh out the About Us page and add a "Meet the DJs" portion to drive home the importance of community that is at the core of HHA, as per the stakeholder's goals of reaching and incorporating more members of the Humboldt county
In general, we wanted to figure out ways to better utilize the overall space and include more graphics (such as in a gallery), which were also mentioned by the founder, which will help the website develop a more clear identity and be more visually engaging.
Considering all of these possible improvements and our user feedback, we developed our User Persona, Andrew Williams.
Our user, Andrew, is local to the community, wants to be involved in local initiatives, and discover new, unique music, as well as someone who would be interested in the archive and look back through previous shows to have more opportunities to discover new music.
User Insight
A music lover who values supporting their local community and has an adventurous taste in music would like to easily view current and recently played tracks on his local radio station in order to be exposed to new artists and be kept up-to-date on local events.
Problem Statement
Humboldt Hot Air aims to aplify the diverse voices in their community of Humboldt County and the surrounding regions. Through user interviews, we have observed that some users struggle to understand Humboldt Hot Air's purpose from its website, which could impact the number of users using it to listen to the live radio shows or donate to their cause.
How might we improve the design and structure of HHA's website so users can more clearly understand their organization and purpose, thereby encouraging engagement with the various radio shows/donations to their organization?
Value Proposition
Humboldt Hot Air has given a platform to local artists and DJs to creatively express themselves, as well as gain recognition and support from community members to diversify the art and speech of Humboldt county.
04 / Prototype - From Paper Sketches to Figma
Overview
Wireframes
UI Style Guide and Branding
Wireframes
With our Sitemap established and goals identified, our group was ready to start our wireframes. Our team decided to start by creating low-fidelity wireframes in Figma individually. Then, we came back together to give feedback on each others' wireframes, as well as identify elements used that we can incorporate into our collective wireframes.
Low-Fidelity Individual Wireframes
My HHA Wireframes
Team member #1's Wireframes
Team member #2's Wireframes
Team member #3's Wireframes
We ultimately pulled bits and pieces from each design, but decided to split up the wireframe design and the style guide/UI branding. Team members 1 and 3 took over the wireframes, and team member 2 and I began on the style guide, providing feedback and suggestions to each other along the way.
Low-Fidelity Wireframes
The first round of our group's wireframes were more minimal, and included both the mobile and desktop version. We created a Home page, an Artist Profile page, and an About page. Below is the mobile version.
Home page
Humboldt Hot Air
Amplifying Diverse Voices of the Humboldt Community
Learn More
Now Playing:
DJ Name
Artist Name
Song Name
Up Next
Artist Name
Song Name
2:30
Artist Name
Song Name
2:30
Artist Name
Song Name
2:30
Up Next:
DJ Name
12:00-2:00
About Us
Check Out Our Instagram
Program Schedule
Underwriting with HHA
Welcome to Humboldt Hot Air! We are a community centered internet radio station based out of the Creamery District in Arcata, CA. Our aim is to amplify the diverse voices we have in our community of Humboldt County and the surrounding regions. We have over 60 volunteer DJs, 100% of whom are programming live from our Arcata studio. See our program schedule below to browse our wide range of music and talk, & if anything catches your eye, try listening in live or via our two week archive!
Learn More
Donate
Contact Us
Thank You To Our Sponsors
"Meet the DJs" page
Archived Set
1/2/2024
Artist Name
Song Name
Up Next
Artist Name
Song Name
2:30
Artist Name
Song Name
2:30
Artist Name
Song Name
2:30
DJ Name
About
Upcoming Shows
Archived Shows
Lorem ipsum dolor sit amet consectetur. Ultricies convallis ac gravida dolor lorem pellentesque pulvinar euismod. At sit aliquam cras orci quam mollis dui consequat quis. Interdum lorem tempor quam sed integer pulvinar vivamus. Sit vel a erat quam vel vulputate.
"About us" page
Watch the Arcata News
Short Documentary
Watch the Arcata News
Short Documentary
Watch the Arcata News
Short Documentary
Watch the Arcata News
Short Documentary
Highlights/Press
Meet Our DJ’s
View More
DJ Name
DJ Name
DJ Name
DJ Name
Subscribe
Join Our Newsletter To Stay Up To Date!
Contact Us
Thank You To Our Sponsors
Donate
We are a community centered internet radio station based out of the Creamery District in Arcata, CA.
Welcome to Humboldt Hot Air!
Our aim is to amplify the diverse voices we have in our community of Humboldt County
"Now Playing" Widget
One team member also had the great idea to add a "Now Playing" widget at the bottom of the screen for the user to be able to quickly navigate back to the radio show they're listening to faster, and they will be able to see the names of the songs playing more easily if they're not on the home page.
Mid-Fidelity Wireframes
Home page
When designing the home page, since one of our main goals was to improve the overall visual effect of each page, we decided to make the "Now Playing" widget more clear and obvious to the user, provide the information about the current DJ and radio program in the same view, and let users see which radio shows are next on the schedule for that day.
Original
Iteration
About us page
The current HHA website has their "About" section right below the fold on their home page. Our team decided to keep the previous copy for users to get a clear view of HHA's mission and values right away, but we also created a secondary page that provides additional information all in a more concentrated place for the user, including recent Highlights and Press releases from HHA, as well as the "Meet the DJs "section that helps users learn more about the people who bring the music to HHA!
Original
Iteration
Meet the DJs page
The current website displays the information about each DJ if you click on their name on the program schedule, but it is all displayed on the home page and becomes visually overwhelming for users to click through each piece of information and navigate back. Our team decided to create Meet the DJ pages that displays DJ bios, pictures, and upcoming shows, aiming to provide clarity and an easier sense of navigation.
Original
Iteration
Program Schedule page
Between our low and mid-fidelity iterations, our group made the decision that we should create a secondary Program Schedule page as well as the three other pages above. Although the current program schedule is featured on the home page, our group thought that creating its own navigation would allow for a more intuitive use for users.
Original
Iteration
Through these couple of rounds of designing and iterating, we worked as a team to keep the goals of the redesign in mind, and aimed to keep HHA's values of community, being eclectic, and highlighting the diversity of their programming at the forefront.
UI Style Guide and Branding
While our other two team members got to work on our wireframes, my other team member and I got to work on HHA's rebranding and styling.
During our stakeholder interview, when my team member asked HHA's founder her thoughts on any style guidelines for the redesign, she said she wanted it to remain colorful, but it "might be time for bubblegum to go" referring to their current primary header font, called "Bubblegum Pop". This font does communicate an eclectic and welcoming vibe, but is a bit hard to read against the bright yellow background (which can be seen in the "Original" photos in the previous section.
Along with that, the HHA founder also wanted to keep a similar vibe, but didn't want to step on the toes of the individual radio shows who may not fit that type of aesthetic, so a balance must be found along the way. Overall, she wanted to avoid the website feeling "corporate" at all cost, and wanted the experience of visiting the site to be fun for the user.
Redesign UI Style Direction:
"Maintaining HHA's approachable and welcoming vibe, and taking them in a more professional direction without veering too far into a corporate-y feel. Making their mission and values more clear to users immediately upon landing on the homepage."
Style Tile
For our color palette, we kept the coral, pale yellow, and dark blue colors from the previous website as more secondary colors, and brought in newer, cooler colors like Periwinkle and Lavender that would feel welcoming to the user. We also chose to incorporate a gradient in the background of each page, a subtle but effective way for the page to maintain its unique eclectic feel.
To keep the spirit of the "Bubblegum Pop" font, we found a similar looking font that was more filled in and easier to read called "Gloomie Saturday", which we used to replace the headings on the website. For the body text, we chose varying sizes of Montserrat, an approachable looking Sans Serif font. We also kept HHA's original font in our redesign on their About page to maintain some of the original design.
Final Style Guide
Conclusion and Takeaways
Keep a balance of focus and purpose while redesigning a nonprofit radio station - keeping it fun AND professional for a wider range of users
Appreciate the impermanence of the process, allow for improvement
Engaging with real life stakeholders provided a novel challenge and opportunity for our team
Have any thoughts or questions about this project?
Let’s discuss!
contact me
Have any thoughts or questions about this project?
Let’s discuss!
contact me
03 / Ideate - Create the Framework
Overview
Storyboarding
Card Sorting
Sitemap
Plan for HHA Redesign
Storyboarding
When it came to storyboarding, I thought back to our user, Andrew, and thought about why a user like him would benefit from using Humboldt Hot Air.
Created using Canva
Card Sorting
Two of my team members were able to complete the card sorting for HHA very quickly, as the entire site exists on one page. For our redesign, we thought about adding secondary navigation for the "About Us" page to highlight HHA's DJs, and the Program Schedule to view the Profiles of different radio programs.
Sitemap
Using Figma, I created our team's sitemap for HHA. In addition to the secondary navigation mentioned above, we also moved the contact form to a secondary page.
Plan for HHA Redesign
Goals:
Develop a more clear identity for HHA
Improve visual engagement for user
Encourage more user donations
Enhance sense of community through new "Meet the DJs" page
Highlight other HHA values through new "About Us" page
05 / Test - Test, Revise, Repeat
Overview
Mid-fidelity Prototype A/B Tests
Applying Revisions
High-fidelity Prototype - Final Design
Next Steps
Conclusion and takeaways
Mid-Fidelity Prototype A/B Tests
As mentioned, two of my group members were responsible for a majority of the wireframe design in Figma, and regularly checked in with myself and our other group member for feedback or ideas if they got stuck. Once the mid-fidelity prototype started to come together, we conducted some quick A/B testing on three users along with my other team member and I, simply asking each of us, "Which design do you prefer, this or that?" comparing different layouts, color schemes, and other elements.
Home page
About us page
Program Schedule
Applying Revisions
Once we had a better idea about the overall designs of each page, our team worked together to make final decsions about the smaller details, such as font type or sizing. We ultimately decided to go with the Home page that had the gradient background, the last About me design in the section above, and the second version of the Program Schedule shown above because of the improved clarity and overall effectiveness of the schedule.
With a limited amount of time, all four team members ultimately put in work to finalize the high-fidelity prototypes, especially since we had to create both a desktop and a mobile version. I also volunteered to create my team's case study presentation in Google Slides to present to our boot camp cohort.
Final Design
view final prototype
High-Fidelity Prototype
In addition to applying the revisions from our user tests on our to mid to high-fidelity prototype, our group updated our overall user flow in this last round of revision. We re-organized the onboarding process to improve the visual flow, added additional steps to clarify the user experience but overall, our original user flow didn't need a lot of editing.
Home
Our high-fidelity home page maintained the approachable and eclectic vibe the original website had, but is more usable, visually appealing, and displays the current radio show front and center to make HHA's purpose clear from the moment the user gets to the website. We've also listed the upcoming shows above the fold for users to be provided with a lot of useful information without having to search extensively for it.
Whereas the previous HHA website featured everything on the home page, our team decided to separate out About us, Meet the DJs, and the Program Schedule pages. We kept and updated all of the other information that was on the original home page.
About Us
Our About Us page features the same information and copy featured on the original website, but it also contains additional elements that tells the user more about HHA than a couple of paragraphs of text could; featuring their news highlights and press, as well as a Meet the DJs section, to get a bigger scope of HHA as a whole organization, as well as the individual DJs who contribute to their radio show.
Meet the DJs
To give the users a more in-depth look at each DJ that makes HHA what it is, we created pages to feature each DJ, their bio, and give users the ability to listen to past shows or tune into upcoming shows.
Program Schedule
During our original user tests at the very beginning of this project, the program schedule was mentioned multiple times by users, and presented us with many opportunities to revamp the design, layout, and usability of the program schedule.
The previous schedule displayed the entire week's worth of shows; we decided to reconfigure the schedule so only that day is displayed, but the user can click through the different days of the week on the page navigation, and use the arrows to navigate from week to week to view future radio shows as well.
view mobile prototype
If we had more time, we would...
Update the mobile version of HHA's existing app
Perform more user tests to fine tune features
Build out functionality of Program Schedule and DJ profile pages
Include pictures and bios of HHA staff on About Us page
Do another round of stakeholder meetings to go over specific copy
Humboldt Hot Air
"…a community-centered internet radio station…"
01 / Empathize - User Research
Overview
About Humboldt Hot Air
Competitor Analysis
Heuristic Evaluation
Research Approach
Interview Findings
About Humboldt Hot Air
According to their website, Humboldt Hot Air, or HHA, is "a community-centered internet radio station based out of the Creamery District in Arcata, CA. Our aim is to amplify the diverse voices we have in our community of Humboldt County and the surrounding regions."
The main features of the HHA website are livestreaming the currently scheduled radio show, "About HHA", their photo gallery, program schedule, a contact form, information about their underwriting, sponsors, and links to their social media accounts. The entire website exists on one webpage, pictured below along with their "About us" section. Their header navigation names are "home", "now playing", "about us", program schedule", "contact", and "underwriting".
Competitor Analysis
One of my team members took the liberty of completing a quick competitor analysis, focusing on the pros and cons of a few other online radio stations.
Heuristic Evaluation
Another team member and I handled the heuristic evaluation, focusing on opportunities for improvement in our redesign.
Research Approach
Since this project involved an existing website, we were able to dive right into a round of user interviews to get feedback on the current HHA website. We were also able to get in contact with the founder of HHA for a stakeholder interview.
User Interviews
I came up with six questions for us to ask our five users to better understand their first impressions, pain points, takeaways, and other general feedback on the current HHA website.
Examples of user feedback
"Fonts could be bigger in body text"
"Hated the schedule, overwhelming and not accessible"
"They should make it more immediately clear what they do"
"Every time you click on something, it shoots you down to the bottom; hard to navigate back to the top"
"They should include bios/pictures of the DJs"
"Include more clear/obvious descriptions of the radio show"
Stakeholder Interview
One of my team members is native to Humboldt county, and knows the founder of HHA personally, allowing us the opportunity to get a stakeholder interview along with our five user interviews.
Opportunities for Redesign
Make sure older users can easily use website, stream live
Play button front and center is crucial
Improve overall clarity of website
Remove dead space and include more graphic/visuals
Improve display of program schedule and archive
Top Takeaways
HHA's core values:
Community
Eclectic
Diversity of Programming
Past, present, and future goals of HHA:
Build community through radio
Bring in folks from all corners of the community (and beyond!)
Hyper local - All About Humboldt!
02 / Define - Synthesis
Overview
Empathy Map
Persona Development
User Insight
Problem Statement
Value Proposition
Empathy Map
Once our team had a better idea for the general direction of our redeisgn, we came back to our users, and put together and Empathy Map to put ourselves in their shoes. Ths ultimately helped to guide the creation of our User Persona.
Persona Development
From our user and stakeholder interviews, we found opportunities to increase the immediate impact and clarity of the landing page/above the fold portion of the website, giving a better sense of what HHA stands for and thereby encouraging increased engagement and support.
Additionally, we wanted to flesh out the About Us page and add a "Meet the DJs" portion to drive home the importance of community that is at the core of HHA, as per the stakeholder's goals of reaching and incorporating more members of the Humboldt county
In general, we wanted to figure out ways to better utilize the overall space and include more graphics (such as in a gallery), which were also mentioned by the founder, which will help the website develop a more clear identity and be more visually engaging.
Considering all of these possible improvements and our user feedback, we developed our User Persona, Andrew Williams.
Our user, Andrew, is local to the community, wants to be involved in local initiatives, and discover new, unique music, as well as someone who would be interested in the archive and look back through previous shows to have more opportunities to discover new music.
User Insight
A music lover who values supporting their local community and has an adventurous taste in music would like to easily view current and recently played tracks on his local radio station in order to be exposed to new artists and be kept up-to-date on local events.
Problem Statement
Humboldt Hot Air aims to aplify the diverse voices in their community of Humboldt County and the surrounding regions. Through user interviews, we have observed that some users struggle to understand Humboldt Hot Air's purpose from its website, which could impact the number of users using it to listen to the live radio shows or donate to their cause.
How might we improve the design and structure of HHA's website so users can more clearly understand their organization and purpose, thereby encouraging engagement with the various radio shows/donations to their organization?
Value Proposition
Humboldt Hot Air has given a platform to local artists and DJs to creatively express themselves, as well as gain recognition and support from community members to diversify the art and speech of Humboldt county.
03 / Ideate - Create the Framework
Storyboarding
When it came to storyboarding, I thought back to our user, Andrew, and thought about why a user like him would benefit from using Humboldt Hot Air.
Created using Canva
Card Sorting
Two of my team members were able to complete the card sorting for HHA very quickly, as the entire site exists on one page. For our redesign, we thought about adding secondary navigation for the "About Us" page to highlight HHA's DJs, and the Program Schedule to view the Profiles of different radio programs.
Sitemap
Using Figma, I created our team's sitemap for HHA. In addition to the secondary navigation mentioned above, we also moved the contact form to a secondary page.
Plan for HHA Redesign
Goals:
Develop a more clear identity for HHA
Improve visual engagement for user
Encourage more user donations
Enhance sense of community through new "Meet the DJs" page
Highlight other HHA values through new "About Us" page
Overview
Storyboarding
Card Sorting
Sitemap
Plan for HHA Redesign
04 / Prototype - From Paper Sketches to Figma
Overview
Wireframes
UI Style Guide and Branding
Wireframes
With our Sitemap established and goals identified, our group was ready to start our wireframes. Our team decided to start by creating low-fidelity wireframes in Figma individually. Then, we came back together to give feedback on each others' wireframes, as well as identify elements used that we can incorporate into our collective wireframes.
Low-Fidelity Individual Wireframes
My HHA Wireframes
Team member #1's Wireframes
Team member #2's Wireframes
Team member #3's Wireframes
We ultimately pulled bits and pieces from each design, but decided to split up the wireframe design and the style guide/UI branding. Team members 1 and 3 took over the wireframes, and team member 2 and I began on the style guide, providing feedback and suggestions to each other along the way.
Low-Fidelity Wireframes
The first round of our group's wireframes were more minimal, and included both the mobile and desktop version. We created a Home page, an Artist Profile page, and an About page. Below is the mobile version.
Home page
"Meet the DJs" page
"About us" page
"Now Playing" Widget
One team member also had the great idea to add a "Now Playing" widget at the bottom of the screen for the user to be able to quickly navigate back to the radio show they're listening to faster, and they will be able to see the names of the songs playing more easily if they're not on the home page.
Mid-Fidelity Wireframes
Home page
When designing the home page, since one of our main goals was to improve the overall visual effect of each page, we decided to make the "Now Playing" widget more clear and obvious to the user, provide the information about the current DJ and radio program in the same view, and let users see which radio shows are next on the schedule for that day.
Original
Iteration
About us page
The current HHA website has their "About" section right below the fold on their home page. Our team decided to keep the previous copy for users to get a clear view of HHA's mission and values right away, but we also created a secondary page that provides additional information all in a more concentrated place for the user, including recent Highlights and Press releases from HHA, as well as the "Meet the DJs "section that helps users learn more about the people who bring the music to HHA!
Original
Iteration
Meet the DJs page
The current website displays the information about each DJ if you click on their name on the program schedule, but it is all displayed on the home page and becomes visually overwhelming for users to click through each piece of information and navigate back. Our team decided to create Meet the DJ pages that displays DJ bios, pictures, and upcoming shows, aiming to provide clarity and an easier sense of navigation.
Original
Iteration
Program Schedule page
Between our low and mid-fidelity iterations, our group made the decision that we should create a secondary Program Schedule page as well as the three other pages above. Although the current program schedule is featured on the home page, our group thought that creating its own navigation would allow for a more intuitive use for users.
Original
Iteration
Through these couple of rounds of designing and iterating, we worked as a team to keep the goals of the redesign in mind, and aimed to keep HHA's values of community, being eclectic, and highlighting the diversity of their programming at the forefront.
UI Style Guide and Branding
While our other two team members got to work on our wireframes, my other team member and I got to work on HHA's rebranding and styling.
During our stakeholder interview, when my team member asked HHA's founder her thoughts on any style guidelines for the redesign, she said she wanted it to remain colorful, but it "might be time for bubblegum to go" referring to their current primary header font, called "Bubblegum Pop". This font does communicate an eclectic and welcoming vibe, but is a bit hard to read against the bright yellow background (which can be seen in the "Original" photos in the previous section.
Along with that, the HHA founder also wanted to keep a similar vibe, but didn't want to step on the toes of the individual radio shows who may not fit that type of aesthetic, so a balance must be found along the way. Overall, she wanted to avoid the website feeling "corporate" at all cost, and wanted the experience of visiting the site to be fun for the user.
Redesign UI Style Direction:
"Maintaining HHA's approachable and welcoming vibe, and taking them in a more professional direction without veering too far into a corporate-y feel. Making their mission and values more clear to users immediately upon landing on the homepage."
Style Tile
For our color palette, we kept the coral, pale yellow, and dark blue colors from the previous website as more secondary colors, and brought in newer, cooler colors like Periwinkle and Lavender that would feel welcoming to the user. We also chose to incorporate a gradient in the background of each page, a subtle but effective way for the page to maintain its unique eclectic feel.
To keep the spirit of the "Bubblegum Pop" font, we found a similar looking font that was more filled in and easier to read called "Gloomie Saturday", which we used to replace the headings on the website. For the body text, we chose varying sizes of Montserrat, an approachable looking Sans Serif font. We also kept HHA's original font in our redesign on their About page to maintain some of the original design.
Final Style Guide
05 / Test - Test, Revise, Repeat
Overview
Mid-fidelity Prototype A/B Tests
Applying Revisions
High-fidelity Prototype - Final Design
Next Steps
Conclusion and takeaways
Mid-Fidelity Prototype A/B Tests
As mentioned, two of my group members were responsible for a majority of the wireframe design in Figma, and regularly checked in with myself and our other group member for feedback or ideas if they got stuck. Once the mid-fidelity prototype started to come together, we conducted some quick A/B testing on three users along with my other team member and I, simply asking each of us, "Which design do you prefer, this or that?" comparing different layouts, color schemes, and other elements.
Home page
About us page
Program Schedule
Applying Revisions
Once we had a better idea about the overall designs of each page, our team worked together to make final decsions about the smaller details, such as font type or sizing. We ultimately decided to go with the Home page that had the gradient background, the last About me design in the section above, and the second version of the Program Schedule shown above because of the improved clarity and overall effectiveness of the schedule.
With a limited amount of time, all four team members ultimately put in work to finalize the high-fidelity prototypes, especially since we had to create both a desktop and a mobile version. I also volunteered to create my team's case study presentation in Google Slides to present to our boot camp cohort.
Final Design
view final prototype
view final prototype
High-Fidelity Prototype
In addition to applying the revisions from our user tests on our to mid to high-fidelity prototype, our group updated our overall user flow in this last round of revision. We re-organized the onboarding process to improve the visual flow, added additional steps to clarify the user experience but overall, our original user flow didn't need a lot of editing.
Home
Our high-fidelity home page maintained the approachable and eclectic vibe the original website had, but is more usable, visually appealing, and displays the current radio show front and center to make HHA's purpose clear from the moment the user gets to the website. We've also listed the upcoming shows above the fold for users to be provided with a lot of useful information without having to search extensively for it.
Whereas the previous HHA website featured everything on the home page, our team decided to separate out About us, Meet the DJs, and the Program Schedule pages. We kept and updated all of the other information that was on the original home page.
About Us
Our About Us page features the same information and copy featured on the original website, but it also contains additional elements that tells the user more about HHA than a couple of paragraphs of text could; featuring their news highlights and press, as well as a Meet the DJs section, to get a bigger scope of HHA as a whole organization, as well as the individual DJs who contribute to their radio show.
Meet the DJs
To give the users a more in-depth look at each DJ that makes HHA what it is, we created pages to feature each DJ, their bio, and give users the ability to listen to past shows or tune into upcoming shows.
Program Schedule
During our original user tests at the very beginning of this project, the program schedule was mentioned multiple times by users, and presented us with many opportunities to revamp the design, layout, and usability of the program schedule.
The previous schedule displayed the entire week's worth of shows; we decided to reconfigure the schedule so only that day is displayed, but the user can click through the different days of the week on the page navigation, and use the arrows to navigate from week to week to view future radio shows as well.
If we had more time, we would...
Update the mobile version of HHA's existing app
Perform more user tests to fine tune features
Build out functionality of Program Schedule and DJ profile pages
Include pictures and bios of HHA staff on About Us page
Do another round of stakeholder meetings to go over specific copy
Conclusion and Takeaways
Keep a balance of focus and purpose while redesigning a nonprofit radio station - keeping it fun AND professional for a wider range of users
Appreciate the impermanence of the process, allow for improvement
Engaging with real life stakeholders provided a novel challenge and opportunity for our team
Overview
ROLE:
UX Designer; team of 4
TIMELINE:
3 weeks - 30+ hours
TOOLS USED:
Figma / Canva / Procreate / Trello
Assignment
Redesign a non-profit organization's website. Create a mobile and desktop version.
Note: This project is a fictitious scenario, completed as a part of UC Berkeley’s Online Extension UX/UI Design Program. The interviews and user testing were all conducted with real people, however.
view final prototype
view final prototype