SONAR

Foreseeable Future

2020+20

CLIENTS

Sónar +D

iII IED

CATEGORY

Website

MY ROLE

Web developer

SUMMARY

Exploring the perception of the world when the 4th revolution will be complete. The site will take you to imagine and wonder of what might happen and change in the further future.

OPPORTUNITY STATEMENT

Sónar +D and IED as a clients proposed us to create an interactive platform where users can experience the diversity of IED's community through a representation of Sónar values: music, creativity and technology.

PROJECT GOALS

Represent the values Sónar +D stand for

Create a platform that reflects IED community: Tech, Art&Design, Cinema and Fashion

Give a platform with an unique vision concept interactively

APPROACH

As quarantine started, we decide to split in three teams to face this project: Research, Design and Code development team. Each team had a team leader so we can coordinate ourselves better and do follow-ups more easy.

Once all the team agreed in a concept, we started focusing in our team goals.

RESEARCH

PROCESS

After studying our two clients values, research team created this idea of "the vision of the future" or foreseeable future.

This concept will allow us to make users imagine of the future and growth for different fields.

Research team started collecting all resources as possible, studying the data, evaluating how it can support our concept and providing findings.

IED database 2015 - 2020

Thanks to technology revolution, all fields are changing the way we live, work and interact

PROTOTYPE

FIRST SKETCH

Once we had the concept and all the information provided by the research team, design team start creating wireframes of how to represent all that data and the flow of interaction.

The team present different design proposals to all of us so we can agree in the style, interactions and limitations if any. Finding a perfect interaction will smooth the journey of the user through our platform.

COLLABORATIVE PROCESS

With the design decided and the final mockups, the developers coded up the website. We decided to create a one-page website that contained the whole user experience in one navigation.

We built the HTML/CSS components in isolation first, then integrated them with a structure framework to speed up the process. For the interactions we used JavaScript and P5js.

After we finished the development and run some tests with positive results, we were ready to launch our website.

DESIGN

DESIGN IS IN DETAILS

We wanted to keep the design as a futuristic look and feel while also making sure that it felt clean and minimal to reduce distractions and improve usability.

We used “Rajdhani" paired with “Fira Sans” throughout the website to keep it consistent and we used different font weights and colours to establish visual hierarchy. With black as a primarily colour, we decide to complement it with a bright colorful palette and to create a visual relation for each category.

ICONS AND BUTTONS

The icons and buttons for the app (above and right) combined single weight lines, smooth angles and a modernistic aesthetic. The basic idea was to give the categories a unique character combined with colors.

In the landing page, a prominent call to action encourages users to start their journey.

GOING LIVE

|

THE END OF TIMES AND START OF A NEW BEGINNING

Asking ourself when this foreseeable future will arrive, we blended our concept with the 4th Industrial Revolution, as it will change the fields of Sónar and IED , and with the Lunar Trifecta phenomenon that happens every 20 years that gives us an foreseeable future: 2020+20.

PREDICTING THE FUTURE

The user journey starts when the user clicks to "Show me the future", then he has to decide for which field wants to discover the future.

After choosing a field, a random question related with the future will appear and if the user wants to discover the answer (prediction), he has to catch the bouncing ball and drop it in the drop area.

|

DATA VISUALIZATION

With IED data we could create a data visualization prediction of the students profile for each headquarter of IED.

|

LEARNINGS

Even though this project ended up as a project proposal for Sónar +D, it was great fun to work on and we learnt a lot in the process.

NEXT PROJECT

ATICCO

Please reach out for work inquires, collaborations and questions to hello@katherinebarberan.com