As I now had a good understanding of the outcomes I want to produce, digital developments were able to be completed. Three main steps were taken that led to the final outcomes being created.
Visual Considerations
As ASOS is a huge company, it is crucial that brand guidelines are kept to in order to keep consistency across all its platforms/marketing campaigns. After researching online I could not find any guidelines regarding design; therefore, I analysed the site to find various visual characteristics that should be followed when producing digital designs.
Typography
ASOS uses two main typefaces on its platform - Futura Pt and Tahoma. Futura Pt Light is used for body copy and sub-headers, whilst Futura Pt Heavy is used for headers. Tahoma tends to be used for product descriptions and small-sized paragraphs of type. For its marketing, Futura Pt mainly appears to be used. To ensure that my site developments and marketing campaign work with the existing ASOS platform, both typefaces were used throughout the development stage.
Colour
The overall colour scheme on ASOS is very basic. Black is used for bold type and icons, grey is used for sub-header type and paragraphs, white is used for backgrounds and green is used for CTI buttons (‘Add To Bag’, ‘Shop’ etc.). As it is kept very simple, I was able to make a colour scheme that could be used when producing digital designs.
The overall colour scheme on ASOS is very basic. Black is used for bold type and icons, grey is used for sub-header type and paragraphs, white is used for backgrounds and green is used for CTI buttons (‘Add To Bag’, ‘Shop’ etc.). As it is kept very simple, I was able to make a colour scheme that could be used when producing digital designs.
Young adults have been proven to being more attracted to brighter colours than more muted ones. Whilst green is the only main colour in the scheme, all the colours are very contrasting, which is good as I will be able to effectively grab the young audience’s attention through using opposing colours and transitions (for the marketing campaign).
Imagery, Space & Style
The overall aesthetic of ASOS is minimal, clean and straightforward, making the user experience very clear. Images are large, which is one aspect that consider to be very important (found in the research stages). On the mobile site, ASOS tries to make images as large as possible across the screen; product pages have images that span the entire width of the screen, whilst the catalogue has very margins. As for the typographic layout, text is surrounded by a lot of white space to put a clear focus on the information. This will be used to inform the platform development AND marketing campaign.
The overall aesthetic of ASOS is minimal, clean and straightforward, making the user experience very clear. Images are large, which is one aspect that consider to be very important (found in the research stages). On the mobile site, ASOS tries to make images as large as possible across the screen; product pages have images that span the entire width of the screen, whilst the catalogue has very margins. As for the typographic layout, text is surrounded by a lot of white space to put a clear focus on the information. This will be used to inform the platform development AND marketing campaign.
Overall, as ASOS' platform is already hugely successful in targeting young adult consumers, there was no necessary need to make changes to their existing aesthetic. In terms of platform development, it is essential that the new ASOS ONE feature stays consistent with the existing visual to ensure that consumers instantly identify it as part of the entire ASOS platform. For the marketing campaign, it is important to keep visual characteristics the same to keep a consistent brand image; however, the visuals for this can be a bit more fun and eye-catching, as it will be targeted specifically for young women.
Storyboards (with audience and technological considerations)
Before creating digital designs I analysed the existing site map of ASOS and created a storyboard, focusing on how the sizing feature and ordering restrictions would work. I chose to name the developed platform ‘ASOS ONE’ to link to how ASOS picks the best, or ‘ONE’, size for you. The basic storyboard made can be seen below. ASOS ONE would essentially be integrated into the site so that new, and existing users, would be able to use it. For my outcome, I am going to make a walkthrough video, focusing on how a young woman would purchase a top. As more women clothes shop online than men, it was more appropriate to select a popular section of clothing to cover. Showing the entire catalogue of items would be too time consuming for me, and would be done by an algorithm if ASOS launched this idea. The video essentially shows the women opening the site, going to the ONE section, entering what she’s shopping for, entering her measurements and then being able to shop through size-assorted platform, with sizes already predicted at checkout. The prevention of the young woman buying more than one size of the same item will also be shown in the video.
Storyboards for the marketing campaign were also made; focusing more on transitions and data. Green type highlights where data would be input. Based on the customer’s purchase, certain similar products would be picked by an algorithm. This, along with their name, would be input into an editable template. For my outcome, I am just going to make an example video that a customer would be sent; I do not have the ability to produce a working dynamic ad as it is very technological - production of the template would be done by a marketing company if ASOS was to launch the idea. Further info on this can be found on the production and distribution boards.
Physically Creating the Outcomes
When creating the outcomes I wanted to ensure that the target audience was completely considered. To do so, I looked back over my research made and noted some points that needed to be followed:
The first element that I needed to produce was the 'ONE' logo. This was kept in line with ASOS' clean, simple and minimal style, using the Futura Pt Light typeface to keep a consistent aesthetic.
The first outcome that I chose to produce is the platform walkthrough video. The easiest way to produce this was to design the mobile platform stills in Photoshop and animate it in Adobe After Effects. By relating back to the visual considerations made earlier in the development stage, stills were made for each section of the storyboard. Informed by the space analysis made of ASOS' existing site, designs were made fairly wide. The Visual Analysis research made at the start of the project was considered when making the pages too. For the 'what are you shopping for today?' page symbolic icons were used, as many clothing stores use them to visually direct users. One aspect that was picked up in the research stage was that that online stores accompany iconic symbolic icons with text to further make the shopping experience clear. For this reason, items were accompanied by their name.
With relation to the layout, type and positioning of elements, all the other pages were made to be as visually consistent as possible to the existing ASOS platform, to ensure that the updated user experience is still familiar with consumers. ASOS' current sizing guides are fairly detailed; therefore, I was able to assort items through using the various sizing guides of a UK 10. For an easier user experience, the ASOS platform would fill in the average bust, waist and hip sizes when clicking on an average size. Users could measure themselves and manually change this themselves for a completely accurate fit. Inches and centimetres can be chosen for different users; however, as my walkthrough video is focusing on the UK, I have used inches, which are more commonly used.
To visually show the site restrictions on ordering two sizes of the same item I created a greyed out 'add to basket' page. Here, users would not be able to add the item to their basket until it has been delivered, and would be able to learn about why ASOS is bringing this change in by clicking the 'Learn More' text.
The final stills made can be seen below. Page transitions were animated in After Effects and a voice over was created to explain the ASOS ONE sizing resolution.
The marketing campaign was also completed in a similar manner - the stills were produced in Photoshop first then animated in After Effects. Based on ASOS' other item recommendations on the top included in the platform walkthrough video, three items were chosen to put into the marketing video. It was made in a 1080p format because it is the highest-quality possible that can be used for display ads and online videos. These will be embedded into emails and be featured on social media timelines.
Physically Creating the Outcomes
When creating the outcomes I wanted to ensure that the target audience was completely considered. To do so, I looked back over my research made and noted some points that needed to be followed:
- People aged 18-24 are twice as likely as their parents to do internet shopping on their smartphones. Therefore, it is more effective to make the designs work on a mobile format.
- 81% of customers say that they will buy from a business again if they were satisfied with the experience. Therefore, both the platform development and marketing campaign must have a personalised feel to them.
- Consumers are 27 times more likely to click through online video ads than standard banners, which are now declining at a rate of nearly 45%. For this reason, the marketing campaign will be entirely video-focused.
- According to Kinetic, who tracked data based on 2 billion social ad impressions, video ads with 30-60 second lengths had the highest 'viewed to completion' rate. For this reason, the marketing campaign video should be within this time frame.
The first element that I needed to produce was the 'ONE' logo. This was kept in line with ASOS' clean, simple and minimal style, using the Futura Pt Light typeface to keep a consistent aesthetic.
The first outcome that I chose to produce is the platform walkthrough video. The easiest way to produce this was to design the mobile platform stills in Photoshop and animate it in Adobe After Effects. By relating back to the visual considerations made earlier in the development stage, stills were made for each section of the storyboard. Informed by the space analysis made of ASOS' existing site, designs were made fairly wide. The Visual Analysis research made at the start of the project was considered when making the pages too. For the 'what are you shopping for today?' page symbolic icons were used, as many clothing stores use them to visually direct users. One aspect that was picked up in the research stage was that that online stores accompany iconic symbolic icons with text to further make the shopping experience clear. For this reason, items were accompanied by their name.
With relation to the layout, type and positioning of elements, all the other pages were made to be as visually consistent as possible to the existing ASOS platform, to ensure that the updated user experience is still familiar with consumers. ASOS' current sizing guides are fairly detailed; therefore, I was able to assort items through using the various sizing guides of a UK 10. For an easier user experience, the ASOS platform would fill in the average bust, waist and hip sizes when clicking on an average size. Users could measure themselves and manually change this themselves for a completely accurate fit. Inches and centimetres can be chosen for different users; however, as my walkthrough video is focusing on the UK, I have used inches, which are more commonly used.
To visually show the site restrictions on ordering two sizes of the same item I created a greyed out 'add to basket' page. Here, users would not be able to add the item to their basket until it has been delivered, and would be able to learn about why ASOS is bringing this change in by clicking the 'Learn More' text.
The final stills made can be seen below. Page transitions were animated in After Effects and a voice over was created to explain the ASOS ONE sizing resolution.
Looking back at the Visual Analysis research made, ASOS manages to grab the consumer's attention by using antithesis in its marketing (contrasting colours). As the target audience is young adults, the marketing video needed to be as engaging and eye-catching as possible. To make sure that this was done, a variety of fast, colourful page transitions were made. Animations made are also fairly fast to try and ensure that the consumer does not lose interest. As images on the ASOS site span the entire width of the page, I used very narrow margins for the suggested clothing images. The typography was all taken from the existing product descriptions.
Whilst music is not a crucial part of the marketing campaign, it is one aspect that should be included to add further interest in the video. A few online campaign videos were found online and analysed in terms of the music they use. Overall, the songs are quite commercial house tracks that sound positive and energetic.
When considering what song to use for my marketing campaign, I tried to pick a commercial house song that a lot of young adults know. A positive, yet quite relaxed anthem is Duke Dumont's 'I Got U' track. To put more of a focus on the written content in the video, an instrumental was used.
The final marketing ad length is 38 seconds, which is within the optimum time for the 'highest completion rate'.
No comments:
Post a Comment