OEPN TO WORK

Kids at Home

End-to-end product design
An affordable physical and digital subscription service to support young children's active learning at home during and beyond the COVID-19 pandemic.
People
Me + 3 other designers
Tools
Figma
Vue.js
Figma
Balsamiq
Illustrator
FCPX
Adobe XD
Figma
Adobe Experience Manager
Sketch
Balsamiq
Zeplin
Sketch
XMind
Balsamiq, Figma, Sketch, Notion
Figma
Miro
Illustrator
Duration
Sep - Dec 2020
Expertise
Stakeholder Management
Research & Prioritization
UX/UI/Prototyping
Design System
Feature Definition
Research & Testing
UX/UI/Prototyping
Design System
UX Advocacy and Education
Accessibility Design
System Design
Requirements Gathering
User Flows
Interaction Design
Project Management
Documentation and Team Communication
UX Audit
First Principles
Wireframes
Coordination
User Research
Concept Development
Interaction Design
User Testing
Impact Review
Literature Review
Survey
Diary Study
Information Architecture
Web Design

Ovis

During my internship at ForwardX Robotics in summer 2018, I led user research for Ovis, an intelligent suitcase that follows alongside, to understand the behavior patterns, goals and characteristics of our users. I coordinated more than 30 in-depth interviews with early adopters around the globe, and analyzed survey results as well as advertising data. In the end, my research findings and suggestions were applied to branding, marketing campaigns, product strategy & design. Ovis also became the most funded AI-suitcase in crowdfunding history with 1M+ raised over 60 days of campaign.

A gif of Ovis in action

While some specifics are under NDA, I can share that I came out as a much better interviewer :) Since this was my first time doing research in an applied setting, I quickly learned that the best way to add value was to provide actionable insights. Cross-functional communication was also key to driving impact, because you never know who might be interested in your research!

Badminton Buddy

A versatile, programmable shuttlecock launching system that can provide affordable and high-quality training for badminton players.

A gif of Badminton Buddy in actionCAD for Badminton Buddy

I primarily designed and built out the interface to control the hardware. The screen mock below is concept work and the actual interface was created with Processing + Arduino. I also contributed to requirements gathering and rapid prototyping.

Mobile interface for controlling badminton buddy

Mobile interface for a badminton birdie launcher

Graphic design

I'm a strong believer of the concept of the T-shaped designer, and for the last two years I've been working on freelance projects to better my visual design skills. I co-founded a design group with 30k followers on the Chinese social media platform Weibo today, and have worked with over 50 clients across different media.

Compilation of freelance design work

Filmmaking

Much like UX design, filmmaking is the art of using different tools to weave together a compelling story and create emotional connections with an audience. I started editing videos in high school, and got into the entire filmmaking process through Visual Storytelling courses at Cornell PMA. Out of all the student productions I've worked on, my favorite is Scripted, a short film for which I was the Director of Photography. Check out its lookbook here.

Film set

P.S. contact me to see film!

Team
Me + 3 other designers
Tools
This is some text inside of a div block.
Timeline
Sep - Dec 2020
My Role
This is some text inside of a div block.
Oh look I also took this photo.
Playground closed due to COVID-19

'Tis the season for better reviews.

Background

Reviews are among the top elements customers pay attention to when considering a product, and this is especially true for retailers like Macy’s and Bloomingdale’s, as they feature a lot of brands in their vast product pool. The importance of reviews, underscored by several UXR studies conducted by the digital team, prompted the formation of a new product pod, where I joined as the UX Designer.

At a high level, the stars seemed aligned for a significant opportunity to rethink reviews:

  • CVR 2x
  • Bloomingdale's still uses the hosted solution of our third-party reviews vendor, Bazaarvoice, meaning we are stuck with their out-of-the-box styles. As a more luxury retailer, the lack of control over the UX/UI has been a longstanding pain point for their team.
  • Both Macy’s and Bloomingdale’s are scheduled to migrate to using Vue.js in 2024. This technical replatforming will enable a more modern, healthier tech stack. By aligning to a dual-brand solution, it will also reduce development costs.
Comic illustrating pain points at live events

Throughout most of 2023, I led the design of a long-awaited, multi-quarter replatform and redesign of reviews through its various phases.

Baseline review

After analyzing the current production experiences on both sites, it became apparent that the pages are significantly out of sync, with neither being the clear winner. We also wanted to avoid imposing a solution on a brand solely for the sake of parity, as this could alienate stakeholders. Therefore, we decided that the best approach is to reimagine reviews within the project's resources, and aimed to create a 'best-of-both-worlds' experience on the Vue platform.

Research

information hierarchy

Since each site had varying features and there were many different review variations based on the product category, we wanted to get a clearer picture of how shoppers use these features and reviews when they're making a purchase. So, we teamed up with UXR to understand the goals and intent behind reviews engagement. Through  stack-ranking surveys and shop-along sessions, we uncovered insights that helped us nail down the key features and how to arrange them, and got a real feel for how customers typically interact with reviews on our sites.

We also learned that users approach reviews similarly across both brands, which validated our direction to aim for a dual-brand solution, ultimately saving on development costs.

Screenshot of stack ranking results
Stack ranking results on the helpfulness of review features

User Goals

Reading reviews involves a mix of quickly scanning and focused reading to form a point of view on expectation versus reality, as well as to find reasons to overcome their hesitation to commit.

Users' top goals are to understand the fit and how items are in real life (color, texture, feel, and other material qualities).

Highlights

summary snapshot

Lead with average ratings and distribution to help users to get a quick snapshot understanding of the reviews

'Write a Review' is minimized as very few reviews came in through this entry point

Attribute sliders are ranked as the top 3 features for both brands and help answers questions about fit, feel, etc.

The biggest challenge with session display is finding a way to structure all the information for simple usability. A grid view is common for larger screen displays, but it doesn't translate well on mobile especially when we support a lot of beer festivals where attendees are likely to be tipsy. In the end, I used sticky scrolling to give the page a vertical hierarchy and greatly streamline the viewing experience for users. The sticky header disappears from view when not needed, and date information is automatically updated based on scroll position.

Here's what all that looks like in motion.



--------
Hi! You'll notice that this case study is a work in progress. Some of the modules I've worked on are currently under development. In the mean time, please contact me for more details. 

Upped Attendee app is a new mobile application in our SaaS product suite that digitizes in-person events to upgrade the event experience for attendees while unlocking engagement and analytics for event planners. I led its overall visual and interaction design.

Background

It might feel a little surreal at your first post-pandemic in-person event when you are surrouned by thousands of people, but music festivals, conferences, and comic cons will eventually make their way back. Although, it might also be the perfect time to modernize the event experience – no more wristbands and underestimating bathroom wait times, anyone?

Upped Events offers a multi-platform SaaS solution for event experience management. Being an early-stage startup, the territories have yet to be charted, and I had the opportunity to lead the overall visual and interaction design for the Event Attendee app.

Comic illustrating pain points at live events
You've probably been to a concert, conference, or other live event and seen it as well.

From a business perspective, adding a mobile app for event-goers to our product suite means that we'll be able to help event planners connect with their attendees better. Through our Web Portal, they can easily build a customized digital experience for attendees with no code. This is particularly suited to smaller events (i.e. not Coachella), which is a traditionally underserved market.

Map feature in Web Portal

Event planners love the interactive mapping ability of the Web Portal. In the next section, I'll talk about how I translated the information into the Attendee App. Throughout the project, part of my work is to understand the capabilities and limitations of our existing platform, and I'm currently designing new features for the Web Portal, including the CMS for the Attendee App.

Highlights

Map

“Where is ...”
“I walked past ...”
“How do I ...”


After talking to multiple people about their past experiences at events, I learned that maps, digital or physical, are most helpful when they allow users to navigate the event, plan their experience, and find more information about a specific location.
The in-app map supports these goals through pathing, search capabilities, and interactive cards that show relevant information and actions associated with a place.

When designing location cards, a vertical list view was initially selected due to its familiarity. However, upon further user testing, I uncovered that those who preferred the vertical list had a different mental model and were more interested in the details of the locations. In other words, what they were trying to achieve would be better served through our in-app ordering/shopping/scheduling features. On the contrary, people who preferred a horizontal list tended to make heavy use of the map.

After validating my hypothesis with more tests, we decided to use a horizontal scrolling list for places so that maximum map area is preserved for attendees who rely on it.

Exploring interaction patterns for location cards

In addition, we separated locations into interactive ones (food, stage, etc.) that can host activities and static ones (bathroom, info, etc.) that can't. I used the same UI pattern to ensure a consistent navigation experience.

Accounting for different types of places at an event

Schedule

Schedule makes it easy for attendees to view the event agenda and session details before or during the event. They can also favorite sessions or create their own personal lineup. Events can get hectic! To make sure attendees don't miss out on their favorite shows, we send out notifications for sessions on their schedule and highlight a change in location when they might need to get to different stages in a short time.

The biggest challenge with session display is finding a way to structure all the information for simple usability. A grid view is common for larger screen displays, but it doesn't translate well on mobile especially when we support a lot of beer festivals where attendees are likely to be tipsy. In the end, I used sticky scrolling to give the page a vertical hierarchy and greatly streamline the viewing experience for users. The sticky header disappears from view when not needed, and date information is automatically updated based on scroll position.

Here's what all that looks like in motion.

Throughout the project, I was heavily involved in product discussions and helped the team come up with and prioritize feature sets. For example, I used wireframes here to turn course-grained user stories into a more defined idea of the final solution.

Wireframes for the schedule feature



--------
Hi! You'll notice that this case study is a work in progress. Some of the modules I've worked on are currently under development. In the mean time, please contact me for more details. 

I helped the Bloomingdale's creative team rethink and build a complete library of responsive, accessible, and modern marketing components.

Background

When I joined Macy's, the first thing I noticed was that the image resolution on our websites wasn't great - in fact, the marketing and sales banners are really just static images with flattened copy. This creates a few critical issues:

A promotional banner sitting at the top of Bloomingdales.com :(

1. Text is not recognizable by most technology including assistive devices and programs
2. Image has to be compressed and often appears blurry because it's not modularized
3. Text becomes illegible as it scales down with the browser width
4. It's often not clear when hit areas lead to

A few months in, I was excited to hear that we (as in both Macy's and Bloomingdale's) are transitioning to Adobe Experience Manager ("AEM"), a different CMS that has many promising features but most importantly would give us the ability to use live text in marketing assets. However, challenge ensued as creatives would need to deliver their entire set of marketing components in a short period of time to an external dev team that's then going to build these components in AEM. And as the creative team responsible for marketing content dived into the task, it started to become clear that a lot of additional consideration regarding accessibility and responsiveness need to be given to the AEM components. That's when I was pulled into the project to help the Bloomingdale's side of things.

Comic illustrating pain points at live events
A conversation between UX and Creative Marketing that might or might not have happened.

First Meeting

Map

“Where is ...”
“I walked past ...”
“How do I ...”


After talking to multiple people about their past experiences at events, I learned that maps, digital or physical, are most helpful when they allow users to navigate the event, plan their experience, and find more information about a specific location.
The in-app map supports these goals through pathing, search capabilities, and interactive cards that show relevant information and actions associated with a place.

When designing location cards, a vertical list view was initially selected due to its familiarity. However, upon further user testing, I uncovered that those who preferred the vertical list had a different mental model and were more interested in the details of the locations. In other words, what they were trying to achieve would be better served through our in-app ordering/shopping/scheduling features. On the contrary, people who preferred a horizontal list tended to make heavy use of the map.

After validating my hypothesis with more tests, we decided to use a horizontal scrolling list for places so that maximum map area is preserved for attendees who rely on it.

Exploring interaction patterns for location cards

In addition, we separated locations into interactive ones (food, stage, etc.) that can host activities and static ones (bathroom, info, etc.) that can't. I used the same UI pattern to ensure a consistent navigation experience.

Accounting for different types of places at an event

Schedule

Schedule makes it easy for attendees to view the event agenda and session details before or during the event. They can also favorite sessions or create their own personal lineup. Events can get hectic! To make sure attendees don't miss out on their favorite shows, we send out notifications for sessions on their schedule and highlight a change in location when they might need to get to different stages in a short time.

The biggest challenge with session display is finding a way to structure all the information for simple usability. A grid view is common for larger screen displays, but it doesn't translate well on mobile especially when we support a lot of beer festivals where attendees are likely to be tipsy. In the end, I used sticky scrolling to give the page a vertical hierarchy and greatly streamline the viewing experience for users. The sticky header disappears from view when not needed, and date information is automatically updated based on scroll position.

Here's what all that looks like in motion.

Throughout the project, I was heavily involved in product discussions and helped the team come up with and prioritize feature sets. For example, I used wireframes here to turn course-grained user stories into a more defined idea of the final solution.

Wireframes for the schedule feature



--------
Hi! You'll notice that this case study is a work in progress. Some of the modules I've worked on are currently under development. In the mean time, please contact me for more details. 

In 2019, Himalaya launched VIP Plus in Japan, a new e-commerce plan that lets listeners subscribe to groups of audio content at once. As a product design and management intern on the Monetization team, I designed the end-to-end subscription experience for the new plan.

CASE STUDY COMING SOON

VISIT WEBSITE

Background

In 2019, 35% of U.S. workers freelanced. New technologies have made it easier for individuals to promote their work and forgo a traditional role at a corporation for freelance. With the uncertain future given the COVID-19 pandemic, online freelancing is increasingly valuable.

While the independent workforce has drawn lots of attention from scholars and organizations, the student creative freelancer community remain mostly untapped. Our team wanted to understand the freelancing experience for student creatives with the goal of making better-informed design decisions to support their journey.

Research

literature review

As existing research on our target group is scarce, we began our research by reviewing literature on freelancers in general. We learned that despite the freedoms afforded via freelance work, freelancers face a variety of challenges in their independent professions that threaten their justifications to self-employ, such as social bias, struggles with financial stability, a lack of control and flexibility, and a general absence of support systems to help them navigate the challenges. Balancing these challenges can be especially difficult for students, who face additional hardships related to their schoolwork and schedules.

The quest for an accessible way to restore young children's active learning during the pandemic.

What's the problem?

Due to COVID-19, many children (~220M at one point) have been confined to their homes and deprived of simple, day-to-day opportunities to learn and develop. Maintaining educational quality through online learning has proved to be challenging, and research shows that children are more susceptible to both physical and psychological effects than adults after experiencing a pandemic.

At the same time, parents are left with full-time child care in addition to full-time work as schools and daycare centers shut down nationwide. Even worse, these issues are exacerbated by socioeconomic differences. Lower-income parents who must work during the pandemic can no longer solely depend on public schooling for their child care needs, and the financial strain resulting from the pandemic can add to the stress experienced by the whole family. A parent I interviewed remarked, “It’s my responsibility that my kids are learning, being cared for...we cannot simultaneously watch our kids and do work. We have to choose.“

Photo by Mick Haupt, who very fittingly captioned it: Oh, the typical day at home with toys everywhere and parents on the brink of insanity during stay at home order.

Doing our research

As a team of non-parents, we familiarized ourselves with the space by reading up on related literature and doing a competitive analysis. The current offerings range from COVID-19 wellness apps to privately arranged learning pods (aka pandemic pods), none of which fully address the concerns of low-socioeconomic families with younger children.

Initial competitive analysis
Initial competitive analysis examining current offerings.

From there, we began interviewing school teachers and parents of elementary school children to learn more about their life during the pandemic. We found a chaotic scene.

Key user needs

Pain points of parents:
Work-life balance
Children's holistic education
Child care with limited resources
Paint points of children:
Engaged learning
Off screen time
Social interaction/active play

core insights

Then, we talked to two Cornell professors to understand how the COVID-19 situation might affect children and their parents. Special thanks to Professor Tamar Kushnir, director of the Early Childhood Cognition Laboratory, and Professor Gary Evans, an environmental and developmental psychologist for serving as subject matter experts!

Socialization and engaging in active learning with the environment is imperative for child development.
Staying at home due to COVID-19 can disrupt the structure and routine of children.
Parents should create diversity of experiences with what is available at home.
Piecing together our findings, we asked:

How might we create active learning environments for children in low-income families during the pandemic?

Ideation

design goals

First, we articulated a few design goals that acted as guiding principles for this project. Our design should ...

Be accessible to low-income families and users of all ages.
Support child development in the new environment and lifestyle that has resulted from the pandemic.
Empower parents by alleviating the stress that comes with managing both their work and child care.

Here's some process work from a ~pretty~ intensive brainstorming session.

Ideation board with 100 ideas

100 ideas, literally.

Storyboards!

With the design goals in mind, we began sketching out some of the prioritized ideas to provide more context and establish common ground for the team. Because of its relative low-cost and least dependence on advanced technology that our target user might not have access to, my idea of a child workspace kit was chosen as our first design concept.

Storyboard for a child workspace kit

Child Workspace Kit: creating a personal space for under-resourced children with affordable materials

Since children from low-resourced households often don't have a place of them own, a box full of materials to set up a designated child workspace would be conducive to an active learning environment, but we quickly learned that it wasn't enough. How might we keep children engaged with this newfound setup? How might we create equitable access to active learning beyond the pandemic? Out of our ambition to support child development and alleviate parental stress in the long run, Kids at Home was born.

Solution

Kids at Home is an affordable subscription service that hopes to support child development at home by providing physical materials to establish a child workspace, weekly activities to encourage active learning and play, and a supplemental app for more activities using household items.

Kids at Home Logo
Illustration of the experience journey

Kids at Home User Journey

Let's break it down.

1. Sign up and receive box

It all begins with the parent signing up for the subscription service and receiving a starter kit. This kit is a large cardboard box that contains all of the materials necessary to set up a child’s work/play space, along with basic crafts materials and print-out instructions on, well, how to set up the space.

The workspace set up is intended to give children feelings of agency and comfort by creating an independent space for the child to call their own, combating the lack of space that children in low-income families often face.

2. connect to app

In addition to the physical experience, we decided to design an app (oh-so-inspiring) to supplement the holistic experience. The app can be used for a few different things, but it is first and foremost a free library of in-house activity ideas using commonly found household items. These activities take into consideration difficulty levels, educational outcomes, and time commitment. This is designed to help parents or babysitters come up with play and learning activities for their child, as well as lift some financial burden off of parents of having to always buy new play things and materials for their children.

Activity suggestion screens
Find a plethora of play activity ideas using common household items.

3. receive weekly activities

The experience also includes weekly envelopes delivered to families. In these envelopes are tailored activity sheets along with necessary materials. The weekly activities engage children in play learning with readily available materials and provide relief to parents by minimizing the cognitive load that comes with preparing new and engaging activities for children.

Sample activity - quilled paper snail craft
Readily usable play materials along with instructions arrive in the mail weekly.

4. clean up

We learned early on that some parents were stressed about having to clean up after the child after every playtime. The app turns cleanup into a game with a timer, song player, and a list of helpful tips for parents. Besides, we introduced a physical sand timer as one of the first weekly mail activities offered. The sand timer serves the same purpose of creating a time constraint, but this way a child can create a personal attachment to the timer and even better visualize the time slipping by. It serves as an alternative to the app so parents can have their mobile devices if needed at the time.

The app gamifies cleanup with a timer & a dedicated song. But how about building an actual sand timer?

Snapshots of kids at home in action

scenario #1
A child workspace can be easily set up anywhere in the house using materials from the starter kit. It blocks out visual distractions for children and encourages a sense of agency over their surroundings. A seven-year-old is testing the starter kit in the image!

scenario #2
This Photoshop masterpiece illustrates how a child can complete an activity on the dining table while a parent or guardian works in the kitchen. It allows parents to focus less on childcare and more on other responsibilities, like their jobs or housekeeping.

scenario #3
After their playtime, a gamified challenge could intrinsically motivate the child to clean up. A dedicated clean up song also helps to establish a routine.

As the concept took sufficient shape, we even got to do a little branding + marketing.

Evaluation

We sought a lot of feedback. Our team conducted product walkthroughs with subject matter experts, interviews with parents, usability testing of the app, and user testing with children on the physical prototypes. We also regularly participated in design critiques, and I went as far as to pitch the idea to a handful of seasoned entrepreneurs.

First, our design resonated with parents.

“Anything helps to get through the day.”

Participants struggled to juggle work and child care. They also worried about the long-term impact the pandemic would have on their child’s learning. Speaking of the ad-hoc educational environment right now, a participant warned that “We’re in a very dangerous time as parents.” Several participants we interviewed willingly offered to test the prototypes, which we took as a sign of interest.

But we also had to change a few things.

1. more paper instructions

Onboarding Screens
In-app guide on how to unbox and set up the space—completely optional!

These set-up instructions still exist in the app, but we've made them optional by including print instructions so that it's not necessary to go through the app onboarding to know how to set up. #undesign #low-tech

2. using intrinsic motivation

While some kids come to their parents for things to do, others dislike being told what to do. We learned that it is important to give children control in terms of choosing the activities for themselves. While our product has a variety of offerings and the app contains daily suggestions along with search and filter abilities, these could definitely be more developed, and a next step would be to add more variety to the weekly mails.
On the same note, we discarded the idea of incorporating a memento board in Kids at Home as intrinsic motivation tends to decrease when external rewards are given.

3. a customized curriculum

We observed that parenting styles and child development vary greatly by age and even household. Children at different ages and developmental stages will have different play needs. It is crucial for any play activity to be age-appropriate, making sure that it is something children can complete and targets their capabilities. This would also prevent children from getting frustrated when they cannot troubleshoot the activities on their own.
In its final iteration, Kids at Home will progress according to a customized curriculum and parents can track the progress on the app. The curriculum is specifically designed to support key milestones sorted into 5 categories of child development.

A serious note:
The milestones serve as a general guide for parents to help them understand how their child is growing and to alleviate certain stresses they may have about parenting effectively. It is important to emphasize that all children develop at their own pace and there is no one specific way to evaluate child development.

Curriculum Page

Here are a few sample activities intended for different levels of skills and ages.

Age-appropriate activity sheets

Finale

Our design in the world

Stakeholder Map

Stakeholder Map

As the stakeholder map illustrates, child well-being is influenced by many factors, and our solution is going to be embedded in a larger system consisting of various stakeholders. Presently, it focuses on the dire needs of two groups—parents and children.

What's different now

Icon - Happy Parents

It alleviates parental stress by providing quality play activities for children to do & makes their life a little easier as it allows them to multitask or know their kid is engaging in meaningful activities when looked after by someone else.

Icon - Happy Children

It harnesses the thoroughly researched power of interactive play and is designed to support both child agency and development. Empirically, our activities were liked by children during testing sessions.

From having to put the kids in front of the TV to facilitating play learning in spite of the pandemic, I'd say that's a win.

future directions

1. share your work

Since the pandemic has caused a loss of social interaction for many children, and peers are important actors of an active learning environment, we would like to restore some of that social interaction by encouraging sharing in our app and incorporating activities that rely on social connections. We hope this creates additional social motivation for kids to stay interested.

2. find playdates

Another future step could be to facilitate playdates because some kids are likely to be more motivated when doing the activities with a peer. To maintain social distancing, this would involve the distribution of partner activities that require children to work together via video or audio call which parents can help set up.

where it went wrong

In today's world, every good idea has competition, and it manifested itself in this story. Because we started broad and later reframed our problem statement in the design process, some conceptually similar products didn't come to our attention until we ourselves had a good idea of what we were designing, which was fairly late. In the process of additional competitive analysis and user interviews, I discovered that there are a ton of kids craft subscription boxes out there and some of them are reasonably affordable. Had we found out about these products earlier, we would have more time to deliver a more unique promise of value with Kids at Home and take into consideration existing patterns for these boxes.

Despite using multiple avenues for recruitment, none of the participants we interviewed actually qualified as low-income. In order to reach the hard-to-reach, extended timeframes, plan for higher resourcing costs and community partnerships will need to be acknowledged.

parting reflections

The Universal Traveler

Design Thinking, vintage.

Be where the users are (but also, covid is still a thing.) While our team were only interested in consulting subject matter experts due to COVID-19 constraints initially, I continuously advocated for co-designing with real users and convinced the team to engage in user research with parents from the Ithaca area as I believe it is our responsibility as designers to develop empathy before anything else. To do this, I designed study posters, reached out to personal contacts, joined relevant Facebook groups and forums as means to recruit participants, and led most of our user research/evaluation efforts. As a result, we gained a much deeper insight into the day-to-day challenges that families with young children face and were able to contextualize our solution as well as making better iterations.

Lastly, although Kids at Home is not a novel concept, its success lies in its holistic approach and variation that encompasses a large range of children ages and interests. The physical experience is supplemented by the virtual one throughout an extended period of time, making it a sustainable solution that can last beyond the pandemic. The issue of educational quality disparity is a wicked problem, but Kids at Home attempts to mitigate it by alleviating parental burdens through provision of a workspace and continual support of engaging activities which can be used as a bonding activity or diversion. Kids at Home highlights the importance of active play in child development and hopes to both empower children and enable parents facing challenges exacerbated by COVID-19.

Smoothing out the podcast listening experience at Himalaya regardless of Internet speed.

Background

If you're always on the go, or that your mobile network is a little unpredictable, you'd probably come to appreciate the few apps that do work well offline. While the offline user experience is usually an afterthought for app developers, for a content platform like Himalaya, users deserve to engage with the app even with limited or no connectivity. When I jumped onboard as a product design & management intern at Himalaya, this was the first initiative I took on—an overhaul of the offline/disconnected in-app experience.

Himalaya seeks to be the cleanest, most intuitive podcast app that also does the most for its partners and the community. It was born out of a vision to empower creators and streamline their work process. Himalaya provides the production and marketing resources necessary to grow shows, levels up the listening experience with listener-friendly features and a built-in community connecting listeners with podcasters, and ultimately helps creators make more $$$.

Research

User Stories to build empathy
UX Audit to uncover pain points
Data to inform decisions

There were multiple support tickets about frustrating loading times, and our distributed team also exchanged stories about the app failing at the airport, but how do we know if the issue was actually prevalent among users? While edge cases should be taken care of, I also needed to understand the scope and impact of product issues in order to make prioritization decisions.

UX Audit

To gauge the state of the offline listening experience, I first conducted a user experience audit on our mobile app. The major frustration points under poor connectivity identified were:
1. Long load time upon opening the app.
2. Constant unattractive Toast notifications.
3. Few indication of what content is available offline.

pulling the data

Next, I turned to our usage data to see the amount of users affected by these pain points. I found that for up to 20% of our users, it took as long as 15 seconds to see the first image appear on the home page!

Together, the findings indicate that the issue was not mere anecdotes but a trend across users, and we decided it was a meaningful problem to solve on our end.

Design

research

While researching the topic of offline/disconnected experience for mobile apps, I looked around other content platforms to see how they were handling the connectivity issue. Below are some of the screenshots I took during my design research.

Screenshots of different error state designs

Screenshots of offline states in 2019

first principles

Since the offline/disconnected experience spans the entire app and penetrates multiple layers, the goal is to find a solution that addresses the overall in-app experience. In other words, I wanted to come up with a comprehensive plan rather than ad-hoc fixes. To do this, I broke down the problem to its most basic elements, and rebuilt a solution from there.

First Principle Map


Here's a close-up of the problem map.

Problem Map


and the solution map.

Solution Map


As illustrated in the maps, this turned out to be a highly cross-functional project and the eventual solution involved changes across engineering, design, and data tracking. With that said, let's dive into some highlights of the new offline/disconnected in-app experience.

faster load time

Before/after comparison of home screen

Although we can't realistically control the connectivity of a user's device, we were able to create the impression of a faster startup time by modifying the display process. Upon opening the app, cached content are presented first and the system swaps them out for newer content fetched afterwards. This allows users to enjoy content immediately and avoid having to manually refresh. We also shortened the allotted timeout period to prevent users from getting stuck in a loading state for too long.

Reduced Notifications

Collages of screens with toast notifications

Quite terrible, indeed

Toast notifications can be an effective and unobtrusive way of displaying system information to a user, but unfortunately, there were just too much of these. Under low connectivity, a notification would pop up every 10s, totally disrupting the listening experience. I documented every scenario that triggered a connectivity notification, and reduced the list to only a handful where it was necessary to use them as system feedback. For the rest, an improved error state would do the job.

redesigned error state

Before/after comparison of error state

The new error state consists of an illustration that maps onto our user demographics better, a clearer error message with a human tone, and a clickable button that provides a next step. Overall, the redesigned error state is more consistent with our design language and performed better in guerrilla testing.

Conclusion

Although a more comprehensive data tracking plan was still underway by the end of my internship, the new offline experience saw a drop in connectivity-related feedback and an increase in retention rate in the following months. If I had more time and resources, I would also redesign the remaining Toast notifications to be more aligned with our design language. This project was a good learning experience for me because in the process of developing an overarching strategy for the best offline UX, I really grasped the importance of identifying and turning unhappy paths into joyful experiences for the user (or making them suck less, at least).

next
project