Chrome Extension for Mental Health

Find small moments to make big waves with micro mindfulness

My Contibutions
User Research, User Interface Design, Video Production
Deliverables
Chrome Browser Extension
Industry
Mental Health
Time
2018

The micro meditation adapt with your daily routine

Current Mindfulness is a Chrome extension that helps you practice micro-meditation from your desk. Catch a wave of calm with a new browser tab serving mindfulness tips, breath visualizations, and micro-meditations tailored for the workday.

Problem Space

How might we make the practice of mindfulness more accessible in the work-place?

Off Brand Identity
Boring VR Booth
Lack of transition

Reframe the problem

"After considering some of the core issues and frictions facing the Leica M System, we asked ourselves: How can we connect people with the brand and give them confidence in buying Leica M? How can we clearly illustrate to users what sets the Leica M System apart from its competitors?"

Workplace mental health issues cost the Canadian economy an estimated $33B in lost productivity

Modern workers suffer from decision fatigue, information overload,poverty of self-regulation, distraction.

Companies that have introduced a workplace mindfulness program have saved and estimated $2000/employee and gained an estimated $3000/employee

Mindfulness Practice has been shown to enhance the concentration, alleviate stress and anxiety, increase productivity.

Corporate training

High cost of classroom training Passive delivery (PowerPoint, coursework)
Impact on productivity
Access to equipment
Accessibility for remote offices
Non-standardized learning

Collision Photography

Inconsistency of photo layout
Failure to accurately capture details
Submitted in a different order than required
Critical to other business units Access to damaged vehicles

Process

By the double-diamond converge/diverge appraoch, our team produced a wide range of prototypes to articulate our ideas to larger audience. It also provided several principles to reevalute the effectiveness of meditation at the early phase.

I mapped out the ideas about the problem space for internal alignment

Skateholder Analysis

To begin addressing the friction, we organized research into a stakeholder’s map. Here, we examined the relationship between photographers, Leica stores, and third-party retailers.

Observe and analyze how we bond differnt stakeholder with Leica M Series

Product Repositioning

We then envisioned how this app can help improve Leica M’s brand position in the marketplace and among its competitors.

Shift Leica M to the market that dominated by Nikon and Canon

SWOT Analysis

SWOT model (strengths, weaknesses, opportunities, and threats) was used to analyze Leica’s competencies and challenges in a more comprehensive way.

Journey frameworks for both customer and business

We created journey frameworks that visually illustrate an individual customer’s needs, the series of interactions that are necessary to fulfill those needs, and the resulting emotional states a customer experiences throughout the process.

Customer Focused Behaviour Journey

Business Needs Focused Journey

Value Propositions

Through using this app, customers can understand the unique benefits of the M System while being introduced to Leica’s vibrant community. Enthusiasts of Leica can explore different lenses and models and be inspired from the rich content of the M Magazine.

Reduce the friction encountered by potential customers who want to try before they buy, which may lead to more sales; Updated content from the M Magazine connects users to the Leica brand and encourages them to be a part of the Leica community.

Information Architecture

Visual Design

The design language used throughout our platform was inspired by Leica’s existing style which uses red, white, and black.We included handwritten stroke icons to represent the human touch of the photographer and to symbolize the fact that Leica M cameras and lenses are handcrafted. The overlapping of the Photo Stories pages act as a metaphor for flipping through the pages of a magazine.The calligraphy style of the button introduces the human element to the mechanical process of the Leica M system. Representing an organic but elegant aspect that can only be done by the precision of human hands.

Interaction Design

Swiping offers users the opportunity move through the app quickly to uncover additional information without a typical on-screen target to focus on. The action of swiping through stories from the side was inspired by the act of flipping through the pages of a magazine.

The ring  used to switch between different M System model is based on the focus ring tab, unique to analogue cameras. As the users rotates this ring from side to side the image of the camera gets blurry, representing a change in focus.

Physical or digital?

Early prototypes landed in utilizing physical devices like Amazon Alexa and Phillips Hue Light System.

Alexa, Raspberry Pie, Phillips Hue?

Deep dive to validate the problem space

We demoed our initial prototypes and tested with awesome folks from Telus Innovation Lab, Spaces, WeWork, Metalab, Accenture, SFU, CMPNY.

Pivot by understanding the constraints

By visiting the physical environment in the office we researched, we realized that physical setup requires more investment in maintaining and strict regulations. So we pivoted our solution into something ingenious that won't heavily rely on the physical environment.

Also, I captured an insight from the people we interviewed:

"I don't want to add extra time on mindfulness/meditation into my daily routine, it just takes too much effort."

That's why we pivoted to the Chrome Extension that recommends digestible micro mindfulness that adapts to people's daily routine.

User Journey Framework based on our pivoted idea

User Flow of the Chrome Extension Concept

Wireframes

Discovering the look and feel to match with the core values


Testing is the only way to support us iterate and polish our ideas. I was so excited to see multiple projectors projected a full cylinder of the huge space. It provides us the "wow" moment to move on with the direction that combines the real-world projection mapping with the virtual world inside the headset.

Brand pattern: Moiré
Projection Mapping
VR Lobby



During the development phase, we largely tested the headset experience with more than 40 people. We added break sessions to increase the comfort level during the overall 45 mins theatre experience. Motion sickness is improved by slowing down the focus point (The SIGGRAPH moiré pattern) in the virtual space.

It's time to wrap up our plan within a shared artifact: our journey map. This helped us communicate with all stakeholders to deliver a cohesive conference experience at the end.

Experience Journey Map

Start with confidence

Utilizing sound and motion to indicate that the 3D object is successfully placed.

Intuitive self-guided learning

Inspired by the automotive motif of orange and white pylons, estimators can simply follow the moving arrows and rings to guide them to the correct vantage point for documenting damage accurately and efficiently.

Locate yourself in the virtual space

Real-time top-down view allows users to navigate around  in the virtual world.

Perfect angle, perfect photos

With this alignment tool, users can pan back and forth, up and down, left and right to match the circles and understand the ideal shot.

Virtual tools for the real job

With the tool menu, estimators can have the virtual tools to practice the estimation process.

Combination of formative and summative feedback

During the experience, estimators can follow the real-time feedback to aware the progress and refine mistakes instantly. Summative feedback will support estimators to achieve the long-term learning object.
Formative Feedback
Real-time instruction, timer, guidance
Summative Feedback
Leaderboard, achievement, progress

Outcome

We successfully launched the Chrome Extension within 12 weeks of research, design and development. The extension was introduced to several local enterprises and startups, agency. We gained lots of fabulous feedback that inpirsed us with potential improvements to support employees' mental health.

Curated Meditation Journey

Soothing Breathing Exercises

Time-Based Recommendations

Progress Tracking and Daily Goal Setting

Philips Hue Light Integration

The whole thing was a great success with very positive feedback. Colleagues overheard hallway conversations with people recommending the VR Theatre to complete strangers.”

– Yangos, Creative Director at 2018 SIGGRAPH Computer Animation Festival
“The app was demonstrated to our North American Financial Services leadership, and we’re now in the process of taking the app to another client that wishes to up-skill their estimators.”  
   
— Senior Principal, Accenture Technology
“Classroom learning can be difficult. It’s nice to be able to walk around and physically go inside the vehicle. It’s like getting hands-on training.”

— New Estimator Trainee
“I can definitely see how an application like this will change how we approach training in the future.”  
   
— Estimator Trainer

Reflection

After the launch, even with lots of new features roadmapped, the team suffered from the bandwidth. Sadly, we have to postpone the the improvements. I'd love to keep working on this as my side project with more focus on marketing and mindfulness content in the future.

Three MDM Student Cohorts Work Together To Develop VR Theater at SIGGRAPH

Other Projects

Let me know if you want to talk about a potential collaboration.

Have a chat