BIZX WEBSITE

Purpose

I led the re-design of the BizX website in order to more clearly explain what BizX is, to drive more leads and sign ups, to make the website more engaging, and to adhere to our brand's style guidelines.

Click to view the final designs.

Process Overview

  1. Research - Analyzed our Google Analytics data and user tested our website with three participants.
  2. Design - Created sketches, user flows, sitemap, annotated wireframes, and high-fidelity UI designs.
  3. Development - Collaborated with our partnering web development team to build the designs.

Research

After analyzing our Google Analytics over a year I created and presented a report, and I will discuss a few points that stood out.

  1. 33,840 unique visitors came to the website in 2017. However, only 181 of those people clicked on the "Join For Free" CTA and 496 people filled out a "Contact Us" form. This showed us that there is a lot of friction in signing up for membership right away; therefore in the new designs we decided to focus on generating leads instead of driving sign ups immediately.
  2. 78% of the people played the video on our homepage. This showed us that our users are likely to engage with video content, so in our project plan we included a milestone of creating a short one-minute animated video to explain what BizX is.
  3. 74% of people dropped off after viewing the homepage.This revealed that users are not exploring our website as planned, and that they aren't finding what they need. This shows us that the navigation is poor, content needs to be revised, and that the homepage should be optimized.

In addition, I spoke to a few members about their thoughts about our website and the consensus was that the content was too text heavy, the images were not engaging, and that the content was old and repeated.

Design

I first did a lot of sketching to think about all the possible solutions with an open mind, considering the research results. I brainstormed my ideas together with our marketing team as well as getting input from our leadership team. Then, I mapped out user flows through the site and created a sitemap.

bizx-website-sketch bizx-website-sitemap

Next, I created low-fidelity wireframes using Sketch. I presented this to my lead and did a few rounds of revisions before creating more polished mockups.

bizx-website-wireframe

The result was high-fidelity UI designs using Sketch. I annotated the designs as well to hand off to our partnering web development team. Some graphic design elements are still shown as placeholders since I moved on from my role at BizX before diving into the visual design elements. Click to view all the PDFs.

I created a UI style guide for the website. This including things like typography, layout, colors image styles and button styles. After all the pages were designed, I annotated each page. bizx-website-grid bizx-website-home-annotated

Development

I collaborated closely with our partnering development and design team to write spec and provide necessary direction on the remaining design elements to be created.

Limitations

Because of the low amount of resources we had and the restricted timeframe on the project, I was not able to do as much user testing as I would have liked before going onto the development phase. This would have been valuable to get member insight as well as get feedback from business owners who have never heard of BizX before.

DOCS CREATED
Annotated Wireframes
Sitemap
User Flow
High-fidelity UI Designs

TOOLS USED
Sketch
Google Analytics