Work      Info












Insa Mobile App Design


Team:
1 Product Designer/ Design Lead (Dae Young Kim),
2 Developers,
1 Graphic Designer
Product version: 0.0.0 - 0.6.0
Duration: Ongoing

Case Study | UX/Product Design | Mobile App


Summary


I have brought the product from its very early concept stage to its market launch. In the process, I have facilitated user studies, created prototypes, set design systems, delivered design justifications, and closely collaborated with the development team throughout the ongoing iterative process of designing the product.








What is Insa app?


(Note: The word “Insa” is a Korean word for greeting. )
Insa is a communication app designed to bring back human communication.

The app augments the interpersonal communication methods for those who are suffering from the lack/fear of human communication
and help them be heard & stay connected with their loved ones.

The app enables users to communicate better by:
  1. Providing fun conversation starters with which users can easily start the conversation about themselves and avoid repetitive conversations.
  2. Creating a simple method of mood sharing with which users can share as little as 10 seconds a day to share how they are.

My Role as a Product Designer/ Design Lead


  • Identified problem & opportunity space.
  • Start blue-sky thinking for the value that brings family members together.
  • Created UI/UX prototypes and iterations
  • Design & conduct user research via interviews, cultural probes, concept testing.
  • Design & conduct user tests via interviews, 5-second impression test, surveys.
  • Collaborate with developers to bring mockups to life.
  • Facilitate and lead QA sessions and organize reports.






Problem:
Modern loneliness

Technology has made us be connected more than ever, but we are alone more than ever.

1.

  • 41% of the Global population
  • 61% of the American adults
  • 79% of the Global Gen Z population
Feel lonely despite being more connected than ever in history due to social media like Tiktok, Instagram, etc.

2.

The increased screen time and amount of social media-based connections widened the reach of individual’s connections but decreased the amount & depth of real human interaction.


3.

Decreased real human interaction significantly increases the risk of psychological problems such as:
  • Low emotional stability
  • Depression
  • General anxiety







Understanding what daily human communication looks like

What are the problems with their current method of everyday conversations?

Insa team and I collected 500 surveys responses and conducted 9 interviews to find out what our potential user’s daily conversations with their close ones look like, and pinpoint their pain point.

I realized that many were feeling obligated to keep close contact with people close to them while they were stressed by lack of time in their daily schedule and personality difference.
[image: screenshots of sample survey questions]


“I don’t know what to talk about with my family.” - Peter C. (46. MA)

Having trouble coming up with a topic to talk about.
“We always talk about the same thing over and over again.” - Valerie H. (26. NJ)

Being exhausted from repetitive, unchanging conversation topics.







Solution:
Adding family & friend time into daily routines

After learning about the user’s viewpoints and needs, we asked ourselves:
“How might we change screen time to family & friend time?”
And started ideating the solutions to the problem. 


Guiding Questions


  1. How can we make daily conversations less repetitive and more interesting?

  2. How can we help users feel understood and safe to express their thoughts and emotion?

Outcomes


Daily Shares (Video messaging with guided topics)

Conversation topics are delivered to the users every day to bring more fun and insightful conversation between users and their connections. Giving users a specific topic to talk about helps them more clearly articulate themselves feel easier about sharing about themselves.

Daily Check-in (Mood posting)

Users can easily share their moods during their day through a very simple interaction of choosing a degree of their happiness and sharing with others. Simplifying the mood-sharing process removes unrelated small talk between users, and allows each user to pay more attention to how their connections are feeling.





Testing the solutions and our concepts 

What do the solutions bring to the users, and what are their reactions?

We conducted 2 weeks-long concept testings and conducted focus group interviews from different cultures and countries to find out how we can enhance their communication method.

From the study and the interviews, we found out that many participants showed positive reactions when family conversations were based on small specific topics.







Design Process:
Structuring the application

After confirming our concept, I started by giving more structure to the features



User flow


In solidifying the concept, I started by creating a user flow. I was able to sketch out the concept into a more tangible model where we could start seeing the structure of the app.
Here, I focused on
  • Understanding users’ thought process
  • Creating the simplest way to reach the user goals
  • Roughly Identify the interactions within the app



Creating a feature list


Based on the user flow, I started listing out every detail of each feature. The list included the dynamics within the app regarding what data should be collected from the users, and what contents should be delivered to the users.

To better follow up with each version update, I have separated each item into “As-is” (current version) and “To-be” (next version).






Prototyping & Implementation

With solidified concept and app structure, I created multiple versions of prototypes, bringing life to the concept.



Low-fi Prototypes


After the structure of the app was set, I made Low-fidelity prototypes to enable early visualization of each feature, and assess different options of screen design.

I sketched the elements on the screen which helped me more clearly map out the structure of the app and the rough visual hierarchy with the screen.

Design Justification
As the Check-In feature provides a degree of happiness from which the users will choose and share, option A was taken because it provided a clear affordance that users can slide or swipe to choose the right emotion they are feeling. 

As I did not want to burden the users to memorize the topic question while they are recording, it was important to have the topic question be clearly shown on the record screen. Also, so that the users can be aware of the remaining time of their video, I have added a progress indicator that visually show the users how much longer they can record. The original decision was option A but due to factors like screen real-estate, simpler interaction, and clearer indication of time, option A developed into option B.

Low-fi Prototype (Check-In)


Low-fi Prototype (Daily Share)




Design systems


Before creating High-fidelity prototype, I made the app’s design system. This was to bring a more cohesive aesthetic throughout the whole in-app ecosystem.

The document worked as a single source of components, patterns, and styles not only for designers but also for developers as a reference document.



Understanding UI Framework


In the process of building the initial Design system, I collaborated with the development team to choose the UI framework. 

Understanding the technical implementation allowed me to keep the balance between making customized elements and basing the design on presets for a faster, more agile implementation.

[image: screenshots of NativeBase.io documentation]

[image: Modal + pop up design of Insa]



High-fi Prototypes


In creating the High-fidelity prototype, I focused on including every detailed user interaction within each feature and representing the look and feel of the app. closest resemblance to the final design in terms of details and functionality.

This included not only ideal user interactions but also included possible user errors and small details such as keyboard interactions.



Feature: Check-In




Feature: Daily Share (As-is)






Iterative process

In taking a short video of oneself on a specific topic, the users need to know what they will talk about (topic), how long the video can be (duration), and how much time they have left (time). I realized that there are some UXUI improvements were needed.
Problem finding in the previous version
Some issues I have found in the previous version were:

  1. The design of the record button lacked the visual signifier as a ‘video’ record button, and the users were not familiar with the ‘tap and hold’ method of interaction.
  2. The previous ‘tap and hold’ interaction of the record button created a user-experience issue of the user's thumb covering the time tracker circle.
  3. The topic section was taking too much of the screen real-estate and the users were feeling cramped into a small frame.
Previous version
Improvements
Some changes I made in the latest version were:

  1. I have changed the color of the record button and its interaction to ‘toggle.’ On the‘ record,’ button changes shape into a rounded square. 
  2. I have changed the display style of the topics into captions with a semi-opaque text background.
  3. Made the record screen full-screen and added a counter.
Improved version






Checkpoints


Things that were in my mind when I was designing:  


  1. User-centered design
    Was the user’s viewpoint included from the beginning of the design process, and did the outcome address / fulfill the user’s needs?
  2. Intuitive design
  3. Does the design speak the users' language? Is each screen give enough affordances and a familiar signifier to easily follow the flow?
  4. Inclusive design
    Is the product designed to be used by people with visual impairment (color blindness), and those without tech-savviness?




The final design (As-is) 
 





 





︎       ︎      ︎      ︎




© 2020 copyright by Dae Young Kim