The Social app for the festival Kandi

- 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.

- 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.

- 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.