Caffeine: online global community for product managers

UX Strategy / Brand Design / Website Design / Interaction Design
HEALTHCARE GENOMICS
UX DESIGN
DASHBOARD DESIGN
UX INTERVIEWS
Introduction
Caffeineis an observation based community that unites Product Managers from around the world in their constant desire to learn interesting product developments, user behavior patterns, and cultural nuances.
Upraised, a startup that is helping professionals to transition into a Product Management career through a 16-week long intensively crafted program. As part of the design team at upraised, I got the opportunity to build Caffeine from its inception - from UX research to launching the application.
My Role
Product Designer (Contract)
Team
Toshi Gupta
Aditya Behere (PM)
Mona Gandhi (CEO)
Duration
8 weeks (April 2020 - June 2020)
Tools
Miro board, Figma
Core responsibilities
  • Preform UX research using contextual inquiry interviews with relevant user base
  • Create hypothesis arguments for secondary research around design decisions
  • Launching the slack version of the online community to test hypothesis
  • Collaboration with product manager to decide on feature sets
  • Sketching low fidelity prototypes and designing high fidelity mobile version on Figma
Deliverables
Research
I did the first round of research using contextual inquiry methods where I conducted 10 interviews, each lasting for ~40 minutes. The interviewees were all product managers segregated majorly based on the following parameters:
  • Years of experience
  • users and non users of Upraised
  • Activeness on online platforms like twitter, instagram etc.
Overarching questions for hypothesis testing
Affinity wall through qualitative analysis of user interviews
Engagement Research
After answering the above questions through a dense affinity wall, I could understand the user motivations around stepping into a PM based community. It was important to understand the factors that would drive engagement before launching an online space. How can we incorporate safe space for people to freely reply and post their observations?
For answering those questions, we decided to run a very similar community on slack. Starting with ~25 members from 5 geographical locations - USA, India, China, Europe and UK.
Findings
Through slack community analysis and understanding the daily active engagement, my team and I came down to three drivers of engagement:
  • Engagement drives community
  • Increasing daily active users
  • Focus on gamified onboarding
Analyzing the daily, weekly and monthly active users actually engaging in creating content
Branding
I was lucky to be part of this idea right from its inception. Before the launch, I helped the team with the brand design sections of logo, invites and landing website.
‍
Logo Design
Invite Design
Landing Website
Design Decisions
Since this was a product observation based community, I drew inspirations from different social platforms and online communities. I also wanted to use the hypothesis done in the previous steps to decide what kind of pattern I want to use for posting observations
Final Prototype
The application is under development and the designs are under a non disclosure agreement (NDA) till the launch. Please feel free toemail mein case you interested to discuss the designs further and I would be more than happy to share my experience
Reflections
I am very fortunate to have got this opportunity admist the pandemic where I could help an emerging Indian startup in a remote setup. Here are my set of learnings from this stint as a sole designer of the product:
  • Collaborating with various stakeholders (Product managers & developers) on the team (even in a remote setup with 12 hour timezone difference)
  • Understanding and adapting to the speed of the team - all of this work could only be accomplished in 7 weeks with a wonderful team effort
  • Importance of following an organized design process with clearly laid out the plan and taking feedback on the go
  • Go all out and explore all edge case scenarios and fail! Its okay if your designs fail, iterate on them :)
01
Team and Role
My role
Designer
Developer
Team
Toshi Gupta
Ruchita Lodha
Duration
8 Weeks
Mar'20-May'20
Tools
Unity
Vuforia
ARCore
Figma
02
Motivation
Dyslexia is a language based learning disorder which is found in 1 in 5 students and kids who have difficulty often avoid reading because it's stressful.
We wanted to use an immersive technology like AR/VR/MR for good together with digital game based learning to enhance the learning experience and help students retain things in a less stressful and playful way.
03
Problem Statement
To build an accessible learning experience for kids diagnosed with dyslexia between the age of 3-6 years. To help kids be less stressed mentally while learning to read and write alphabets.
04
Challenges in a classroom setup
There are specific set of challenges faced by dyslexic children in a classroom setup:
1. Manual Learning: Lack of multimedia based interaction to address learnability issues.
2.Individual learning approach: Teachers are less focused on students who have dyslexia in a classroom setup.
3. Less variation in learning: Lack of use of variety of senses such as seeing, hearing, talking, and touching.
05
Our Solution
To build an augmented reality game-based alphabet learning application for kids between age 3-6 years by augmenting the real world objects around them. The application would help students learn alphabets with phonetics and associated real world objects, identify and differentiate between alphabets and write them.
06
Why Augmented Reality?
We did a qualitative research on ways and methods adopted to help dyslexic kids learn faster like the Orton Gillingham method and the Wilson Method. We studied the online videos available  for teachers to pick out the key components that are very important while helping in dyslexia.
We realized thats supporting these methods with augmented reality for multi-sensory learning (Kinesthetics, Visual, Tactile, Phonetics) coupled with game based learning would help students get accurate and faster in alphabet identification
07
User Journey Mapping
Potential users: Kids who find it difficult to read, learn and identify alphabets.
The idea is to build an application that augments the alphabet cards/alphabet book with 3D holograms and support the phonetic learning through sound assistance. It will have 3 main features:
1. Learning about the shape and usage of alphabet
2. Identification of alphabets after learning through games
3. Learning to draw the alphabets through guidance
08
Lo-Fi Sketches
09
Introducing JoJo - the voice assistant
‍To help the students engage and navigate better with the learning and games, we introduced a cute animated hippo!
The main reasons behind having a voice assistant are:
1. Help students navigate between different parts of the application
2.Lower the burden of reading instructions for dyslexic kids
3.Give a comfortable learning experience through their "Friend- JoJo"
10
Technology decisions
1. The application is developed in Unity and tested on an android and iOS mobile device
2. To enable enhancements on a book/alphabet card, we decided to go for a marker-based approach in Vuforia

*This project was carried out during COVID-19 and therefore our plan of enabling the application on Hololens could not go through.
11
High Fidelity prototype and interactions
2D menu and instructions: The game starts with a 2D menu with an introduction by a friendly assistant JoJo. JoJo guides the user to the different sections of the application like Learn, Play and draw.
You can listen to JOJO's instructions in the final video attached.
Dragging/dropping and success/failure animations: To test students' capability to identify the learned alphabet, they are asked to drag and drop the associated 3D hologram into the ring options. Based on the answer the application reacts gently with animations of right and wrong answer.
Shooting with a ball: For letter identification, the application is supported with physics enabled bowling game. The students' are asked to shoot the associated hologram to the right letter glasses.
The right and wrong answer are distinguished with sounds.
Drawing: The students can reference the drawing technique animation and try drawing with a physical marker.
12
Final video
12
Reflection and learnings
All Projects
Next Project
Related projects
EMAILLINKEDINTWITTERMEDIUM
© TOSHI GUPTA 2020