NOTE: This project is currently in progress.
HR Girlfriends is a membership service that helps HR professional women uplevel their careers by providing certification, continuing education, and networking events to its members. My role was to re-design the website according to business goals and the insights gathered from the research stage.
After running a couple of tests on usertesting.com, some of the feedback Sana, the business owner, received was that people did not know what her website was for. Saná reached out to me because she wanted a new design for her website that, not only represented her business better, but that was also simpler, more user-friendly, and that met her user’s needs.
I always start any design project with the target user in mind. The first step was creating a customer experience map with Saná in order to gather insights that would later inform the design, layout, copy, and other elements within the website.
From this exercise, I was able to uncover the two different user personas who are HRG’s target market. The exercise also revealed the journey the user personas take on their way to upleveling their careers as HR professionals.
Now that I knew the target user from the business POV, I also wanted to understand the user’s needs from their perspective. I executed a couple of unstructured in-depth interviews with HRG’s target market that later informed the task models I would use to inform the design.
For example, one of the interviewees who already had a membership to a different HR association, explained that one of the major factors for joining the association was because of the networking events. Ironically, she made the most out of her subscription by having access to the resources available to members within the website and has yet to attend an event. She also reported the importance of having industry certification. Thus, I made sure the design placed more emphasis on anything having to do with certification, networking, and member resources.
Next, I researched three HR associations in order to understand the nature of the HR industry. This exercise also assisted in finding areas of opportunity for standing out amongst other competitors.
The first step of the design stage was creating the information architecture of the website. I achieved this by running open card sorting exercises using sticky notes. The purpose of the card sorting exercises was to inform the structure of HR Girlfriend’s website in order to uncover the most intuitive categories and labels as they navigate the website.
Regarding the menu navigation, Saná wanted very much to have a simple navigation and requested no drop-down menus. She wanted instead to lead users to landing pages where they would be presented with icons and links to more specific content under each category.
With the website’s structure in place, it was now time to start the design process. First, I created several paper wireframes in order to iterate through many design options. The two wireframes below, are wireframes made by Sana.
Next, I created a simple UI kit with Adobe Illustrator in order to keep visual consistency throughout the website.
Using the UI kit, I created a working prototype in a subdomain within the website. Again, my goal was to save time before committing to a final design and testing usability.
Per Saná’s request, the website was created using the BeTheme Wordpress theme in combination with the WPBakery plugin.
The prototype can currently be found at the following URL: http://staging.hrgirlfriends.com
HR Girlfriends was a very big website that required a lot of attention to detail and strong organizational skills. Above all, the main goal with this project was to simplify the website and to create paths for users to move through in order to increase subscriptions and/or sales.
Further, the old design had some bugs that caused a lot of problems in the beginning. For example, the content in the WP Bakery plugin did not transfer seamlessly from the main site to the subdomain. This slowed down the project because I had to replicate every single page.
I always enjoy uncovering the insights that will inform the design through task modeling and the customer experience map. Everything from the headlines, to the copy, and the way the page content flows was informed by what I uncovered during research.
This project is in progress so there is no measurable data to report at this time.
Original design vs. New Design