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 the 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.
What does it do?
Insa provides:
- Fun conversation starters with which users can easily start expressing themselves.
- Quick and easy 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
- 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
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
Solution:
Adding family & friend time into daily routines
“How might we change screen time to family & friend time?”
Understanding what daily human communication looks like
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]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.
User Problems:
“I don’t know what to talk about with my family.” - Peter C. (46. MA)
“We always talk about the same thing over and over again.” - Valerie H. (26. NJ)
- Users have trouble coming up with a topic to talk about.
- Not all conversations with family and friends are enjoyable.
- Not-so-enjoyable conversation topics are often repetitive, making users want to avoid communications.
- Users feel emotionally burdened at the obligatory small talks.
Goals:
- Expand the user’s communication routine
- Simplify the communication between close individuals
Guiding Questions
- How can we make daily conversations less repetitive and more interesting?
- How can we help users feel understood and safe to express their thoughts and emotion?
Concepts
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.
![]()
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 & Mockups
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: Check-in
Low-fi: Daily share![]()
Design systems
Before creating a 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 & Mockups
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.
Check-in
Feature Highlight 1: Check-in
Feature Highlight 2: Daily share
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). Through focus group user testing, I realized that improvements were needed.
Previous version
![]()
Problem found in the previous version
Problem found in the previous version
- 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.
- 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.
- The topic section was taking too much of the screen real-estate and the users were feeling cramped into a small frame.
Improved version
Improvements
- I have changed the color of the record button and its interaction to ‘toggle.’ On the‘ record,’ button changes shape into a rounded square.
- I have changed the display style of the topics into captions with a semi-opaque text background.
- Made the record screen full-screen and added a counter.
Checkpoints
Things that were in my mind when I was designing:
- 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? - Intuitive design Does the design speak the users' language? Is each screen give enough affordances and a familiar signifier to easily follow the flow?
- 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)
Bulletin >> (Check-in / Daily Share) >> Inbox (home)
Overall (organized by function)
