TeamWorks: Launch Site

Visual Design

Client – BioConnect

BioConnect is a biometrics technology company that creates identity management hardware applications and software platforms focused on enabling easy adoption of current and future biometric technologies.
I was tasked to work on the visual design for the launch website of their new product TeamWorks. A Team management application that integrates with BioConnect’s current biometric hardware.

Landing A'hoy

The goal for the website was to present the TeamWorks application as the new ‘hip and happening’ team management application. The overall esthetic of the site was kept very minimal with accents of color highlighting important information.

I broke the website down into different parts, the first part was the landing screen. This section of the website was crucial to hooking the viewer in setting the tone of what they would expect from the rest of the site.

I paired the blue, the pre-established brand color, with a hue of yellow to give a more fresh and energetic feel.
I came up with four different variations of the landing screens and presented them to the TeamWorks team. At the end they chose to go with #3.

Finalizing the landing screen before designing the entire site, allowed me to get a better understanding of the tone that TeamWorks team wanted. It also allowed me to unclutter my brain, so once started working on the rest of the site, I already had a concrete direction to work with.

Middle Ground

The second section consisted of showcasing TeamWorks primary features; features that were most used by users in the beta. My goal with this section was to guide the viewer’s eyes through the content without losing their attention. I wanted to make sure that they were intimidated by the amount of content and how much they would need to read through. I started by experimenting with designing a couple of different layouts, favouring to use yellow is the primary color for the section in different capacities in order to balance out the blue from the landing page. I also continued

the use of illustrations established in the landing page, adding two other illustrations based upon the screens the team wanted to highlight. The illustration style was chosen for its effectiveness in communicating the necessary aspects of the screen, in a visually pleasant manner with out showing too much. After exploring different layouts, I chose three that I felt were the strongest and presented them to the rest of the team. #3 was chosen as the final direction.

Home Stretch

The final part of the site consisted of adding the pricing section for the TeamWorks service, adapting the design for tablet and mobile, and the signup form. I also went back and did a refinement of the rest of the site fixing any inconsistencies that I might have missed the first time.

Since the pricing section only had one tier, I decided to make it as obvious to the user as possible. Using larger text size

created a nice contrast in comparison to the rest of the more content heavy sections of the websites. I also kept the yellow as primary color, due to the colors positive attributes and with intention of the viewer being more inclined to buy the service if they felt happier.

After finalizing the design for the site, I started adapting the layouts to tablet and mobile. The over layout for the website remained relatively the same across all devices. The most prominent change occurred on mobile where I added shadows at the beginning of the ‘primary features’ section and the ‘pricing’ section, creating material design-esque layering effect.

Last but not least I created a quick sign up form for viewers to get started with the on-boarding the with the application. The layout for the form was kept intentionally straight-forward in order to allow the user to fill it out as fast as possible.