Portfolio Case Study: ChipletStore
User Interface Design, Interaction Design
What is a ChipletStore?
ChipletStore is an online library of Chiplet Data, for engineers to choose the Chiplets they need to design their own chip.
Background context:
Who are we designing for đź’¬
Imagine you are building your own smart watch and you need it to be able to; produce audio, track heart rate, connect to wifi, show an interface screen. ⌚
This means that the chip should have: audio, sensor, wifi and LED.
You will likely need four Chiplets that have four different functions, namely:
audio, sensor, wifi and LED.
With ChipletStore, you can easily search for the Chiplets you need, select the Chiplets, then add them all into a basket.
The design challenge here is to design a table of Chiplets that allows users to complete that flow easily.
This case study will be split into two parts:
A. User Interface Design
B. Interaction Design
User Interface Design
The row style
Alternating different colors in the background to create an illusion of horizontal lines. As the ChipletStore lists large sets of data, the alternating colors helps with the readability.
Header Contrast
Clearly separating the body with the header by using a contrasting background color.
Filter
Enabling users to control the data shown in the table through a filter feature. Inspiration was taken from comparative websites to visualize how filtering would like if it was in an illustrative form as compared to check boxes.
Bulk selection
Clearly separating the body with the header by using a contrasting background color. Creating visual cues using a blue colored background to highlight the selection.
Add to cart
Maintaining context by anchoring the Basket on the right side of the screen, while scrolling down the table. This functionality allows users to view the data simultaneously while adding new chiplets to the basket.
Responsive Design
For smaller screens such as the Tablet/iPad, horizontal scrolling is accommodated with responsive designs.
Mobile Version
Interaction Design
The design challenge here is to design a table of Chiplets where users can easily search for the Chiplets they need, add to basket and “check-out”.
After checking out, we want to encourage users to log in and design their chip on our web application.
Interaction 1: Search 🔍
The design challenge here was:
How can we design for the optimized search experience
After interviewing and observing three engineers, we found out there were two patterns of searching.
Informed search: If they know the exact Chiplet they need, they would search the name of the Chiplet on the search bar.
Guess search: If they do not know the exact Chiplet they are looking for, they would type “audio” on the search bar, or they would look under the categories for “audio”.
During implementation, I worked with our engineers to ensure that all information in the columns are searchable, given the various permutations.
Interaction 2: Selecting / Add to basket 🧺
The design challenge here was:
How can we teach users how to select a chiplet.
After designing various explorations, user testing showed that teaching the user once is sufficient for them to understand. We decided to go with a “First Time User Dialog Box” to prompt users.
Marketing Design vs UI Design:
In the “First Time User Dialog Box”, we went for a completely different color from our color scheme of the webpage. This is because we wanted to create 2 layers / dimensions. The first layer was the marketing dialog box and the second layer was the actual UI itself. This clearly called for the user’s attention.
Interaction 3: Check out + log in đź›’
Logging in is a lot of work. Ideally we wanted users to skip log in to start designing their chip. However, this would affect the security of our main enterprise product.
The design challenge here was to:
Design a log in that is as seamless and as inviting as possible.
I worked with our Front-end engineer to discuss which flow was the most feasible to implement, and we then presented it to my design manager.
In the end we settled for a log-in banner on-top of a static image of a chip designing application because it was the least disruptive, and it shows the user a preview of what the web application would look like.
Clickable Prototype 🖱️
To get buy-in and to communicate all three steps (search, add, check-out) I shared a prototype to get feedback from the team.
Yes, it is live! 🥳
ChipletStore is live at: https://chipletstore.zglue.com/products/chipletstore
Thank you for reading!
To view more of my works, please visit my portfolio:
https://evangeline.webflow.io
