SYNCO_PERF_DESK_2.gif

Synco

 

Roles

UX strategy
Wireframing
Prototyping

 

Team

Danilo Saito
Heitor Gois
Anderson Koyama
+ Questtonó team

 

Client

Synco

 

Year

2018

Synco 

An IoT platform to make logistics more efficient

 

The challenge

Synco, a Questtonó venture-design-backed startup, is building a platform that connects IoT devices for businesses. With an IoT device that tracks location, temperature, pressure and other data, their platform offers a high-efficiency logistics management for companies.

Our task was to help them identify the user needs and stakeholder's touch points in order to build a cohesive and an easy-to-use user experience for their platform.

 

The outcome

A systemic design experience where we refined the brand vision, strategy, and visual identity, as well as a refined user journey with the motivations, expectations and pain points of the companies' stakeholders and users.

With this journey map, we built the user flow, wireframes, medium-fidelity prototypes and some look-and-feel user interface of the platform.

 
 
 

1

Mapping the journey

At the time I joined the project, an user research and the brand strategy were already established. My first role was to help visualize a user journey across different channels and stakeholders and come up with a strategy with a human-centered approach that would guide us into different solutions for the platform user experience. 

Therefore we designed a framework that we organized all the moments into a journey, and in each moment we pointed the motivations and expectations of the user - that we can call user goals -, as well as the pain points. With the user goals and paint points, we were able to map the user needs.

 
 
Journey-01_2.jpg
 
 

2

User flow

After mapping the journey and the user needs, we started brainstorming ideas for each specific moment of the journey. When we collected a good amount of them, we started to visualize how we would put everything together into a single and cohesive experience. 

 
 
1_processo2.jpg
IMG_2412.JPG
 
 

3

Ideation

With the user flow sketched, we started wireframing the solutions to visualize ways we could materialize those ideas into tangible user-friendly experiences. 

First, we started using the big whiteboard in our war room to quickly sketch the screens and interactions. In this way, we could test different layouts and graphics and rapidly see which would work best for what we were trying to build.

After this session, we started looking for references that would inspire us and sketch a little more refined ideas with pen and paper. Again, still in a fast-moving pace so we could generate as many variations as possible.

 
 
IMG_2915_2.jpg
IMG_8202.JPG
 
 

4

Refining

After selecting the best ideas, we started to put into wireframes the solutions and visualize how the whole flow and small interactions would look like.

With Adobe XD, we could sketch the wireframes and at the same time test interactions into a simple prototype. This allowed us to have a better sense of what was working and what wasn't and iterate quickly with our clients to get their inputs.

After visualizing the whole flow, we decided to work with Principle to have a better sense of what the interactions would look like and have a more high-fidelity look-and-feel experience, even still working with wireframes. 

 
 
wireframes_all.jpg
 
Wireframe_callouts-01.jpg
 
SYN_UX_V02_WIREFRAME_INTERACTIONS3.gif
SYN_UX_V02_WIREFRAME_INTERACTIONS_5.gif
SYN_UX_V02_WIREFRAME_INTERACTIONS_5_1.gif
 
5_wireframe.png
 
 

5

Final results

After validating the user experience, we started to design the final screens and interactions of the platform. The one-color wireframe started to gain shape with the visual identity and we could make the final refinements on the experience when playing with the brand visual elements.

This phase was done mainly by the visual design team that worked really hard to make these visuals and interactions prototypes.

 
 
2_marca1.gif
SYN_BRANDBOOK01.gif
6_login.gif
7_desktop.gif
8_marcadores.gif
9_app.png
SYN_PERF_MOBILE_MOCKUP_ABRE.jpg
 
 

6

Next steps

Our goal on this project was to help the Synco team create a forward-looking vision of their solution through the human-centered design lens, and then extend that vision across all the user touch points with the brand, from the brand strategy and visual identity to the service and user interface.

On the user interface perspective, we designed just the main screens and interactions and we gave them all the important elements and directions to connect the user experience with the visual identity. Now they have their internal team finishing the rest of the platform experience and coding - still with our following up - to put together the solution into a final high-fidelity working prototype to run a pilot with their potential big clients.