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.
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.
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
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.