Go to

PROJECTS

Interesting stuff is being added. Stay tuned.

Designing for Situational Awareness: A study exploring the principles of HCI

By Ashwin Mohan, and 2 Others  .  8 min read  .  2021

The Objective

Organized as a four week design sprint, the goal of this study was to understand which HCI principles are important when designing a mission support dashboard for a CityOS. Since I was working on my design thesis in parallel, I decided to leverage this sprint to inform my thesis. We approached the sprint as a Co-Design exercise and narrowed our focus to a specific disaster situation that aligned well with my thesis.

Scope: Wildfire

Nearly every year, California experiences major wildfires that can be devastating to the environment and communities throughout the state. These fires tend to frequently and tragically displace California locals from their homes due to property destruction, poor air quality, extreme heat, and other consequences.

In 2020, more than two million acres have burned across the state of CA; which makes this a record year, surpassing 2018, according to the California Department of Forestry and Fire Protection. In the most recent records, it was found that about 200 Labor Day visitors to the Sierra National Forest had to be evacuated by helicopter after being trapped by the Creek Fire, and Governor Gavin Newsom declared a state of emergency in five counties. But, rescuing people is not an easy and straightforward task. That is why, we as a team believed designing for wildfire response was on opportunity.

Fire Fighting
Source: Wallpaper Cave

During our research, we realized that 'wildfire' as a scope is quite large, and complex to tackle within four weeks. Hence we intentionally set limits to the situation by addressing the parameters involved, like: geographical location, scale, stakeholders, phase of the disaster, and timeline. Next, we had to investigate and understand our target user.

MC Operator
Source: Genetec Inc

For Who?

Since the design sprint was about creating a mission support interface, it was critical to understand its user. However, we had to consider a faster approach given the timeframe. I suggested that we work backwards by outlining a persona for reference, so that our user research priorities are informed. This persona was only meant to filter what/ whom we researched, and not inform our insights. The persona we sketched: has normal and healthy vision, can read and write in English and the local language, is capable of speaking fluently, has at least four years of experience in operating mission systems or complex platforms, has two well-functioning hands, has used Windows OS, uses a smartphone, has played video games, and has a good sense of orientation.

We made sure to structure our user research in a way that focuses on HCI related issues. From our findings, we uncovered prominent themes, insights, and even potential opportunities beyond the scope of our Design Sprint. This helped us brainstorm right away.

User Research
Fig 1: Framing Questions for User Research

Brainstorming

Once we had enough research and insight to proceed forward, we identified key nuggets and brainstormed ideas to tackle them. Mapping the evidence also enabled us to understand the user's typical workflow, and the functions that would be required to accomplish tasks. Additionally, I facilitated the feature bucketing using the subject-knowledge I brought in from my thesis. This helped us reduce brainstorming time, and move to ideation quickly.

Brainstorming
Fig 2: Brainstorming

Ideation

I spearheaded ideation according to my plan for conducting a Co-Design workshop. Though my team members were not the target users of my thesis, they brought in knowledge from other disciplines which helped me advance my thesis thought process. I conducted a closed card sorting exercise where I asked my team mates to group features under larger functions, and sequence them into three phases. After a couple of back-and-forth investigation, this is the framework we finalized (Fig 3).

Ideation
Fig 3: Closed Card Sorting

While we were progressing towards design, I was not content with how we mapped our feature buckets. I felt that we faced a feature overload for each function. So, as a team, we agreed that we would workshop the issue using MoSCoW Analysis.

MoSCoW Analysis
Fig 4: MoSCoW Analysis

Strategy

In order to support Situational Awareness (SA), the design must facilitate the three stages of SA: perception, comprehension, and projection of the situation. A robust framework was needed to deliver support, consistently. Taking inspiration from designs around us, we pinned three principles: Visibility of the System and its state, Modularity, and Customization. When we worked on the drawing board, I realized that the scale and representation of these HCI principles needed some structure. I voiced for a design system to resolve this problem. However, we did not have enough time to build one, so we came up with a style outline, and looked for inspiration online that fit the criteria. The design system resolved only one half of the issue, but helped us define the two system states: Business as Usual Mode (BAU), and Situation Mode. (Fig 5). Understanding how to manage data overload using the design system was equally important. So we focused our efforts on the information architecture of the dashboard.

Business as Usual Mode (BAU Mode)
Situation Mode
Fig 5: Design Strategy

Information Architecture

The dashboard was structured to accommodate all our solutions under three functions: Situation Monitoring, City Management, and Communication. My role was to lead the design of the City Management Function, and support the design of the Communication Function. While we knew what functions were needed, we did not realize that these functions need to follow a mental model. So we conducted rapid tests, made quick storyboards, and looked at resources online to understand eye tracking and visual trajectories. We learned that the left hand side is usually communication; and we knew that the situation function takes the center view. Resolving this issue earlier on, informed our IA and allowed us to map features in a better fashion.

Base IA Map
Fig 6: Base IA Map
IA Map
Fig 6B: IA Map

Wireframing

We were halfway through the sprint by the time we started wireframing. Additionally, due to COVID, unanticipated challenges arose during our wireframing phase. So we moved fast without focusing much on details. I suggested that that we need to further simplify our functions' default state, so that we can dedicate the time to build a mid-fidelity prototype that is consistent across the three functions. Between information visibility and operability, we chose to discard the latter as we thought the user's primary function is usually to report to higher authority as opposed to take action own their own.

Wireframe
Fig 7: Low-Fi Wireframe

Design

CityOS
Fig 8: Mid- Fi Design

Once we finalized the wireframe, we quickly dived into the design. The final design showcases the situation mode - a dark UI mode layered by highlighted modules. My design, as mentioned earlier, was the City Management window(right).

City Management Window: Structure

The structure of the city management window follows the golden ratio so as to balance visibility and priority. The most important module within this window is the Decision Coordination System positioned in the lower left, while the most used module that requires maximum visibility is the Map. Other modules needed for city management are: Additionally, the organization of these modules followed a specific workflow.

  • Display functions & preferences
  • Add - Ons
  • Situation Timer
  • Social Media Trend
  • AQI Reader
  • Resource Module
  • Topographical Module
  • Resource Manager Module

Additionally, the organization of these modules followed a specific workflow.

Window Structure
Fig 9: City Management Window Structure

City Management Module: HCI Principles

The HCI principles guiding the design of the dashboard are mapped below (Fig 10). We prioritized principles based on what each component needed to fulfill. Interactive components like buttons needed to follow affordance and mapping, whereas informational components like Decision Coordination System needed to follow a sense of Gestalt symmetry so as to communicate incoming and outgoing commands.

HCI principles
Fig 10: HCI Principles

Usability Testing

The last leg of the design phase was dedicated towards Usability Testing. We designed tasks to test the three stages of SA: perception, comprehension, and projection. Due to time limitations, we were only able to conduct seven tests, of which four were organized by me. These were the questions we wanted answer at the end of our user test(s).

Perception

Does the user know what they should pay attention to?

Comprehension

Does the user understand what they are seeing, and its implications?

Projection

Is the user able to connect information clues and make a confident decision?

What is the user's emotional response, before and after the test?

Results

The results indicated opportunities for improvement across all three stages of SA.

First Read (L1)

Users successfully identify the function of the three windows.

Users clearly notice that a situation is in play.

Users identify which features are in active state.

Second Read (L2)

Red elements were given attention.

Users automatically think red means 'danger'.

Confusion

Terminologies are not understood by all users.

Some icons are not familiar to users.

User dont understand how to use the quick actions module, and are unsure of what to expect.

Users don't know how to evaluate decisions.

What We Learned

  • User of color is really effective for avoiding data overload or to enhance glanceability.
  • Chunking information is good when there is alot of things to take at once.
  • Icons are good for glancing, however, icons require familiarity and can cause confusion if the context is not clear.
  • Predicting how the user might act and providing suggestions accordingly is good as it frees up cognitive overload, however, users also need to have control and flexibility to go off-script.
Colors seem to work well for Glanceability, but poorly when data is clustered.

Designing for Situational Awareness: A study exploring the principles of HCI

By Ashwin Mohan, and 2 Others  .  10 min read  .  2020

COVID-19 had each and everyone of us trapped within the walls of our rooms. As we adapted to the change in lifestyle and work, new and unfamiliar challenges disrupted workflows. In my case, I found it very challenging to conduct remote user testing and validation. So I did some practices studies at home.

Brief I

Design and develop a series of tests that measure a participant's ability to enter a state of "flow". Also, look for ways to introduce distractions and affective computing to understand how it affects user flow.

Flow State
Source: Ted Ideas

I decided to create two tests and gamify them so as to create a sense of reward for taking the test. Both tests are based on known game models. Since the goal was about usability, the were know wireframes or design explorations done. The order in which user testing was conducted is: Test 1 followed by Test 2.

Participants

Participants
Participants
Pro-Snooker Game
Fig 1: Pro-Snooker Game

Test I

Pro-snooker is a math based click-game designed with various patterns and known mental models. The goal of the game is to test users response speed, accuracy, and flow threshold. Flow threshold in this test is defined as both: the time it takes for users to enter a state of flow, and how long they can sustain it.

The game is inspired by mobile Snooker games, and the usability studies were conducted virtually via third-party applications.

Metrics

The study took into consideration, two types of data: In-game metrics, and post completion survey

In Game Metrics

  • Time taken to complete the test
  • Accuracy
  • Time taken for each answer

Survey Questions

  • How difficult was the game?
  • What stage did you feel highly focused?
  • What factors made the game difficult to play?
  • What factors made the game easy to play?
Game States
Fig 2: In-game states

Insights & Takeaways

In game results revealed that participants were about 21 seconds slower than the ideal speed. Furthermore, not every participant achieved a perfect score. Wrong answers usually occurred when the options where odd multiples of five. Some participants revealed that color indicators after a wrong answer made them more nervous. This was visible in the response time per answer as well. While many subsequent right answers were fast, response time after a wrong answer was slow. As a result, the average response time per answer was a second longer than ideal speed.

Average Completion Speed

1:37:83

Ideal Completion Speed (Flow)

1:16:09

Average Response Time/ answer

0:04:11

Ideal Response Time/ answer

0:03:29

Average Score

22/23

Survey Questions revealed that the game was difficult for many and most responders felt that they were able to focus only after nine levels. The most prominent reasons according the responders were that complex instructions and visual disruptions after a wrong answer. What I learned from these results was that the affective computing mechanisms that I intentionally plugged-in, succeeded in influencing user flow.

Fig 3: Test Results

Prototype Demo

What are Those Game
Fig 1: What are Those Game

Test II

'What are those' is a click-game based on working memory. The goal of the game is to test users response speed, accuracy, and flow threshold. Flow threshold in this test is defined as both: the time it takes for users to enter a state of flow, and how long they can sustain it.

The game is inspired by traditional arcade games, and the usability studies were conducted virtually via third-party applications.

Metrics

The study took into consideration, two types of data: In-game metrics, and post completion survey.

In Game Metrics

  • Time taken to complete the test
  • Accuracy
  • Time taken for each answer
  • Levels Passed

Survey Questions

  • How difficult was the game?
  • What stage did you feel highly focused?
  • What factors made the game difficult to play?
  • What factors made the game easy to play?
Game States
Fig 2: In-game states

Insights & Takeaways

In game results clearly indicated that participants were a lot slower in the second test. The average completion speed was 32 seconds slower than the ideal speed; and 11 seconds slower than Test 1. Interestingly, respondents only stalled in few questions, which was the cause for increased average per answer. Time to respond peaked usually in the third and fourth answer. I believe this was because the working memory reached a point of cognitive overload. The results also indicated a difficulty in completing the test, with the average score being four points below the total.

Average Completion Speed

1:14:16

Ideal Completion Speed (Flow)

00:42:06

Average Response Time/ answer

0:03:15

Ideal Response Time/ answer

0:01:01

Average Score

11/15

Survey Questions revealed that the game was difficult for many, clearly because of cognitive overload. Furthermore, some felt that the interface was very light and painful to the eye. On the other hand, the size of thumbnails seemed to have helped some participants, match. What I learned from this test is that, the instructions and other distractions played little role in influencing flow. This could also mean that participant's flow intensity was more than the previous test.

Brief II

Conduct a task analysis for cooking and report pain points and insights, as well as recommendations for a better user experience. Also, identify which pain points directly impact safety, security, or health of the user.

Home Kitchen
Fig 1: Kitchen

The kitchen occupies a 180sqft area as it serves for a huge family. It is situated in the ground floor of the house while Meera's room is on the first floor. The kitchen can handle two cooks at any given time.

User

Meet Meera! She is a South Indian homemaker who belongs to a joint family of eight. They live in a metropolitan city called Chennai, India. Meera is well educated and deeply rooted to the traditions that grew up with. She is 70 years old with a history off Rheumatoid Arthritis (RA) and wears spectacles for better vision; and is 5.2 ft tall. The family she belongs to, is well established in society. Interestingly, they had just renovated their kitchen for better workflow. Meera, who is passionate about cooking and feeding her family uses the kitchen at least two times a day. She is well adapted to the conditions of Indian cooking which that includes: touching fine grained spices, tolerating onion tears, kitchen heat aside from hot weathers and family demands. In spite of arthritis, she has trained her attitude and behaviors to project will power always.

Fig 2: Meera

Task Scape

The task scape lays out the key stages of food preparation according to Meera.

Task Scape
Fig 3: Task Scape

Going to Kitchen

Observation

Climbing the stairs between floors for the purpose of cooking is difficult due to RA. Any wrong footing can severely injure Meera.

Recommendation

Given the Meera's attitude towards life, she prefers to climb but in order to prevent injury, longer threads with smaller risers could greatly ease her climb. Additionally better handrail grips could aid.

Finding Utensils

Observation

Meera has to bend a little to see clearly since she wears spectacles; aside from the fact that the shelves are dark inside and utensils cannot be easily spotted.

Recommendation

Adding diffuse lights inside the shelves may not only help Meera but also anyone who intends to find kitchen utensils. It may required sensors to save energy when shelves are not open.

Observation

Obtaining flat products from shelves is tricky since Meera’s hands cannot afford to hold them securely. She first has to carefully drag it out and up, then she uses her left hand for support.

Recommendation

Though this board has a handle, it needs to be bigger in order to offer adequate affordance for users like Meera who face RA can grasp it securely.

Procuring Ingredients

Observation

As you can see, Meera has dropped some flour due to her lack of control and poor vision; in spite of wearing spectacles.

Recommendation

The flour package could be transparent.

Observation

Holding filled utensils is difficult and stressful given the arthritis in the hands.

Recommendation

Solutions depend on the type of content in the utensil. In this case, removing the lips of the utensil and adding more surface texture would allow Meera to grip easier.

Observation

Due to design of the containers, Meera finds it difficult to open the salt box. In this case, Meera’s conceptual model trumps the constraints as she knows that if she presses the center hard enough, she’ll be able to pull out the lid.

Recommendation

Containers with clipper lids is a better solution.

Observation

Meera finds it difficult to see and reach the tomatoes since her hand won't stretch due to arthritis in her elbow joint. Moreover certain shelves are not designed to offer discoverability of products. Meera might also bang her head while searching.

Recommendation

Having sliding draws on certain shelves of the refrigerator will help Meera overcome her difficulty. Additionally, the handles must be padded.

Observation

Meera finds it difficult to hold vegetables in hand as her fingers cannot fold effectively. She also dropped the onion right after the photo.

Recommendation

Wearing an apron with clean vegetable pockets can allow Meera to free her hands if needed. The apron must be neck hanging and not strap-on or tie-able as Meera cannot perform those bootstrapping procedures given her arthritis, vision problems and age.

Observation

The design of door handle and the broken nature of the fridge creates ergonomic issues for Meera during such situations. The door does not align with the pressure button so Meera has to wiggle it in place each time; sometimes hurting herself.

Recommendation

Door handle needs to be thinner in width. Better sensor mechanism (physical or digital) that is durable to the pull and push of the door is needed.

Preparation

Observation

Meera doesn't find much difficulty in cutting as she has adapted to it. Occasionally she cuts her hand due to poor vision.

Recommendation

Having safety finger caps slotted (mapped) into the cutting board can greatly help anyone including Meera to protect their fingers at all cost.

Cooking

Observation

The design of the traditional lighter requires some consistent force because the button is very thick. This is slightly difficult for Meera given her arthritis in her hand.

Recommendation

Lighters with thinner button extrudes or no lighters at all can avoid this inconvenience for Meera.

Storage

Observation

While using multiple vessels, Meera sometimes burns her arm and her reflexes are slow; she cannot wiggle her hands easily due to RA

Recommendation

A possible solution could be vertically layered cooktops where back rows are on a higher slab. This can prevent the arm from coming in contact with front row vessels.

Observation

Due to weight of the vessel including its content, Meera finds it difficult to carry it by the handle and pushes her back behind to offset weight; aside from using two hands. This adds strain to her hand.

Recommendation

Age becomes a great barrier to lift weight in any way. To some extent, wearing high heat and flame resistant mittens may give Meera an option to place her left hand on the body of the vessel for support.

Observation

The cupboard behind her is open and is situated at the height of her eye level. Circumstances like this are dangerous for Meera who already has poor vision, slow reflexes due to RA. Moreover the affordances of the door handle are misguiding the mental model.

Recommendation

Having a tilt up door (as a mental model) to match the affordance may be considered as a solution.

Clean-Up

Observation

The cleaning up requires a lot of energy from Meera as she has to carry many vessels which is difficult given her RA.

Recommendation

Mapping the sink closer to the in-built hob may reduce the distance Meera has to walk from it to sink.

  • Going to the Kitchen
  • Finding Utensils
  • Procuring Ingredients
  • Preparation
  • Cooking
  • Storage
  • Clean-Up

Insights & Takeaways

  • It requires strong will power and mental strength to continue cooking at the age of 70 with RA.
  • Weight and vulnerability due to rigid limbs (related to RA) are the two biggest problems for Meera.
  • Gripping to objects follows the above mentioned problems.
  • The shelves are specifically placed to meet Meera’s height but at the same time pose dangers as well. Additionally, all the heavy vessels are shelved at the first draws so that Meera does not have to lift it with pain.
  • Overall the kitchen as a space should be more compact so that Meera doesn't have to walk much with weight between counters. Shelves must allow for discoverability. 
Users who are physically different (challenged), bring a lot of will power to tackle usability challenges.

Designing for Situational Awareness: A study exploring the principles of HCI

By Ashwin Mohan, and 3 Others  .  8 min read  .  2020

This case study was part of my business and economics minor in Art Center College of Design. In a span for four weeks, our team consisting of four, assumed identity of a famous company and investigated its future potential. My role predominantly was to understand the industry's evolution, build a business narrative, design the presentation, and pitch to the jury.

Company

PlayStation is a video gaming brand created by Sony Interactive Entertainment (SIE), which is a division of Sony. Headquartered in San Mateo, California, SIE is a wholly-owned subsidiary of Sony Corporation and has regional headquarters in London and Tokyo.

Brand
Fig 1: Brand

The PlayStation was created by Ken Kutaragi, who worked for Sony Digital Research Labs. He gained reputation through the success of his projects like LCD, Digital Camera, etc. During the 80's, Ken saw a potential growth in the video game industry and secretly developed a sound chip for a gaming device. This was the beginning of Ken's vision, which would later turned out to be a fully built console called PlayStation One; released in 1994. Couple of years later, Ken was appointed as the CEO of Sony Interactive, in America.

Industry

The gaming industry has a rich history, filled with moments that defined the course of human progress. Interestingly, it had a very different reputation back then, in comparison to what it holds today. Conceptualized as instructional tools, games were used to demonstrate capabilities, strategies, and ideas. However, in the 70s games gained significant demand as a commercial product.

PlayStation
Fig 2: Industry

What PlayStation Sells

Products are a manifestation of a great idea. The PS4, which is the latest of the PlayStation series inspires players to imagine beyond their reality while delivering delightful and interactive gaming experiences.

USP
Fig 3: PlayStation 4 Motto

Value Chain

Our approach to this case study was to understand PlayStation's structure before examining the gaming market. Moreover, it was my suggestion that mapping PlayStation's value chain could help us understand the company's strengths and weaknesses.

Market Overview

Looking at the data between 2016 to 2019, Sony i.e PlayStation has dominated the market share. However, in terms of product innovation to sales, Nintendo has demonstrated greater leaps. We as a team of designers took the stance that product innovation is going to play a crucial role in next era of gaming.

Market Overview
Fig 4: Market Overview

Industry Evolution

The gaming industry is evolving exponentially. With the increase of personal device variants like VR, smartwatch, AR, and Tablets, technological ubiquity is becoming evident. Through my research, I noticed that new forms of social networking were emerging from gaming. Since any network component has a high resilience value for network effects (Nfx), I inferred that this characteristic is a viable foundation for PlayStation's future.

Industry Evoluation
Fig 5: Industry Evolution

VR Prospects

To move with the industry, we examined the key influencers. As you see in Fig 6, mobile gaming is more appealing to consumers than dedicated consoles. PlayStation, which is known for its fixed console, needs to adapt and change strategy. Additionally, there was also a growing demand for VR & AR, and Sony was already leading sales in its nascent stage.

VR Prospects
Fig 6: VR Prospects

White Space

Upon identifying the key drivers of the future of gaming, it became quite obvious that we had to find a niche that connects mobile and VR/AR. We also projected a time frame that PlayStation would need, to transform.

White Space
Fig 7: White Space

S.W.O.T

In order to devise a viable strategy, I suggested that we start from PlayStation's SWOT analysis. This would enable to us to brainstorm about areas that are relevant. To that extent, the strong factors delineated below indicated advantage in the innovation front. However, it requires PlayStation to let go of compatibility gates and find other triggers for customer acquisition. While our opportunities are evident, we are threatened for not investing adequately on personal devices and service.

SWOT
Fig 8: S.W.O.T

Next Business Strategy

After analysis and synthesis, we recommended that a high performance pocket console that offers immersive and realistic gaming experience through VR would be promising for PlayStation. At a low-premium price point, quick product refresh rate, and a very low subscription price, we believe the product would attract new and existing customers in small cycles.

Business Model Canvas
Fig 9: Business Model Canvas

Introducing...

For Whom?

While games are for everybody, the PS VR Now will be designed to take pro-gaming to another level, and also inspire young kids to never stop dreaming.

Target User
Fig 10: Target Users(s)

Our Promise

Our promise is to bring your imagination to life and teleport you inside.

Open to Work

I'd love to hear from you!

Ask me questions, give feedback, recommend a book, or just say hi.

Fields marked with an asterisk (*) are required.

By clicking submit, you authorize the website owner to store the information provided above.

Thank you for reaching out! I've received your message
Oops! Something went wrong while submitting the form.