Project Brief
Create a site for users who beta test Google apps on iOS devices, where they can manage their accounts, and find new apps to test.
Roles & Responsibilities:
Sketch out initial wireframes and the user flow through the sign up process. Identify the overall brand look and feel of the landing page. Assisted and approved the interactive animation process. Interpreted design decisions to the client for final approval.
Phase 1
Research & Ideation
As always our first exercise was to get together and sketch out the site structure. One thing we had to keep in mind, was “mobile first” design, meaning that we were creating for the most optimal mobile experience. The website featured a sign up process, device selection screen and a few other features that were perfect for showcasing smooth transitions and fun animations.
Phase 2
Wireframes
With this product we decided to stick to a traditional web experience since the main function of this site was informative and utilitarian. A clean, simple content structure with small animated embellishments was the direction we had in mind.
But before we could start implementing all the fun little features, we first had to figure out the content structure and overall user experience of the site.
Below are a few examples of early concepts and page structures we explored.
Phase 3
UI Explorations
Solidified on the site structure, we began exploring the look and feel of the site. Since the beta program would span across all sorts of devices, we wanted to bring attention to that with an animated banner. Illustration style was very geometric in nature and utilized Google’s existing color palette.
The site featured several small animations that embellished customer testimonials, sign up process and and a variety of other experiences.
Phase 4
Testing & Implementation
Both experiences were thoroughly tested and optimized across several platforms, web browsers, mobile phones and computer screens.
Final Experience
The final experience featured several animated and dynamic elements, a sign up flow, info page, a list of apps available for beta testing, testimonials and FAQs.
Below is an example of the final page.
