now loading

The Honey POP Website Redesign

August 4, 2022

Who is The Honey POP/THP?

The Honey POP is an online pop culture magazine that is dedicated to providing high-quality, fan-centered coverage.

In less than three years, THP has grown tremendously and is in need of a website redesign.

The current website lacks ease of use for readers. Readers are also clicking off of the site and not spending time looking through all of the coverage posted.

Roles + Responsibilities

  • Sole researcher, Visual Design, Prototyping, User Testing
  • Figma, Google Slides, Google Forms, Notion

The Problem

The current website lacks ease of use for readers. Readers are also clicking off of the site and not spending time looking through all of the coverage posted.

Target Audience

  • Ages 13-30
  • Avid pop culture readers
  • People in fandoms
  • Gender: Female, Gender Non-Diverse
  • Common job titles: Student

The Solution

I created a simple and clean website that features The Honey POP’s social media platforms and created a beautiful home page that housed all of the important parts of the magazine. The main problem readers were having was the search button being too far down and having the home page look really cluttered, so I moved the search bar to the top and cleaned up the home page.


Discovery + Research

These findings drove my user-centered process as I realized that I needed to focus on decluttering the home page and bringing social media to the forefront to bring in new readers.

I utilized Google Forms and sent a user survey to members of a Discord community and through a Slack channel. I had 10 participants for this survey.

Key Demographics

  • Age range: 13-27+
  • Gender: Female, Gender Non-Diverse
  • Common job titles: Student

Key Psychographics

  • Values: Pop culture and their favorite artists
  • Likes to: Be on social media, listen to music, go to shows, learn about pop culture
  • Wants to: work in the music industry, wants the best for their favorite artists

Preferred Content Types

  • Do they like to read magazines, books, or watch TV?:
    • Watch TV, go to concerts

Preferred Channels

  • Email, phone, etc?:
    • Phone
      • Browses social media platforms like:
      • Twitter, Instagram, and TikTok

Challenges

  • What is holding them back from achieving their goals?:
    • Lack of knowledge of the design process and UI design

User Pain Points

The website is cluttered and hard to navigate. Users are unable to find exactly what they are looking for. Users are confused about where the search bar is.

Competitive Analysis

I completed a competitive analysis to help gauge how THP’s competitors were laying out their websites and what their strengths and weaknesses were. I also wanted to see if there were any opportunities they missed that THP could utilize.


The Information

User Stories

– Readers need to be able to search for articles that they want to read.
– Readers need to have a clean and simple website to enable them to find articles about their favorite artists.
– Readers need to be able to view social media postings and share articles to social media.

I prioritized these user stories as this was what I found to be the most important for THP users.

User Persona

Through user surveys and exploring who the target audience is for The Honey POP, I created the persona of Ella Johnson. They are a non-binary person who is passionate about music and interested in tasteful coverage of their favorite artists.

User Persona
User Persona

Wireframes Sketches

This was the first step I took in laying out the website redesign. I started out with jotting down some quick notes and ideas for the redesign. I then went on to do a Crazy 8 sketch with different format ideas. Sketches are incredibly important as this allows the designer to quickly move and change ideas. It would take longer to do this in a digital design tool, which isn’t feasible during the sprint.


Low Fidelity Wireframes


Testing

Usability Testing

I utilized usability testing to find out how easy the prototype was to navigate. I tested the flow and ease of use of the site, along with the navigation section.

Tasks Tested

The task for the user was to locate the search bar and use it to find an article. I also tested the user on the flow of the layout and the ease of use for the navigation.

Overall Experiences

Zoom Interview #1

  • Loved the pop-out search bar
  • Would like to see another search bar placed somewhere else or have a static header.
  • Liked the layout of the music and article pages.

Zoom Interview #2

  • Unsure about the pop-out search bar.
  • Loved the sidebar on the article and category screens.

Higher Fidelity Wireframes

From the first iteration of the low-fidelity wireframes, it was important for me to change the spacing in the higher fidelity wireframes to make sure there was enough white space and that each button was large enough for accessibility purposes. I followed a grid pattern in this iteration that created a more cohesive and symmetrical page. This in turn helps the user follow the page and gives them enough room to click on each button easily.


Next Steps + Recommendations

The next steps will need to be adding the shop and about pages and also laying out what the drop-down menus will look like before moving on to the development section.

Based on the user interviews, I believe this is the best way to move forward. The website is clean and simple, is easy to navigate, and allows the user to move about the site with an ease of use that isn’t in the current website.


Prototype

Click to view prototype through Figma
  • Leave a comment

All Aboard Bus App Previous post All Aboard Bus App