Scavi & Ray - Digital Design / Mockups

Scavi & Ray - Digital Design

App Design

Before i began designing the App for The Scavi and Ray brief i needed to have a look what existing apps which were Alcohol brand related were out there to create the theme for the Scavi and Ray app.

Stella Artois - App

The Stella Artois Le Bar Guide app helps beer/Stella Artois lovers find and discover places to drink. It pulls in Google Maps to search nearest bars serving Stella Artois to your location in an Augmented Reality. The whole idea is quite fantastic and could turn into a frequently used app for pub crawlers, but it is currently rated 2.3 stars in the app store and has yet seen success.

Getting the right sizes for an iPhone 5 Mockup i created a document in illustrator with 6 pages that i could later use to mockup into iPhone screens.

I made a list of different pages i felt would be needed to show the different sections of the App.

- Landing Page

-  About

-  Scavi and Ray locator

- Example of the map

- Shop the Range

- Capture the moment

Landing page for the App-

I decided to keep with monochrome colour scheme and kept it black with the white logo and put log in and signup underneath for the user.

 

About Homepage:

For the App design i wanted to create a series of icons. 

Home / Map / Basket ( For shop the range) and the Camera Section of the App.

Using the brief pack and research I got a small about of information about the brand for the home page. 

I added the shop the range button i created a grey outline to go around the text so the viewer was able to tell it was a button. I also made the home symbol grey so you could tell you were clicked on that specific page.

For the first section of the Scavi and Ray Locator I made a page where you could either click on a new search or look at previous ones. Also the user is able to check in. The whole aim of this section to allow the user to find the most nearest location that serves Scavi and Ray.

I google mapped an area of leeds where i knew appropriate shops/places which we were proposing would be on there. 

I Needed to pint point them and create little icons so the places where easily recognisable.

I decided to try both icons to see what worked best in what way. I felt the droplet idea was maybe to obvious and you could really see the logo on the map to clearly.

Then i though to try a smaller icon and create a clothing tag. Also using the smaller logo of Scavi and Ray along side the bottom the tag. This was also decided as the main theme behind the brief was to be fashion related it made sense to have this style tag.

 Victoria Secrets , Louis Vuitton & Vivienne Westwood

Topshop & The Botanist:

Picking one specific part of the map i cropped it and made a clipping mask using the shape of the App page i created so it was the same size as the designs and fit onto the art board perfectly.

Shop the range:

I wanted the App to be very multipurpose so i decided to use the drink vector images from the brief pack and create a page in the app where you could purchase all of the drinks online. 

I also created small little circles featured under all of the bottoms so you can scroll to the next page to see more of the range.

The capture the moment page was another page made for the user to get the full Scavi and Ray experience.

Using one of the black and white polaroid images Issy sourced i added that image to the app page as though it had been an image taken using the device.

I added buttons for retake/upload/edit

I also created a text box where it was available for you to type a message before uploading the image to the website and Scavi and Ray live feed.

IPhone Mockups:

Mockups:

M&S:

London fashion week bus stop mockup:

 Polaroid image mockup:

 Topshop & M&S mockups:

Web page:

Using a still from the video we created i added that to a mac screen along with tabs which would be featured along the top of website. including associations and London fashion week.

 

Instagram mockup :

For the Instagram mockup i actually used screen shots from the instagram we had created and displayed them on devices to show how the hashtag #proseccoplease would work.