Innovate

Real-Time

Transportation

of Tomorrow

Known for mobile gaming, Machine Zone wanted to expand it’s capabilities beyond games and use their live-data streaming technology to run smart cities calling it Satori.

Our goal was to create a single platform to power smart city initiatives for citizens, governments, and businesses.

My Role

UI/Visual Design
App Design
Icon Design
Brand

Credits

IX/UX by Winnie Tseng
Satori logo by Brand Team

Images

Fahrul Azmi
Guilherme Stecanella
Luke Stackpoole
Yeshi Kangrang
Vusal Ibadzade

Our First City

We partnered with the city of Auckland, New Zealand and worked closely with the Auckland Transportation team to create an application called Command Center using Auckland’s transportation data of their 3,000 buses including ticket sales, routes, and schedules monitored in real-time.

Command Center

This is what the 1st generation Command Center looked like before I joined the team providing real-time monitoring of Auckland’s buses and trains.

Starting Point

Definitely this needed an update and there were several things that stood out but one of the first things we wanted to tackle was to address the dense overlapping of bus markers. So we started to look at clustering.

Clustering

Provided a zoomed out view of the numerous buses in route for the city operator to view at first glance.

Customized Maps

By using Google’s Map Wizard, the team was able to customize and brand our maps. We asked ourselves:
‍
How does the data apply on a dark vs light colored map?
‍
How much detail does the map need depending on the zoom level?
‍
Do we want to eliminate the color of parks and landmarks for clarity?

New Markers

When zooming in, we wanted to indicate direction on the markers and decided to further simplify it by just using arrows.

Passenger App

As developers were building out features for Command Center, we waned to create a passenger app named RYDER that would allow people access to all of New Zealand’s transportation types and the ability to plan a journey.

Creating 3D Marker Assets

For a consumer app, we made our markers more 3D so people can easily identify the different types of transportation provided. This shows some of the iterations made by introducing minimal detail so when reduced in scale the assets would retain it’s form.

Line Icon

Created for smaller scale to accommodate journey planning

3D Icons

Front facing icons had opportunity to go larger so we added more detail

Brand Evolution

As we worked on Command Center and the RYDER app, our initiatives began to evolve and take shape. I wanted to see how might that extend so I started exploring and did a mood board.

Explorations

From the mood board, I looked at how all transportation is connected perhaps by continuous lines representing live streaming. Angles are softer now and take on a circular shape.