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 d 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. I saw that we had 33,340 unique visitors to our website. However, only 171 of those people clicked on the "Join For Free" CTA, however 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. I also saw that of our visitors, 78.4% 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. Lastly, I found that our drop off rate was 83.3% with an average of 1 minute and 24 seconds spent on our site, and an average of 1.47 pages per visit. 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. By using sketches as low-fidelity wireframes, I did multiple rounds of design and revision before starting the next step.

bizx-website-sketch

Then, I mapped out user flows (not pictured) through the site and created a sitemap.

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. Graphic design elements were left as placeholders, since outsourced our graphic design work. Click to view all the PDFs.

I used a 12-column grid system to layout my designs. For typography, I used Modular Scale to come with a ratio for spacing and font sizes. I using proper headings, organized blocks of information, and a primary, secondardy, and tertiary CTA system to establish hierarchy. After all the pages were designed, I annotated each page. bizx-website-grid bizx-website-home-annotated

Development

Currently, I am working on this phase with our development team.

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

TOOLS USED
Sketch
Google Analytics