PROJECT: REACH MARKETING WEBSITE
ROLE: WEB DESIGNER
YEAR: 2017

Summary

Reach helps you synchronize your schedule with your family to find more opportunities to call, message, and visit them. Share your calendars, sync reminders and organize events with your family and show them that you're never too far from reach.

BACK TO TOP

Task

With Reach available in the market, a website needed to be created to help market this brand new product to the world. The website needs to follow the current Reach branding and appeal to the target market.

BACK TO TOP

Ideation

Reach is a family product, so the website needed to give the feeling of family. The images that I wanted to display had to show emotional attachment, laughter, happiness and most important of all, they had to be candid. Candid imagery gives the impression that is very genuine, and that is the core value of Reach.

BACK TO TOP

Sketches

After the ideation process of what kind of look and feel I wanted for the site, I started a sketch on paper to give structure to the landing page.

Wireframes

Then it was time to digitize and add copy some copy to the website. Getting the text right at this point will make the visual design much easier because you will have the story of the website already mapped out.

When creating the desktop wireframe, I was already thinking of what it would look like on mobile. By creating a structure with a maximum of two columns of information, it would be easy to translate into mobile by stacking the content.

Hi-Fidelity Elements

With the wireframes ready, I could start building assets. I didn't want to just use the images as is, I wanted the Reach brand to pop out of the imagery more. To do this I cropped out the backgrounds of the images of people and added the magenta background shown throughout the Reach app.

Animated GIFs

Using Adobe After Effects, I animated the functionality section to give the potential user a feel for the app and introduction to the UI. This also gives the website some movement and more life.

Colours

With the wireframes ready, I could start building assets. I didn't want to just use the images as is, I wanted the Reach brand to pop out of the imagery more. To do this I cropped out the backgrounds of the images of people and added the magenta background shown throughout the Reach app.

Prototype Mockup

Here is the final product displayed in a mockup.