- brief -
Kandi Kosmos is a social media app designed for the kandi festival culture, where
beads (kandi) are exchanged and collected. The app allows users to scan QR codes on beads to view
information, add social media posts, and track the beads' geographical journey. It also enables users to see
previous owners' posts associated with each bead.
- context -
The kandi festival is a traditional event involving the exchange of decorative beads. Kandi Kosmos aims to
modernize and enhance this experience by integrating technology, allowing users to track and interact with
beads digitally.
- problem statement -
The traditional kandi festival lacks a digital component that connects participants and tracks the history of
beads. There is a need for a platform that bridges the gap between tradition and technology, enhancing the
festival experience and connecting people globally.
- quick glance for hiring managers -
- Problem Tackled: Created an interactive online version of real kandi (beaded jewelry) with easily
scannable, aesthetically pleasing QR codes for outgoing, social users, while ensuring accessibility.
- My Contribution: Led UXE efforts by developing a web component that mimicked the physical kandi,
integrating SVG-based color generation and optimizing QR codes for easy scanning.
- How I Went About It: Conducted user testing with social personas, iterated on QR code designs and
color schemes based on feedback, and ensured a seamless, accessible experience for users.
- Collaboration & Constraints: Collaborated with a product designer to mirror the physical kandi's
aesthetics, balanced business and technical constraints while ensuring the web component met
accessibility standards.
- Google Earth Experience: Created a stunning Cesium UX with markers displaying locations where
people were posting from, enhancing the visual and interactive experience on the map.
- crafted solution -
- Scans and Tracks Beads: Uses QR codes on beads to add and view
information.
- Social Media Integration: Allows users to post and interact with bead-related
content.
- Geographical Tracking: Uses Cesium globe to display the journey and global
connectivity of beads.
- Design Tools: Created a Figma plugin and web component for generating
random bead colors and patterns.
- timeline -
- Team: Paawan (Designer), Yogendra (Senior Designer), Sahil (Product Manager), Gourav (Frontend),
Lovely (Frontend), Shubhi (Backend), Merul (Senior Backend & CTO), Ananya (Frontend Intern), Prashant
(Marketing Lead, Host for click actions), Jyoti (Social Media), Pratibha (Marketing & Sales), and Yash
(User Experience Lead).
- Role: Lead UX Engineer and Figma Plugin Developer
- Duration: 8 weeks
- Tools Utilized: Figma, HTML, CSS, JavaScript, TypeScript, Svelte, Postgres, GitHub,
Flowbite design system, Cesium globe, web components, figma plugins
- brand kit -
- design system style guide -
To ensure a seamless and cohesive design process, we adopted the Flowbite design system. This system provided
numerous benefits:
- Consistency: Flowbite ensured a uniform look and feel across the app, enhancing the user
experience.
- Efficiency: The pre-defined components and styles accelerated the design process, allowing us to
focus
more on innovation.
- Scalability: The modular nature of Flowbite made it easy to scale the app's design as new
features were
added.
- project goals -
- To create a social app that enhances the kandi festival experience by integrating technology.
- To provide a platform for users to track, share, and connect through beads.
- To develop tools that facilitate design and development, ensuring a seamless workflow.
- research -
- Personas: Developed personas for festival-goers, bead collectors, and social media users
interested in the kandi culture.
- Target Audience: Participants of the kandi festival, collectors, and enthusiasts
- Analysis: Identified the need for a digital solution that combines traditional bead
exchange with modern social media features and global connectivity.
- brainstorm and ideation -
- Possible Solutions: Explored features such as QR code scanning (using different plugins which
offer different designs) and geographical tracking. Considered various ways to visually represent bead
information and user
interactions. Explored Mapbox, Google Earth, Cesium and Google Maps Decoding for geographical tracking.
- Chosen Solution: Implemented QR code scanning with EasyQR code plugin and an interactive Cesium
globe for tracking bead journeys. Created design tools to streamline the process.
- random color kandi generator -
To facilitate both design and development, I created a Figma plugin and a web component for generating random
color kandi. This tool allowed designers to quickly prototype with diverse bead colors and patterns,
ensuring that the visual design was vibrant and engaging. Developers could seamlessly integrate these
designs into the app, maintaining consistency and speeding up the development process.
Reload the page to see the bead color change
Figma Plugin ↗
NPM Package ↗
Component's Performance ↗
- iterations -
Iterated on designs based on user feedback and testing. Refined the scanning process and enabled scanning
options to see post without login (Guest mode), social media features (Edit, Report, etc), and geographical
tracking (GPS location opt-in) to improve
functionality and user experience.
- sketches and wireframes -
Created initial sketches and wireframes focusing on the user flow from scanning beads to viewing their
history and adding posts. Emphasized a vibrant, engaging design consistent with the kandi festival's
aesthetic.
- usability testing -
Conducted usability tests to ensure the app met user needs and expectations. Tested features such as QR code
scanning (that didn't work correctly before in Guest mode), bead visualization (that also had problems for
non signed in users), and geographical tracking (where we faced Cesium Globe not showing in some old devices
because of a bug in their codebase and had to tweak atmosphere in the viewer to make in work) to gather
feedback and make improvements.
- design pages and interactive earth -
Our design pages showcase the user journey, from scanning a bead to viewing its history and adding new posts.
To visually represent the geographical journey of each bead, we integrated the Cesium globe into the app.
This interactive map displays markers for posts associated with each kandi bead, highlighting the global
connectivity of posts shown via Kandi Kosmos.
Kandi Kosmos Web ↗
- conclusion -
- Challenges: Ensuring seamless integration of QR codes, social media features, and geographical
tracking. Balancing traditional festival elements with modern technology.
- Learnings: Highlighted the importance of creating engaging and intuitive user experiences while
integrating new technologies.
- Outcomes: Successfully modernized the kandi festival experience, providing a digital platform
that enhances user interaction and global connectivity.
- scope of improvements -
Future enhancements could include additional social media features (group posts), expanded geographical
tracking
capabilities (showing a path instead of marker in Cesium Globe), and further refinements to the design
tools.
- what could have been better -
Initial designs could have included more user feedback to ensure the app met all user needs effectively,
particularly in the areas of guest mode UI screens and geographical tracking shown in Cesium.
- final feedback and suggestions -
The project effectively bridged the gap between tradition and technology, receiving positive feedback for its
innovative approach and engaging design. Future iterations should continue to focus on refining user
interactions and exploring new features to enhance the app further.