Soliyarn & Soliyarn's Business Partners
May - August 2022
Product Designer
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 an e-textile startup creating sensor-based garments for military, industrial and personal use. As a Product Design Intern at Soliyarn, I was part of the team that designed a web portal to let users connect to their Soliyarn garments and visualize the data collected 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.
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.
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.
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.
The second workflow was what we called the Device Visualization Interface, which was the interface where customers could connect to their garment and be able to visualize the real-time data collection through different visualizations based on the kind of garment. This involved creating 3-D real-time visual
Design sharing restricted due to NDA - please contact me
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