Soliyarn & Soliyarn's Business Partners
May - August 2022
Design Sprints, Prototyping, Usability Tests, A/B Testing
Figma, Blender, Sketch, Illustrator, UserZoom
Since this work is under a NDA - I am limited to what I can share. If you are interested in learning more, please contact me
Soliyarn is a smart wearables startup creating sensor-based wearables for military, healthcare and personal use. As a Product Designer at Soliyarn, I was part of the team that designed a web portal to connect to sensor-based garments and visualize data in real-time. I defined user task flows, created wireframes, prototypes and mocks for the pages, and worked to improve the visualizations of the products through 3D design and development
While smart, sensor equipped garments are growing in popularity, not many interfaces have been created that allow different clients to connect to their garments and see data through real-time visualizations relevant to their needs.
In addition, Soliyarn has a line of products that aim to be created for both business use, as well as personal use. Thus, any interface must be adaptable and error-free to allow for commercial and personal use.
The goal for this project was to create a coherent and modular infrastructure and interface that lets Soliyarn's varied clients easily access and interact with their biosensing garments and visualizations.
Soliyarn's had no centralized platform to host real-time data and visualizations of their products. This meant that each client had their own interface to visualize the data collected by their garments. Further, there was no system in place to manage users and products, making it difficult for Soliyarn to effectively scale their business.
As Soliyarn was growing, it was acquiring more clients and customers thereby increasing the types of products being created. A disjointed interface for each product and client was hard to scale.
|No centralized software infrastructure||Software Scalability|
|Not commercial ready - Demos were "academic" in nature||Product value through UX|
|No user or product management system||Commercial Scalability|
|Unclear method of connection between device and software||Renders product unusable and unintuitive|
We created a list of ‘How Might We…’ questions to help us better align our user’s tasks and goals:
I conducted interpretation sessions with the business leaders and researchers who communicate with clients to identify what were the most important features needed in the platform and to identify any important design guidelines and limitations that clients may have.
We need a coherent interface that let all our easily access and interact with their biosensing garments and visualizations in one place
Some key takeaways from these sessions were:
Before designing prototypes, we wanted to define the structure of the portal after receiving the development specifications. For this, we worked closely with engineers, designers and stakeholders to create a complete task flow for the portal. Creating this flow helped us document and understand key tasks for the portal and have a unified point of reference for design and development.
The final user flow chart for the web portal including screens and the tasks between screens
We created two different wireframes that we did A/B testing on with a small subset of clients to see which one was more intuitive. The key difference between the wireframes was the navigation styles and configuration setup. The first had top-based navigation and dialog based configuration while the second had side-based navigation with dedicated configuration. In the end, we decided to go with the side-based navigation and dedicated configuration as our A/B testing results found it to be more intuitive for users.
Side Based Navigation Wireframe
Top Based Navigation Wireframe
After analyzing user insights, creating a task flow and testing wireframes with a small set of clients, we did 2 design sprints to create our final prototypes that were used for development. I was responsible for working on two main flows - the device configruation and the visualization interface.
These designs were prototyped in Figma and the animations were created using Framer.
The first prototype I developed was the flow for configuration of a new device. This included users initially connecting their device via bluetooth, downloading and updating any necessary software, and customizing specific details like name, icon and other variables like refresh rate.
3-step process for Device Configuration
The second workflow was all about allowing supervisors and clients be able to manage access to their devices amongst their organizations and locations. Examples of such locations included hospitals with various rooms, or a company with multiple offices. This included creating new users, assigning them to locations and devices, and managing their access.
Prototype for Managing Device & User Access
I also worked to further develop the visualizations of the products. For this, I had to work closely with systems and software engineers to understand the capabilities and limitations of the products. I re-developed the visualization using a 3-D modelling libary called Three.js, D3.js and the Web Canvas API to ensure the visualizations were capable to work with the prototypes created while keeping in mind the limitations of the product.
3D Visualization example