OSENSA Innovations
EdgePi Portal
Conceptualizing a proprietary digital portal that enables the full capabilities of an industrial PC to be read and configured remotely.
Introduction
01.
EdgePi is a cloud based Raspberry Pi-powered industrial PC designed for factory automation and hobbyists, developed by fibre optic temperature sensing company, OSENSA Innovations.
In the Spring of 2021, I had the opportunity to join OSENSA as an product design co-op student, working exclusively on an online portal for EdgePi which would allow real-time monitoring and remote configurement capabilities to the cloud-based industrial PC, allowing customers to monitor their connected sensors to EdgePi remotely.
Role
Product Design Co-op
Team
OSENSA Innovations
Contribution
0 → 1 Product design, Graphic + Branding
Duration
2 years.
Contributions
02.
During this 2 year process, I led the end-to-end development process of EdgePi Portal's multiple touch-points from initial concept through to final delivery in preparation for its product launch.
Utilizing an assortment of interaction design methods and co-design sessions with the engineers, I became greatly familiarized with every aspect of the product. As the sole designer, on top of the interface design for EdgePi Portal, I also owned EdgePi's multiple branding touch-points, including its marketing website, packaging, device label, product photography etc.
Composition
1 x Product designer
2 x Full-Stack Engineer
1 x Chief Technology Officer
Shipped
2022
6
Unique touchpoints
Spanning multiple creative outlets but primarily the interface design for EdgePi digital portal.
86
Monthly active users
As of Jan 2023, consisting of approximately ~80% industrial users and ~20% hobbyists.
72%
Conversion rate
As of Jan 2023, from a free to a paid plan, unlocking additional remote configurement features.
4.3/5
Average feedback rating
From a survey sent via e-mail to all pilot participants during the MVP testing.
Context
03.
EdgePi is just as well suited for factory automation by professionals as it is for recreational and educational use by students and hobbyists.
The design challenge was balancing these two use cases to design a portal that was technical but also intuitive and easy to learn.
How Might We ...
Create a digital portal…
for
industrial & hobbyist users
to
view their remote data read from EdgePi, captures the full functionality of an Industrial PC/PLC/IoT device, while simplifying its inherent complexity in order to support both factory automation and recreational use cases.
Solution.
04.
An intuitive layout & visual design
Content is organized into digestible chunks with each module being displayed as cards, allowing for better legibility and reduced cognitive load for users.
Begin reading and configuring in minutes
Simple onboarding flow allowing users to simply scan the unique QR Code located on the back of the EdgePi enclosure to attach their device to a prepaid data plan.
Tailoring the user experience for the more advanced user
EdgePi Portal has a compact mode which allows for more shortcuts, and personalized customizations, helping streamline workflow for the more advanced user.
Managing complexity using progressive disclosure
Complex configurations are placed within each ports settings and displayed as modals. They are presented in time and only when needed.
Natural mapping to achieve internal consistency
The ports are presented numerically within the portal, and in chronological order, following the exact layout of the ports shown on the device enclosure.
Below is the full process for this project...
Keep scrolling if you're still interested or jump to the end to hear my closing thoughts.
Process / Discovery.
05-01.
The first phase of my user research involved conducting stakeholder interviews to learn more about EdgePi and gather the team’s expectations, requirements, and constraints for the interface.
OSENSA Innovations
Chief Technological Officer
Gathered insight into the context and requirements of the portal's design.
“The EdgePi Portal is what sets our Raspberry Pi–powered industrial PC apart from our competitors. We're looking for clean UI's and intuitive UX."
OSENSA Innovations
Front-end Developer
Gathered insight into the front-end libraries used in the front-end implementation.
“EdgePi Portal will be coded using ReactJS and Chakra UI. Using components from the component libraries will speed up my workflow."
OSENSA Innovations
Back-end Developer
Gathered insight into the back-end logic that will allow for remote control of EdgePi.
“We will be using AWS IoT Device Shadow Service to control the device. The portal should present input controls for users to configure each port."
Secondary phase of my research involved a site visit with a mechatronics engineer to walkthrough the current development process of EdgePi and see first-hand the device ports that I had to account for in the portal.
Understanding EdgePi is still in development.
Visited the in-house cleanroom where the first batch of EdgePi's are being built and QA tested.
Understanding the hardware and all the ports.
Visited a workspace with a disassembled EdgePi to learn about the ports that had to be configured.
Understanding changes might be coming.
Visited the mechatronic lab where components was being tested and adjustments were still being made.
The final phase of my research involved a competitive analysis where I examined competitor interfaces to identify their strengths and weaknesses in order to uncover opportunities where I can differentiate EdgePi.
Process / Define.
05-02.
After consolidating my data gathered from the design ethnography stage, I chose to go into the define phase of the design process collaboratively.
I familiarized the team with the methods of interaction design and created a physical affinity map to encourage the team to help organize, connect and explore the data gathered from my research. Themes began appearing.
01.
Device Interaction & Control
Details regarding port configuration e.g. input type, input format, statuses, edge cases etc.
03.
Portal site map
Outline of all required pages and how users will navigate between them.
02.
Industrial vs. recreational
How should we present features to cater to different use cases and personas.
04.
Technical constraints
Question marks and things to be determined after the hardware has been finalized.
Process / Ideate.
05-02.
Since the hardware and the capabilities of the backend was yet to be finalized, I began ideating in low fidelity to make sure I can go wide in my exploration and iterate quickly based on incoming changes.
Over the weeks, requirements would change and new functionalities or restrictions would be added at a moments notice, forcing me to modify existing ideas and continue brainstorming and iterating based on feedback.
Add a Device
Dashboard
Portal Homepage
Dashboard Cont.
Order History
Device Overview
Subscription Plan
Process / MVP Testing.
05-03.
With the designs finalized, an MVP of the EdgePi Portal was developed, and the first batch of EdgePi devices was sent out to members of the mechatronics community for user testing and feedback.
To gather meaningful insights that could inform iterations prior to EdgePi's release, participants were asked to complete a list of core tasks and share their feedback through a post-test survey.
MVP package sent to members of the mechatronics community.
A participant even built an entire bunny feeder using the MVP.
Process / Iterations.
05-04.
Below are two of the most requested functionalities for the EdgePi Portal identified during MVP testing.
Multi-port functionalities.
Before
After
Feedback
Differential (DIFF) and Resistance Temperature Detector (RTD) sensors require multiple ports, resulting in repeated readings that confused participants.
Solution
Connecting lines added as visual indicators to group related ports, providing a more intuitive and realistic representation of how RTD and DIFF actually works.
Flexibility & efficiency of use.
Feedback
Industrial users with multiple sensors and devices attached to EdgePi say finding a specific reading is difficult.
Solution
New pin feature that let users pin and enlarge a specific reading making it easier to monitor key data on big industrial displays.
Conclusion
08.
While I made my share of mistakes, the experience was an incredibly valuable learning opportunity.
From jumping straight into high fidelity designs and then realizing we had to pivot, to not using components and auto-layout and having to manually edit each frame, all these mistakes made my first-ever digital product shipped an especially memorable one.
Real world requirements change and learning to adapt is incredibly important.
Requirements change, new variables gets introduced, and problems often arise requiring me to think of workarounds or rethink my solution completely. This experience highlighted the importance of a structured iterative design process, and creating solutions that are scalable.
First time working with cross-functional stakeholders.
Unlike school projects with only designers, this was my first time working exclusively with cross-functional stakeholders, which highlighted the importance of clearly and persuasively communicating my design rationale.