top of page

EdgePi Portal @OSENSA

Innovations  May 2022 - Dec 2023

IMG_0923 2.HEIC

INTRO

In the Spring of 2022, I had the opportunity to join OSENSA Innovations as a UI UX Designer co-op student, working exclusively on EdgePi, a revolutionary cloud based industrial PC that can be controlled anytime, anywhere. 

As the sole designer on the team, my primary responsibility was to design for EdgePi’s proprietary online portal. Utilizing a multitude of interaction design methods and co-design sessions with my co-workers, I began instilling a design culture within OSENSA to inform my creation process.

I saw the portal from conceptualization, to MVP in which it was tested with real users, to the many iterations based on user-feedback, and ultimately the official release of Version 1.0.1. I also created the very first EdgePi design system to ensure scalability of the platform and to better inform future design work.

What originally was a 4 month co-op term was extended to 8 months in which I ultimately decided to stay on as a part-time for another year working on a variety of other user touch points such as its marketing website, packaging, and label. 

TYPE

B2B + B2C 

ROLE

UI UX Designer

PLATFORM

EdgePi Portal

TIMELINE

May 2022 - Dec 2023

RESPONSIBILITIES

User Research

Wireframing

Prototyping

User Flow

Design System & Components

Usability Testing and Metrics

Graphic Design

Photography

IMG_6331235_edited (1) (2).png

EdgePi

The Cloud Based Industrial PC

A Raspberry Pi powered industrial PC capable of being configured online through its portal.

Data read from EdgePi can be saved onto the cloud where it can be viewed through Grafana, an analytics and data visualization web application. 

 

coverrimage_edited_edited.png

How Might We...

Problem Statement

Create an intuitive, human centric platform, that captures the full functionality of an Industrial PC/PLC/IoT device, while simplifying its inherent complexity in order to cater to both professionals utilizing EdgePi for industrial factory automation, and novice/ hobbyists utilizing EdgePi for home & school projects

Solution...

All your Functionalities. All in one Place.

Safely and Securely in the Cloud.

Conveniently gain access to your EdgePi remotely. Read, collect, and store all data read from EdgePi onto the cloud and have it visualized on Grafana.

EdgpiPortalBanner.png

Rationale...

EdgePiMockup01.png

General Aesthetics & Module Cards

EdgePi Portal's layout and visual design were designed with user goals in mind. Content is organized into digestible chunks with each module being displayed as cards.

Effective chunking allows for better readability and reduced cognitive load for users. A natural visual hierarchy appears, allowing users to efficiently traverse the interface in order to find what they're looking for and accomplish their primary goals.

AddingADeviceMockup.png

Adding a Device
& Onboarding

Marked with clear steps and predictable interactions, users can conveniently add their EdgePi onto the portal and begin reading and configuring their device online in minutes. 

Users are instructed to scan the unique QR Code located on the back of the EdgePi enclosure and then attach the newly added device to a prepaid data plan. The intuitivity creates trust in the product, especially critical at the beginning of the user experience.

EdgePiMockup3.png

Card Structure
& Natural Mapping

Cards presents the ports numerically, and in chronological order. This layout follows the layout of ports shown on the EdgePi enclosure, and the location of the physical ports on the device. 

Natural Mapping is achieved by maintaining an internal consistency within a variety of touch points within a single product. The similar layouts promotes recognition and reduces cognitive load to make the product feel more intuitive, especially important for more novice users.

EdgePiMockup3.png
EdgePiMockup4.png

Config. Modals
& Progressive
Disclosure

Module configurations are placed within each card’s settings, displayed as modal screens. Utilizing Progressive Disclosure, config options are presented in time and when needed.

This consistent interaction pattern is used throughout the portal to help manage the complexity of EdgePi. With the addition of tool tips, users are guided step by step through the different options, making the modules and its respective configurations more comprehensible and digestible. 

EdgePiMockup3.png
EdgePiMockup5Updated.png

Flexibility of Use

Catering to the industrial use case of EdgePi, users have the option to view EdgePi Portal through a compact mode. Instructional content is replaced with additional accelerators, personalizations, and customizations, to streamline workflow for the more advanced user.    

(From Feedback after Testing)

Configuration Input controls are available straight from the dashboard, eliminating the need to go through setting modals. Content can also be enlarged and displayed on industrial monitors. 

01 /

Design Ethnography

EdgePi was a complicated industrial PC with both hardware and software elements that required specific technical knowledge that I did not possess. At the beginning, it was important for me to spend some time understanding the context of the product before I head into ideation.

I divided my research into 3 phases. A primary phase where I conducted user interviews in an attempt to accumulate more insight into EdgePi, a secondary phase where I scheduled a walkthrough with a mechatronics engineer to walkthrough the use cases of EdgePi, and a final phase where I did a competitive analysis on the current Raspberry Pi Powered Industrial PC market to get a better understanding of the type of interface I should be visualizing.

User Interviews

Primary phase of my user research involved inquiring about EdgePi as an Industrial PC, expectations for the interface from the team, and possible pain points that may arise. 

Participant #1

FARZAD PANAHI

OSENSA Innovations Chief Technological Officer

Gathered insight into the capabilities of EdgePi, the context of the problem, and the functionalities the portal must possess.

“The EdgePi Portal is what sets our Raspberry Pi Powered industrial PC from our competitors. A good balance will have to be struck between the inherent complexity of an industrial PC and learnability of our portal interface in order to cater to our broad target audience.”

FP.png

Participant #2

NAOMI 

OSENSA Innovations Backend Developer

NV.png

VENASQUEZ

Gathered insight into the development logic that the EdgePi Portal UI will use in order to control the EdgePi device remotely.

“We will be primarily using AWS IoT Device Shadow Service to control the device. The EdgePi Portal interface should present the state of each configuration on the EdgePi and have input controls for users to change those said states.”

JT.png

Participant #3

JIMMY TRUONG

OSENSA Innovations Frontend Developer

Gathered insight into how the portal interface would be coded and any constraints or feasibility issues that may arise. 

“The EdgePi Portal interface would be coded using ReactJS and Chakra UI. Both of these programs have component libraries that could be used in the design to make my life easier, although new design elements can also be created if needed.”

Participant #4

STEVEN PARK

OSENSA Innovations Mechatronics Engineer

Gathered insight into the hardware anatomy of an EdgePi device such as its ports, microchips and boards.

“EdgePi in summary is a cloud integrated industrial PC, PLC (Programmable Logic Controller), and IoT edge device, with multiple channels of input and outputs, all powered by the Raspberry Pi. Most of the ports will have to be configured somehow using the portal.”

SP.png

Field Studies

Secondary Phase of my user research involved scheduling a walkthrough with a mechatronics engineer to walkthrough the real-world use cases of EdgePi. 

IMG_6452.HEIC

Understanding EdgePi is still a work-in-progress

Visited the in-house cleanroom where the first batch of EdgePi's are being built. Prototypes are currently undergoing QA and QC testing before full production. 

IMG_6456.HEIC

Understanding EdgePi in a Home and School setting

Visited a mechatronic's workspace where different breadboard setups were being set up, imitating what it would look for hobbyists and students using EdgePi.

IMG_6454.HEIC

Understanding EdgePi in an industrial setting.

Visited the mechatronic lab where different boards were being tested to cater towards professionals using EdgePi in an industrial setting such as factory automation.

Competitive Analysis

Final phase of my user research comprised of gaining an understanding of existing related products in the market in order to gauge EdgePi's strength and weaknesses.

Frame 20140.png
TB.png

INSIGHT

The competition is heavily geared towards industrial applications and does not cater at all to the hobbyist/student demographic. Their proprietary interfaces heavily prioritizes function over form and can be incredibly daunting and difficult to comprehend for beginners. 

I realized that there was no shortage of companies creating Raspberry Pi Powered devices for industrial solutions. However what sets EdgePi apart from its competitors was its cloud capabilities and its intuitive, beginner friendly user interface accomplished through the EdgePi Portal. 

02 /

Defining the Problem

After consolidating my data gathered from the design ethnography stage, I wanted to go into the define phase of the design process collaboratively with the team at OSENSA. I did this for 2 reasons, to familiarize the team that is relatively new to the field of interaction design to its methods, and to gain critical feedback early on to ground my ideation based on my colleague's expertise in the field. 

I first attempted to define the problem by presenting my data using an affinity map in order to capture the some of the reoccurring themes within the problem space. 2 user personas, one from each of EdgePi's target audience was then created to capture the interests of the 2 groups. A final journey map was then created to map out possible pain points during a users interaction with the EdgePi Portal. 

Affinity Mapping

During the define phase, I created a physical affinity map to encourage my coworkers to join in on the conversation and help form insights and brainstorm ideas collaboratively. 

The affinity mapping helped me organize the extremely diverse information from different stakeholders gathered from the design ethnography into a coherent and meaningful presentation. After the map was set up, some recurring themes and patterns began to appear. 

IMG_6478 2.HEIC

User Personas

EdgePi's 2 main target audiences were then presented as user persona archetypes, a mechatronics university student that regularly conducts personal electronic projects at home as a hobby, and a CEO looking for an cloud-based industrial PC to aid in factory automation. 

These 2 archetypes was extremely useful in helping me ground my design and made sure I was cognizant of my user's diverse goals, preferences, and pain points. Often during setbacks that required design iterations, I would often go back to my personas to remind myself who I was designing for.

rounded2.png
rounded.png

User Journey

Lastly, I created a journey map to create a visualization of the many processes and steps the user would go through when interacting with the EdgePi Portal. Each step of the map gave me potential areas of improvement as well as insight into steps that required a higher mental load from users. 

The actor and POV of the journey map was one of my user personas. Unfortunately the data to inform the creation of the journey map was not 100% based on real data as I did not have the opportunity to interview a mechatronic student /hobbyist. I instead used the data that I've received from the in-house user interviews, field studies, and competitive analysis and try my best to link it to an individual from this user archetype. 

journey123.png

03 /

Ideation

Surface Pro 8 - 2.png

The ideation of the Dashboard was an iterative process and I went back and forth between sketching, wire-framing and creating low-fidelity prototypes on Figma.

As many hardware and software components of the EdgePi was still being worked on, there would often be times where my requirements would change or new functionalities or restrictions would be added at a moments notice, forcing me to modify existing ideas or brainstorm new ones. 

Frame 303.png
112333.png
15777.png

One iteration of the Dashboard categorized EdgePi components based on its placement on the device itself, top, left and right. A status indicator is shown for each port to indicate whether anything is plugged in. A toggle allows users to toggle on and off cloud storage and a button is present at the bottom that transports users to Grafana where they can visualize their data. 

lolx123.png
kasd.png
123ffasd.png

Another iteration also consisted of EdgePi components displayed in different cards but a diagram of the EdgePi is shown in the middle with indicators showing the where each component is. As a component is hovered, the indicator would light up helping the user pinpoint where each port is on their device. 

04 /

The Pivot

However as development of the EdgePi continued, with some major changes to the hardware of EdgePi, coupled with the software backend side learning more capabilities about the AWS IoT Device Shadow Service, EdgePi can now provide users with a lot more customizations to its functionalities through its portal than previously thought. 

The portal originally thought to only control and store data from components as a module such as inputs, outputs, LED's, was later discovered that each individual port can now be manipulated by the user and have their data logged onto the cloud.

05 /

Ideation Pt.2

updatedEdgepi.png

With the changes, I had to quickly pivot but soon realized that with the current ideation direction that there were simply too many configurations to have all actions on one screen. 

After coming to that realization, I returned back to my affinity map and began modifying it to reflect some of the changes. I started brainstorming a design that incorporated the new functionality requirements while being mindful of EdgePi's target audiences as demonstrated by the 2 user personas created.  Reviewing the user journey, I began conceptualizing a Dashboard that was divided into View Mode and Edit Mode, in which the Dashboard will simply show the readings of each components and all configurations would be done through modal screens. 

06 /

Sketches

Learning from my previous mistake of increasing the fidelity of my interface ideations too quickly, I returned to the sketching phase to explore and iterate on various ideas.

With low fidelity sketches, it provided a high level exploration of how the EdgePi portal user interface would work without getting bogged down by the details. I was able to quickly visualize different concepts and present it in meetings that aided collaboration and communication. Based on the feedback from the team, I would adjust and refine the sketches accordingly. 

Add a Device

Frame 1163.png
Group 448.png
Group 447.png

Dashboard 

Dashboard 

Portal Homepage

Order History

Group 451.png
Group 452.png
Group 450.png
Group 450.png

Subscription Plan

Device Overview

07 /

User Flows

Paired with my sketches, I created multiple user flows as an additional form of visual aid to better communicate the proposed design and ensure alignment with the team’s expectation.

Similar to the sketches, the user flow diagrams allowed me and the team at OSENSA to take a high level view of the EdgePi Portal and ensure it meets all requirements. These low fidelity visual representation allowed for quick iterations based on the feedback and critiques made during each meeting. 

Add a Device

Adding a device to EdgePi Portal

Output Module

EdgePi’s 8 Analog/Digital Outputs

Input Module

EdgePi’s 8 Analog/Digital Inputs

08 /

MVP User Testing

With the first iteration of the Edgepi portal conceptualized and implemented, the first batch of EdgePi’s was sent out to members of the mechatronics community for user testing and feedback. 

Participants was asked to run through the onboarding process and conduct several common core tasks and then share their thoughts through a questionaire at the end. Along with the team at OSENSA, we decided to set a number of key metrics and KPI's to gauge the success of the EdgePi Portal. 

Given users, both industrial and recreational, having prior basic mechatronics knowledge ...

Task Success Rate

>80%

participants should be successful in completing the assigned core tasks using the portal.

Time on Task

>30sec.

participants should spend no longer than 30 seconds to configure a specific port.

SUS Score

>70pt+

participants should be ranking the portal MVP, a system usability scale score of greater than 75.

CSAT Score

>75pt+

participants should be ranking the portal MVP, a satisfaction score of greater than 75.

IMG_0628_edited.jpg

09 /

Feedback + Iterations

The results of the 10 questionnaires was incredibly constructive in providing me with many areas of improvement and insights based on the key metrics set beforehand. 

Albeit the small sample size, behavioural KPI’s such as the task success rate was an overwhelming 90%, with time on task hitting an average of 28 seconds depending on the core task. Attitudinal KPI’s however was missing the mark with both SUS and CSAT scores missing the benchmark. 

Task Success Rate

90%

participants successfully completed the assigned core tasks using the portal.

Time on Task

28 sec.

was the average time participants spent to complete an assigned core task. 

SUS Score

65pts

was the average score participants rated the MVP in regards to its usability.

CSAT Score

70pts

was the average score participants rated the MVP in regards to their satisfaction.

Key Insights

Although most test users are able to successfully complete the assigned core tasks, certain assigned tasks are requiring more time from users than expected.

 

From the questionnaire, users are quoting at times it is difficult to understand the product, and find the information that they need, ultimately affecting the SUS and CSAT score in a negative manner.

Before

DiffRTDBefore.png

After

DIFFRTDAfter.png

Natural Mapping

The Differential (DIFF) and Resistance Temperature Detector (RTD) requires the use of multiple ports. Users were getting confused with the repeated readings shown on the card.

Iterating on the feedback, I decided to add an icon composed of connector lines that groups the relation between the ports and the DIFF or RTD in an attempt to utilize "natural mapping" to make the experience feel more intuitive. 

Before

OutputOld.png

After

OutputNEW.png

Grouping

Changing the operating mode within a port's settings modal will in turn change the configurations under it. Users were confused why configuration options was changing. 

By grouping the configurations available for each operating mode and styling it in a way where the configurations are under the operating mode in a hierarchal sense, inputs are presented to users in a more logical manner.

AuxiliaryOLD.png
AuxiliaryNEW.png

Flexibility & Efficiency of Use

For some users with multiple sensors and devices attached to EdgePi, finding the reading for a specific device proves to be difficult. Users requests some sort of pin functionality.

By adding an enlarge and minimize functionality to specific readings for custom cards, I increased the level of personalization for users to tailor content and functionality based on their own preferences and needs. 

EdgePiCompact01.png
EdgePiCompact02.png

Accelerators, Personalizations, and Customizations

A “compact mode” that allowed configurations to be done straight from the dashboard instead of having to go into the settings modal of each port was requested from more experienced users in order to speed up their workflow. 

Other personalization and customization features was also requested to allow users tailor their own EdgePi Portal experience to meet their individualized needs such as the fullscreen view where users can create their own view.

AF1.png
AF3.png
AF2.png

Error Prevention

Empty States

Tooltips

Checking for error and providing constraints.

No content to display and further suggestions.

Context to help user complete their task.

Context, Tips, + Empty States

More advanced users provided insight into areas where more novice users would encounter confusion and recommended further context and tips that could be added. 

The general user that tested the MVP of EdgePi were somewhat more knowledgable in the area. I believe the opportunity to interact with more beginner users could be more insightful in the future. 

08 /

Prototype

Adding a Device . 

Simple and Intuitive Onboarding Process

Following 4 simple steps, users are guided through adding their EdgePi Device onto the online portal and then attaching a subscription data plan to it. 

Frame 574.png

Devices List .

All attached devices presented as tabs

Users can easily switch from one device to another when configuring or reading values. A real time status bar is presented providing real time health diagnostics of the device.  

maybee1231234.png

Inputs & Outputs

Port numbers, names and readings displayed in numerical order. 

The cloud icon indicates whether cloud storage has been enabled for that specific port. The gear action icons will open up the configuration modal screen for that specific port while the bar chart will open up the port's reading visualized through Grafana. 

123123123.png

Configurations .

All port configurations are done through modal screens where users can make changes depending the type of port. 

Different ports will have different configurations available to users. After all changes have been made, users will hit confirm and their changes will be reflected on the Dashboard.

Other Functionalities .

All other functionalities share the same operating system. 

Some functionalities will have unique configurations specific to them but the design language is consistent throughout all 7 cards. 

 

9182773.png

TAKEAWAYS

CONCLUSION

EdgePi was my first ever professional UI + UX project and it was particular daunting as it was an interface solution for a product that I had no expertise or background knowledge in. Luckily, the team at OSENSA was extremely sympathetic, provided me with a lot of insight into the product, and most importantly actively participated in design critiques. They gave me full trust and I am truly very fortunate to be given this opportunity. 

What I've learned ... 

Requirements change ... Learn to Adapt. 

Different from school projects, projects done in a professional context often have many interconnected parts and changing variables.

Requirements change, new variables gets introduced, and problems often arise requiring me to think of workaround or rethink my solution completely. The design process is iterative and I've learned to routinely come back to my data in order to refresh my mind and keep me focused on the users. 

What works for me may not work for others ! 

The UI design of the interface is only one part of a bigger picture. As the UI + UX Designer, my work revolves around many other disciplines. 

Throughout my coop, I worked closely with the frontend and backend developer team, the mechatronic engineers, as well as the product manager. I was able to develop a close relationship with the team at OSENSA and ensure to bring them in right from the beginning of the design process. However during the developer handoff, the front end developer wasn't familiar with Figma and thus there would often be differences in styling in the implementation compared to the design. I've since learned to create detailed developer handoff documents as well as style guides to ensure a smoother transition. 

OTHER USER TOUCH POINTS

Front iMac Mo55ckup.png

EdgePi Website 

Designed using Figma and implemented using Wix the EdgePi website that goes into depth the device's applications, software and hardware capabilities, as well as a forum and blog for enthusiasts to keep up to date with our development. 
Check out my work ! -  edgepi.com

IMG_4327_edited_edited.jpg

EdgePi Packaging 

Designed the packaging box the EdgePi will be shipped in. Ideated on Figma and refined on Adobe Illustrator. Conducted supplier relations by contacting different vendors and comparing samples. Ultimately chose to manufacture it overseas from an Alibaba supplier. 

planss123.png

EdgePi Storefront 

Design pages for the EdgePi E-Commerce Storefront. A platform for users to purchase EdgePi's and monthly plan subscriptions. The checkout flow was done through Stripe and the site will be launching mid January 2023 for Pre-Order Sales. 
Check out my work ! -  store.edgepi.com

IMG_6331235_edited (1).png
coverrimage_edited.png

EdgePi Enclosure 

Designed the packaging box the EdgePi will be shipped in. Ideated on Figma and refined on Adobe Illustrator. Conducted supplier relations by contacting different vendors and comparing samples. Ultimately chose to manufacture it overseas from an Alibaba supplier. 

Previous Project

Interface UX Designer @Nokia

Back to Top

EdgePi@OSENSA Innovations

Next Project