Client:
Wahl Grooming

Role:
UX/UI Designer

Team:
UX/UI Designer, Development team

Deliverables:
Competitive analysis, Site map and user flows, Wireframes, Design styles, Final UI designs

Project Goals:

• Provide a platform to house educational content

• Encourage lifelong learners and newbies alike to try new techniques

• Educate users how to properly use Wahl tools and discover new ones

• Establish trust and credibility for the Wahl brand
  
  

Approach: Create a foundational microsite with templated pages that will allow the site to scale in the future as the resource library grows.

Compiling things to consider

To kick this project off, I took a look at some competitor sites where similar content was hosted. From here, I took inventory of what worked well and what could be improved. Compiling a list of user stories, tasks and features to include at this point also helped me establish a clear picture of things to consider when building this site.

Top Takeaways:

• Showcase the value of signing up for an account early on

• Allow for users to preview what kind of resources would be available

• Include the ability to filter and sort content to quickly find relevant resources

• Give users a estimate of the total amount of resources available

• Provide links to tools that were used
  
  

Establishing user flows, site map and wireframes

At this point, I came up with an overview of what pages would be helpful to include, which templates to create and how the user might flow through the site. Once these were determined, I moved on to initial sketches and then created wireframes.

Establishing design styles:

Because this was a microsite that would be hosted separately from the Wahl grooming site, the client had given free rein for the UI design.

In order to ensure that the microsite retained a visual connection to the live Wahl grooming site, I took the brand’s current fonts, colors and imagery into account when coming up with any new suggestions:

• To provide a more sophisticated pairing of colors, I recommended a refined color palette with monochromatic grays supporting their main brand colors of teal and orange. 

• To simplify iconography, I presented updated solid icons with enough detail to be identifiable, while not being overly complex at small sizes.

• To reduce site load times that can happen when using custom fonts, I suggested that we went with an open source style that matched the established brand font.

In the end, the client was impressed by the new color palette and ultimately brought it over to the main grooming site upon completion of this microsite.

Design concept exploration

With the design styles determined, I presented the client three homepage concepts for them to consider. This would allow me get an idea of what kind of direction they were hoping to go in for the site (e.g. modern, traditional etc.).

Seeing the suggested styles, color and typography in context also helped the client confirm the design recommendations I had made as well. 

Building out the rest of the pages

From the presented concepts, the client opted to move forward with option A with a few elements of option C pulled in. From here, I updated the homepage and designed the rest of the pages with multiple client reviews along the way. Because content was being worked on simultaneously, the mocks used placeholder content and imagery.

Overall, the process went quickly and smoothly with limited rounds of revisions for each touch point. The client was pleased with the final mocks and has been able seamlessly scale the site as more content has been added.