Product design
A concept was pitched to the Fanta team to build a web-based experience allowing users to take a selection of Instagram photos from their profile to create a musical slide show. The slide show included a song which had lyrics generated from the subject matter of the photos selected. This tool used image recognition to identify the theme of the photo to place the words accordingly within a string of lyrics.
Activities:
Screen flow // Moodboard // Screen design // Video output // Email design
Year:
2017
SCREEN FLOW
This screen flow identified the pages that made up the digital experience as a whole.
Mapping out what the user would see at every stage provided an overview of the decisions regarding the approach to the interaction design.
The screen flow was shared with the development team who pointed out certain elements could and could not be included in the final build based on the technological requirements. Workarounds were fleshed out and a final approach was defined. After this stage, mock ups were able to get started.
MOODBOARD
A moodboard was put together to communicate the approach to UI design. It was made up of Fanta owned visual executions that were live at the time. This would set the look and feel for the experience.
SCREEN DESIGN
The creative/collaborative nature of the wider campaign that Fanta was running was incorporated in the production of the designs. Design elements from the moodboard were applied to backgrounds, CTAs, form fields, screen transitions and the way the users’ Instagram images are pulled from their profile displayed within the experience.
VIDEO OUTPUT
This video demonstrates what a user could create using this digital tool. The music video includes the photos that the user manually picked from their Instagram profile page. Then the image recognition technology reviewed the subject matter of the image and inserts an auto-generated word for it in the appropriate position within the pre-defined lyrics.
EMAIL DESIGN
Emails suitable for mobile and desktop were mocked up following the designs of the experience. They were created with a one column layout in order to facilitate HTML build for all email clients. These emails allowed users to download the video when they completed creating it within the experience.
