Scan QR codes of actuators
The freshly received actuators have QR codes that can be scanned for storage.
| My Role | Time | Category | Team | Tools & Methods |
|---|---|---|---|---|
| Product Designer & Front-end Engineer | 6 months | Mobile App | Abu Bakr Khan, Hunter R. Hobgood, Dinesh Trikha, Aasir Rasheed, Saivaishnavi S | Figma, Android Studio, Balsamiq, Agile Methodology, Context Inquiry, Contextual Design |
What is an actuator?
● An actuator is a part of a device or machine that enables
movement.
● Traditionally, the Johnson Controls actuators were configured manually.
● An
engineer had to
install the actuator in a building and then configure it each time by climbing up
the ladder.
● This
process had to be repeated for thousands of actuators in a building.
Background
● I researched an existing method of
configuring actuator devices in HVAC (Heating, ventilation, and air conditioning).
● We came up with an innovative solution to overcome the complexity of the existing manual
process of configuring these devices.
● We also researched extensively to understand the
stakeholder needs and redefine design aims.
● SMA app
establishes connections with multiple Wi-Fi-capable smart actuators and configures
them in a single
shot.
● This
process had to be repeated for thousands of actuators in a building.
● The image on the left is a CC3220 circuit board that has been embedded inside the actuator
device
Project Vision
The project aims to to overcome the complexity in the existing manual process of configuring actuator devices.
Features
Storage of scanned devices
Once they are scanned, they will be stored in the cloud database.
Configure multiple devices
The initial settings information will be sent to multiple WiFi-enabled actuators at the same time.
Wifi scan of nearby devices
Scans the available actuators in the vicinity.
View configuration
Consumers can view the config information of the actuators
Edit configuration
Consumers can edit the config information of the actuators and configure all the actuators
Design Process
I chose to follow the design thinking methodology for this project. It helped me untangle ambiguity, validate ideas, and structure complex problems. The process includes gathering insights about the users, prototyping ideas, and validating them.
Empathize
● The purpose of this research was to understand the needs of engineers who configure these
actuators,
so I conducted interviews with some selected people with various designations (for example, building
managers, testers, product managers, and engineers) who come into contact with actuators at
different times of the configuration process.
● According to the results of this study, there is a need to change the method of configuration of
actuators as it is cumbersome, and there is a risk of errors when the manual way is used.
Empathy maps
● To better understand the research results, I extracted the data from the user
interviews
and drew empathy maps to visualize the results.
● Experience models enabled me to portray user research in ways that tell a story about those users' lives, how they utilized actuators, and what complexities they were facing.
● Research would be inefficient to absorb and ineffective to use if not presented in these models.
● An Empathy Map is a tool that helped me empathize and synthesize my observations from the research phase and draw out unexpected insights about the user's needs.
● An Empathy Map allowed me to sum up my learning from engagements with people.
● Experience models enabled me to portray user research in ways that tell a story about those users' lives, how they utilized actuators, and what complexities they were facing.
● Research would be inefficient to absorb and ineffective to use if not presented in these models.
● An Empathy Map is a tool that helped me empathize and synthesize my observations from the research phase and draw out unexpected insights about the user's needs.
● An Empathy Map allowed me to sum up my learning from engagements with people.
Using the empathy maps drawn after research, I created the user persona of a targeted user.
Fleshed out user persona
"The initial configuration isn't the only tedious part. Sometimes, the actuators need to be reset to their original settings."
- Anonymous site engineer
Define
● The first step was to gather user research which I completed using empathy maps, and I created a
handy
user
persona.
● Mark is an engineer at Johnson Controls. He configures actuators once they are
installed in the buildings.
● He configures hundreds of actuators per day.
● He also takes care of
reconfiguration of actuators in case they run into issues.
● It involved accumulating the data from the
observation stage to define the design problems and challenges.
● The define stage is where I clearly understand exactly which problem I am trying to solve
for the user.
User Story
● I learned that each user story includes a hero, a goal, and a conflict.
● Using that formula and
the research
I collected from the user persona, Mark, and framed their user story.
● I created a user story that does not spell out the same feature but rather what the user
aims to achieve, which allowed me to identify the best possible way to implement the
feature.
● By identifying the user's pain points, I created a design tailored to
users' needs.
● The result is a great user experience.
● I learned that each user story includes a hero, a goal, and a conflict.
Problem Statement
● An actuator is a part of a device or machine that enables movement.
● Traditionally, the
Johnson Controls actuators were configured manually.
● An engineer had to install the actuator
in a building and then configure it each time by climbing up the ladder.
● This process had to
be repeated for thousands of actuators in a building.
● So, the current process of the manual
configuration takes more time and is prone to errors.
● It is essential to come up with a solution that helps configure actuators quickly,
easily, and error-freely. The goal is to develop a solution that can solve this pain
point.
There is a need to automate the configuration process of actuators!!
Ideate
● I took the user’s pain points learned from the user research studies.
● Then, I used this list from the
Stanford d.school to begin generating ideas by asking how we might: Amp up the good. Change a status
quo? Break the point-of-view into pieces.
● I generated ideas using the How Might We framework to help me generate many ideas that I can
choose
from to
help solve users’ problems.
● The goal of this activity is to come up with many possible design ideas.
● Some will be usable, and some won’t, but going through this process gave a better idea of what
might work.
Generating ideas using Crazy eights technique
● The Crazy 8 Method was the first one I used to allow for more flexibility and iterations in
our designs in the initial stages.
● I sketched out several possible solutions, then analyzed the ideas to determine which
would
be the best.
Sitemap
● I separated specific tasks into categories while creating user stories for the important
ones
to focus on.
● As a result, I narrowed my focus by addressing each problem I found from my
research, such as how to configure an actuator using the inbuilt wifi capability, how to
repeat the same process for multiple devices, how to reduce the time taken to repeat the
process, etc.
● Sitemaps help outline the pages of the app that need to design and can help in spotting
necessary
pages that
you’ve forgotten to include, need to remove, or need to combine.
● A hierarchical sitemap
outlines the
relationship between pages in order of importance.
Prototype
P&P Sketches
Sketching things out first and circulating them helps show the product's process and iterative development. It feels like I am taking myself, my team, and my clients on a journey from day one. The following sketches help solve problems, like figuring out the user flows, communicating ideas with the engineering team, developing quick concepts, eliminating any ideas that won't work quickly and easily, and developing the user journey and information architecture.
Wireframes
I used digital tools like Balsamiq to convert paper wireframes and prototypes into collaborative digital tools. This helped me clarify my progress to the rest of the team, which consisted of engineers and product managers. One advantage of digital wireframes is that they are clear: they can be shared instantaneously and converted into digital prototypes easier.
User Flows
The following diagrams display a user's complete path when using a product. The user flow lays out the user's movement through the product, mapping out every step the user takes—from the the entry point from scanning the QR codes and right through to the final interaction of configuration.
Color Style
- Blue has been chosen as a color that law enforcement officers worldwide will use. Do you know why? The the idea behind blue uniforms is that blue should represent an authoritative but calm and confident figure, just like its color.
- Blue is the color of trust. It suggests loyalty and integrity, which is why it is a great choice for businesses that want to project dependability, security, and peacefulness.
- With red kicking in as the secondary color, it should evoke a feeling of confidence and security.
Font Style
- Roboto is a sans serif typeface created for use in user interfaces and web design for legibility and effortless reading.
- As Roboto offers a wide range of weights to suit a wide range of sizes, it provides a clear header and an easy-to-read body text.
- The physical appeal of Roboto - is modern, approachable, and friendly, but not casual; geometric lines with rounded curves. It has the flexibility of its use.
Final Designs
