INTELLilight™ – App design

INTELLilight™ – App design

I designed the INTELLilight™ app with a self-explanatory and efficient user experience that shines a new light on the heavy machinery industry.

Client

INTELLilight™ by TYRI is the first and only wireless Bluetooth lighting system for heavy machinery on the market that allows for personalised lighting through adjusting color temperature and brightness from a smartphone or remote, enhancing safety in high-risk industries.


Role
Digital Product Designer & Design Lead @The Techno Creatives
  • Service Blueprint, User research, Prototyping & Testing, UI design, Hardware print design
  • Built and maintained a design system
  • Illustrations and brand design
Team

Martin Persson (Strategist)
Jiaojiao Xu (Digital Product Designer)
Thanh Le (Developer)
David Göransson (Developer)
Dylan Hand (Developer)
Steffen Ernst (Developer)
Ville Petersson (Developer)
Martin Carltoft (Developer)
Jonas Hultén (DevOps)

Timeframe

1 year // 2021 – 2022

Design for

Android, iOS


The improvement

On and off just doesn’t cut it anymore

Imagine you are operating a 30 ton monster of steel in pitch black darkness in rough terrain. The only options for are light on or off. On – they are blinding you and everyone around you. When they are off… Well you can’t see anything. This is the hard reality for operators currently driving heavy machinery in high risk industries. TYRI wanted to make a change to that and came up with the bright idea of the INTELLilight™ system, a completely new way of lighting.

Here is a video (that I wrote and edited) that explains and shows the functionality of the finished app:


Constraints

Bluetooth & cloud – what could go wrong… right?

You would think that Bluetooth would work flawlessly at this point, but really – it is hard to develop for it, because of its unpredictability. We knew from the start we would need to design and develop for a lot of different errors and edge cases while making it seem easy to the user. I definitely had to up my game on UX writing to stay consistent with language and tone.


Process

Understand

For the whole product to be a good experience many components need to work together. I mapped out a high level Service Blueprint based on user interviews, TYRI’s market research and feedback from the R&D director. This gave the team a clear idea of users expectations and actions while interacting with soft- and hardware.

Key takeaways

  • The importance of hardware feedback to the user like confirmation actions, for example lights flashing and responsivity to changes to the mesh. The user can quickly feel that there is a disconnect or something is not working as it should be.
  • The amount of Backstage components (Cloud, Bluetooth, Firmware) that need to work in order for a good experience. Both Cloud and Bluetooth are not always reliable, so how can we ensure the user still has a positive experience even though they will run into errors that are not their fault? 
  • The need for different user profiles, to avoid cluttering the UI and enhance the efficiency of operators

To understand the immediate context and needs of the users and their working habits, we observed operators without interrupting them, asking follow up questions. We also had TYRI telling us more about the current light industry and what the business needs are or why they are seeing potential in this solution.

Key takeaways

  • Operators want to do their work efficiently and effectively. Adding a phone with a touch screen in the mix seems counterintuitive. But the flexibility and efficiency that gets introduced with an app can’t be beat. How can we ensure to enable users instead of holding them back? 
  • The array of different work conditions and use cases, and that currently there are only on and off solutions on this market
  • Current hardware installations are connected to inside the drivers cabin with no way of controlling it remotely
  • Users lack flexibility for better fleet management and changes to groupings
IL_Users_Slider1
IL_Users_Slider2
IL_Users_Slider3
IL_Users_Slider4
previous arrow
next arrow

After doing our research we had a better understanding of who we are designing for. So we mapped personas with their wants, motivations and stories – have a look through them! The MVP for this app focuses mainly on users 1. Bob the builder, 2. Hector Head of Construction and 3. Dave the driver.

Design

After understanding more about the context and the user  we created a big wireframe flow with sections of the different features. We focused on efficient and quick change of brightness and temperature making the meshes control the home screen with a navigation drawer to switch meshes. 

The yellow sticky notes are questions, unknowns or ideas. The grey ones are consequences to decisions made in this flow. We printed this wireframe flow (and it’s first version) out to have it on our walls so we could constantly and easily refer to it.

I always paper sketch! Sometimes creating digitally slows me down and I get too focused on alignment. I made lots of sketches, but here is an example of the adding lights flow, taking the user through the steps of identifying and provisioning a light. I then quickly created and tested flows with a Figma Android Component library, since we were developing Android first for Resource reasons.

I planned an internal usability test at The Techno Creatives. We were short on time for the MVP but I wanted to make sure that the interaction patterns made sense to people, even if we were not testing with the real users. Our objectives was to uncover problems, test understanding of words and content, expectations and to see the app used in context with lights. The method was quantitative testing with 5 people for the owner flow, 5 people for the user flow and their background was a range of education, age and iOS/Android users. We even created a box with information that the lights and remote came in, to see if a user can completely without guidance set up and control lights. 

Key takeaways

  • The word “mesh” was confusing and never got explained 
  • 8/10 users did not have any relation to brightness levels 1-5, but would have preferred 0-100%
  • 7/10 users thought “Remote” was referring to distance 
  • 10/10 users could turn lights on/off and change temperature and brightness
  • Differentiation between groups and lights was not clear enough
  • iOS and Android users different set of icon usage (f.e.: share)

Testing almost to scale

We tested early and often. Of course in every project as a designer you would like to have many, many user tests. Buf often the budget (especially for an MVP) just does not give room for all that we want. Due to it’s many components and complicated tech, we designed and developed with the real lights and even a real Caterpillar dumptruck toy – basically the real deal. These moments don’t just give us insights on interactions but also adds the fun and excitement to this job. Personally I am a big advocate for getting out of my screen and applying real life to designs.

To create a scalable, cohesive and successful product, as well as to efficiently make design decisions I decided early on a creative direction of the UI. This involved  researching TYRIs branding, lifting up the elements already presented and enhancing them in the digital product. This includes visual elements like buttons, but also more abstract parts, like the Tone of voice. The brand personality is: Hard-working, Responsible, Intelligent, Quality focused.

Out of this creative direction I started to build and maintain a design system for the high-fidelity designs based on Android’s compose framework.The iOS app is mostly also based on Android designs, but has some special designs to accommodate different user groups between Android and iOS. 

Since the app is quite simple and minimalistic, I wanted to bring out the smart tech of the lights with clean but high-quality looking illustrations for the devices. 

To guide the user consistently we had a Confluence document with the UX writing for different cases so developers could easily copy and paste, as well as communicate to me what errors there are. It was quite a challenge how to communicate very technical errors to the users, how much to tell them or not and how they can recover.

Based on the digital brand guidelines I made I also made a UX writing guide, with tone of voice, writing standards, vocabulary and patterns. The tone of voice in this app is: 

  • Supportive and instructional
  • Solution-driven and straightforward
  • Guiding, clear and responsive

Outcome

Impact

I am so proud of this app and leading the design. And it was so much fun designing and understanding the complex tech side of it. The amount of thought and effort that the team put into this app is astounding and it really shows in the end product, as well as now when we are expanding it. In October 2022 this app will be taken out for real field testing, and I am looking forward to seeing the feedback for it. 

– Published on Appstore and Playstore

– Extended project with client 

– UX Design Awards 2022 nominated

I learned to

  • Navigate complex tech together with developers to design one holistic experience 
  • Quickly create many different ideas and designs and then articulate the good, the bad, the ugly
  • Design an aesthetic visual experience and building a design system with little wiggle room, because it is a utility app
  • Improve my UX writing and being more aware of the words I use

Next →

Gleerups – Course plan redesign