Defining user experience of the Block Page making it more intuitive, informative, and helpful.
TimeLine
2 weeks
Stakeholders
Full Stack Developer
UX Research
Empathy Evaluation
Hi-fi
Scenario Planning
Usability Testing
What Are Blocks?
Blocks are pre-made reusable contextual data which can Be UI elements or elements used in data modelling. Brokenatom Blocks is a community place where anyone in and outside the company can create components used by everyone.
Eg a button, Navbar, a product order data model
These are Components
Name
Type
price
number
quantity
number
address
serial
This is also a component
Last update 12 mins ago
Project Summary
Problem
Existing Design for block page lacked User Empathy in terms of usage.
Area of Imrovement
The components were placed all over and did not give the overall idea of whats present.
Pain Point
To give a sense of familiarity to users create components, a preview with supporting meta data can be a part.
Feature
Props and Comp are not clear with the goal of the deliverable
Pain Point
Defining Research
understanding where we are
The idea behind having blocks page is to use pre-made components.
Questions arise
Why a different page, increasing user navigation steps
thousands of components which would take more loading time,
Targetting Novice Users or Frequent Users or both?
Why a Community approach?
a place where users can make use of extended list of components
HMWs
🥲 Usability Issues
The components were placed all over and did not give the overall idea of components present when the search/filter is not on
Header 1
Desktop headers
Navbar21
Phone navigation bar
Sign Up
🧐 HOW MIGHT We?
Give an overview of whats the picture is about without the filter is on
🥲 Usability Issues
Images are vital info, absence would leave the user confused.
Problems Around
The creator would have to upload relevant images with min quality requirements
Can not use a default placeholder as it would still leave the user confused
Inconsistencies in images uploaded at web page
Eg- Stretched, cropped image
🧐 HOW MIGHT We?
Make an efficient system for creators without extra steps involved and for users go get a preview
🤩 Feature
To give a sense of belongingness to creators, a preview with author’s info, supporting meta data, can be a part.
🧐 HOW MIGHT We?
Make an efficient system for creators without extra steps involved and for users go get a view
Create a space for all the creators encourage them to contribute for platform
Improvements
Making a Folder (when no filter selected) Clubbing under a topic
Preview for a Component selected-Final Screens and Iteration
1
Problems Around
html component with different sizes cannot have w-full
snaps
Cognitive load over how the component in place looks
Component with html mockup/partial mockup
2
Learnings
Regular discussions with devs.What seems default function may not actually be, the developer might have to put in extra steps and so as we as designers shall also wear devs lens.
Thank You
Thanks for Visiting!