Dotchat: a virtual playground

  •  A virtual playground

  • As a designer, I aspire to become fluent in translating ideas into design applications, either physical or virtual. In today’s day and age, mobile applications and websites play invaluable role in not just creating but sustaining a brand and its identity. Ever since I was a design student, I have been intrigued by the ability to design technology to add dynamism to the tangible design. Thus, for my thesis project, I have advanced my inclination and learning in the field of graphic design through coding, technology, and interaction design. I created Dotchat as an interactive, techno-design product so I could learn the basics of design coding with programs such as P5JS and Processing.

    Concept: Dotchat is a prototype for a digital product inviting us to create engaging relationships with the environment. Data visualisations based on the weather and other inputs serve to generate patterns on everyday objects. The patterns could be displayed on bags, shoes, accessories, clothing, phone wallpapers, and other products. The patterns are controlled with a digital app, introducing movement, receptivity, and playfulness into our lives.


  • Ideation: The product industry is at the beginning of a new revolution. I wanted to develop a product that involves customer engagement, customisation, collaboration, and short-run and limited-edition production. My major goal was to design product that is powered by design technology. I am interested in the interplay between digital and physical entities, creating a hybrid relationship of tangible products with the environment. Thus I created Dotchat, which allows unlimited customisation of the product. It allows two major approaches: environment-specific code-based patterns designed from data visualisation and flexible screens for creating products material.




  • Features: Dotchat will be controlled with a mobile application that will do data visualisation of data collected by our mobiles, like maps, weather, games, and notifications.



  • Data Visualisation: While generating patterns for different features I tried multiple shapes like lines, rectangles, squares, circles. Out of these studies, I realised that different sizes of circles are the most successful for translating dynamic data into patterns.




  • Weather: Have patterns on the product based on the weather. This app has patterns for four different kinds of weather cloudy, sunny, rainy and snowy. Extracting circular forms to create textures. Iterating form into a pattern for coding in P5Js.
  • Camera : Interpreting how a digital self reflection could be visualised through dot codes. An interactive feature that visualises your selfie image through dot patterns. Move the mobile camera in the surroundings to see dots graphically on the product surface.
  • Recreation: Draw the patterns on the product when the user is getting bored and want to have fun with the product. To add more expressional interpretation, this feature allows user to make their product an expressional playground. Gestures can be interpreted into dot patterns.
  • Sound: According to changing tempos and volume of the interacting voice, the dots form and reform into patterns visually interpreting the quality of the voice.


  • User Testing Phase 1: To learn to code I decided to take the course Unravel the Code, a graduate studio electives. This made me to collaborate with engineers and make a working prototype of Dotchat.  Later in the semester, we had an exhibition for Unravel the Code at The OpenWorks gallery, where I installed my working product as User Testing Phase 1. 

    This exhibition was opportunity for me to understand the glitches and the bugs in my product. After receiving valuable feedback from users, I decided to create a black and white version of the product. Also, I used the notification feature instead of the sound feature, but that was not very well communicated, so I decided to select all the features that give data visualisation from the environment. Finally, I ended up with four different features: sounds in the environment, capturing the surroundings, weather, and recreation in a space.




  • Generating patterns for different features by writing codes in P5JS using javascript library.

  • Working Prototypes 
    Responsive Patterns: https://gigantic-bears.surge.sh/








  • App Design: User flow


  • Wireframes


  • Material study: Finding the right material was an important part of the process. A lot of field research went into hunting for just the right kind from the artisans in my hometown. I went to different fabric sellers in ‘Lal Kurti,’ where they sell export fabrics for cheap prices. I tried projection on suede, cotton and polyester in white colour but nothing was working quite as I wanted it to.  Amidst the whole process, I stumbled across a shop that had a white couch. The material seemed very workable to me and on trying projection mapping on it, it worked just how I wanted it to. It worked perfectly, so I acquired that material for my garment construction.
    ​​​​​​​
  • Teaser: A promotional video, which has four different products with patterns displaying different features. These products were carried by four models, who showcased them with a neutral attitude so as to focus on the product.






  • Elevation: The installation features a mannequin wearing a white coat. A projector with mac mini attached to it was projecting on the coat. A trackpad enabled users to draw patterns on the surface. A webcam and a voice recorder collect data from the surroundings to create dynamic patterns.
     



  • Exhibition: After working for almost a year, our elevations came to life in the graduation show at Meyerhoff Space in Fox building at MICA. Complete with a screen, and a scope for the user to interact with the product, the exhibition opening day was a wonderful opportunity for live feedback and interaction with potential users.