Tronic

SPRING 2019 — CLIENT

PRODUCT DESIGN.

DESIGN SYSTEM. 

ENGINEERING HANDOFF.

ENGINEERING CALLOUT.

BRAND IDENTITY.

ILLUSTRATION.

Tronic reimagines electronic reuse by connecting those with electronic surplus to those in need within their vicinity. 

PROBLEM

A portion of American

recycled electronic waste

is quietly exported to Asia

— New York Times

66% of these recycled gadgets are still viable and reusable.
Extending the life of electronics is underrated in todays’ consumerist culture

— World Economics Forum

OPPORTUNITY

Tronic sees this as an opportunity to bridge
the barrier by connecting people with electronic surplus to people with limited access to technology within the local community.

01  Sign In Account or Profile

02 Select Devices 

03 Input Device Conditions

04 Find the Match

DESIGN DECISIONS

Surfacing Goal Proximity

From testing, I decided to surface Our Mission progress bar to emphasize how users are the hero for contributing to the journey.



The top progress navigation increases as user adds more device for donation. This visually introduced users to the mission at a high level and created a sense of impact and aspiration.

Emotional Reward

Originally, I assume goal proximation as top navigation alone was adequate to encourage donation. Because of this assumption, users expressed how they wouldn’t return because “I don’t see how this helps my receiver and I don’t feel emotionally empowered by my action”

I opted for a card-like format that outlined how the donation will enliven the receiver. 6 out of 8 users mentioned how they feel that it’s more profound when the messages are not percentages, but rather they are stories that they could sympathize and relate to.

Finish Strong,

Trigger Actions

The last touchpoint of the flow proved crucial as one of the product goal is priming users how to prepare device for shipment and refurbishment.

In earlier iteration, I housed each step in horizontal cards, hoping to utilize space. However, that proved inefficient for scannability and comprehension. Multiple users skipped because the text were all at the same eye level. I chose to highlight the steps in a vertical list to attract attention and ease of scannability.

MOBILE

DESIGN SYSTEM

BRAND GUIDELINE

Colour Usage

The conventional green sustainable aesthetic alluded more to common recycling platform. However, the goal for Tronic encourages reuse prior to “recycling” and community sharing.

Thus the identity exudes the feelings of inspiration, ease, and a hint of joy.
 

LIGHTWEIGHT DESIGN SYSTEM

UI Components

Buttons
Textfields
Snackbars
Cards

LIGHTWEIGHT DESIGN SYSTEM

Illustration

Relying on texts alone during early user testing made users felt the experience was mundane even though the UX flow was logical. To add brand voice and delight to this experience, I worked on creating vector elements that could be duplicated at multi scale and rearranged to create different scenes and compositions.
 

 


The objectives of the illustration were to:


-  Visually represent active/disabled states to
    increase scannability and readability
-  Evoke positive emotion and delight
-  Very simple design and styles that could grow with the brand for non-designers to use: reusable elements can be rearranged to create different scenes. I created example modules in the design system.

 

CONSTRAINTS & TRADEOFFS ALONG THE WAY

Balance between being conversational and clear

E-waste calls for action

and motivation

The ultimate challenge to this project was writing. I iterated the instructions several time after hearing users read aloud, pausing and being left unclear on how to proceed. Writing the tasks and description for each flow necessitated a balance between maintaining conversational tone and clarity. My client wanted the instruction to sound human, but not confuse the audience. Defining voice and tone takes some effort, but it’s well worth it because no one is left guessing how we should sound anymore. In addition,the audience is getting more consistent and clearer content!

The themes presented in this project combine my two interest: design and the environment. Tronic tackles the undervalued aspect of environmental issues caused by technology either through consumption or production. Approaching the research through both objective and subjective lenses, I was able to translate these research background into design principles, design systems and interactive donation form. In creating this, I hope to inspire and encourage electronics reuse when possible. Through this project, I also got to flex my illustration skills to complement the form filling experience, add delight and potentially provide visuals that could grow with the brand.

FEEDBACK

“The happy path was straightforward. I love the visual details like the loading state and the use of the primary color to indicate completion. What happens if I leave the flow before I’m done to go home or profile?”

Very professional designs and prototype. Great illustrations.
Excellent work. Very successful in the "making donating less formal". The other two business goals are difficult to assess at this point but could be assumed that this would improve those numbers. Well done.

PROTOTYPE WALKTHROUGH

SENSING SOME CREATIVE CHEMISTRY?  HIT ME UP