Noma

OBJECTIVE

While all my projects are heavily user-centered and focused on designing with the community – this one is all about untethered, speculative design. Most of my explorations in this project are centered on the idea of going beyond what we typically see. To use speculative design and motion to introduce new ways of thinking and deconstruct data visually.

PROJECT DETAILS

Prototyping, Visual Design, Speculative Design & UX

By: Taha Hossain

Using: Framer,, Illustrator, Photoshop, After Effects

Ideation

Exploring various organic and geometric forms to visualize variables

Designing with Intention

The design choices in this project were guided with these overarching design principles.

Visually
Stimulating

Observable Patterns

Immersive
Interactions

EARLY CONCEPTS

Exploring different data visualization models that can present multiple variables at once

Design Tools

Tools used to define the overall experience of the data visualization and the interface.

Speculative Design

"Speculation introduces a dialogue of discussion and debate, one that requires the viewers to suspend their disbelief and allow their imaginations to wonder."

- Speculative Everything by Anthony Dunne and Fiona Raby

Progressive Disclosure

A human computer interaction technique that helps the user maintain focus by reducing cognitive workload. This was applied by designing a hierarchy that presents the most important information first while also allowing the user to go into further detail.

MOTION AS MEANING

Utilizing time as a variable and using motion to represent the data

The Data Visualizations

Each of the data visualizations were intentionally designed to serve a purpose

01 / 04

Dashboard

Visualization

The dashboard visualization shows a high level overview of both water and electricity usage through the day. The density in the visualization would vary depending on usage at that particular time.

Each dot represents a single case of water or electricity usage

A blue dot represents water usage

A white dot represents electricity usage

02 / 04

Electricity

Usage

The data model for electricity usage focuses on comparing all connected rooms in one visualization. The further the branches are within the rings the higher the energy consumption.

Each branch represents a room

Sub-branch represents a smart connection

03 / 04

Water

Usage

Visually representing the water usage of a whole month in one data model. Each water line represents a day of the month.

Thickness represents amount of water

Represents cold water

Represents hot water

04 / 04

Daily

Water Usage

Displaying water usage of a particular day through a visual representation within a 24 hour data model.

Width represents amount of water

Represents data from previous day

Represents hot/cold water

In Context

The following shows how the data models would be used in context accompanied by the various interactions.

DASHBOARD

Immersive

Interactions

The dashboard allows the user to view the usage at a particular time or visually compare it with other days.

Quickly compare data with other days

Finer control on time as a variable

ELECTRICITY USAGE

High level

comparison

The electricity data model allows the user to view every smart connection in comparison to the room but also the entire home.

Visually compare every smart connection

WATER USAGE

Data on

demand

The water usage section presents an overview of the month's usage before allowing the user to see their day's use in finer detail.

Visually see the month's usage pattern

WHAT I LEARNED

Embracing my Inner world.

The art of speculation requires you to untether yourself from usual constraints and the ordinary. It required a lot of internal effort to break free from my personal boundaries of thinking.

Feedback creates opportunity.

A lot of the insights gained through the course of this project came from my peers that encouraged me to use other areas of design as inspiration and the overlap that it may have with data visualization.

I'd love to chat about anything.