My First 18 Years UX UI Research & Design Case Study

Who was this app for?

This application is for parents who have communication issues. To alleviate the stress of going to court.
This app will present ways to help balance your children’s calendar and make essential payments to agreed finances.

Replace with your content

In August, 2017, I had to go to court over and over again to try and get joint rights to my daughter. Fortunately, after spending over $40,000 on Lawyers etc. I thought there would be an easier way to agree on extra – curricular, school, medical for the child. I wanted a way that the two parents who don’t speak with each other will be able to give the child a good life by agreeing on this application.

What Issues Did I have to Deal with Before Designing?

The first issue was trying to understand the users of this app.  Although I was going through these issues there were other People going to court and they had multiple kids, or were still married to their partner collecting child support. We had to interview multiple situations to understand what would be assess them.

What to do if there is more than 1 kid involved?

This application focuses on all the children associated with the custody agreement.  Each Individual Child will have their own profile with batch options.

Will the kids be able to access this app?

No , Kids will not be able to use this app.  We are thinking of designing an app for the child at a later time.

What is the most important part of this app?

It’s to give the parents understanding and confidence that they as parents can work together without going to court every other month.  All of the items that need to be discussed outside of court can be assessed in this application.  If there is a disagreement there will be a lawyer to hire who can help make decisions for a small charge.

Child App Design and Development UX / UI

Journey Map

4 Users will be Mom , Dad , Lawyers , and Judges.

Design User Flow UX My First 18 Years App

User Analysis and Task Flow

Task Analysis My First App Design and Research UX

The Main two user case scenarios

UX Design Scenarios

User Personas

User Personas My First 18 App Design and Research UX

Children Matter

We have put together 2 Children’s scenario based on the parents who are mentioned above

Persona Children My First 18 App Design and Research UX

Selecting out of a two child scenario

Child Profile Selection dashboard My First 18 UX Design & Research Rapid Prototyping UX

 

Login Screen Using Selection Tabs

Login Process My First 18 App Design and Research UX / UI

Signup Screen Using Automatic Login FB / Google

Signup Process My First 18 App Design and Research UX / UI

Step By Step Process With Option

Sign Up Your Personal Info Process My First 18 App Design and Research UX / UI

Selecting multiple children

Here you will be able to select Multiple Children at the dashboard level and prepare batch options (ex. Payment , assigning medical doctors , updating status with court orders.)

Drawing out the Dashboard for Dad or Mom to see

Dashboard Wireframe Profile Selection dashboard My First 18 UX Design & Research Rapid Prototyping UX

The selection of items for parents to view on their dashboard.

  1. Seeing the Child’s Profile and updating any important information. 
  2. Showing a calendar of Important Dates to edit or view. 
  3. Showing a high level (Custody Information Screen ) and the ability to edit that. 
  4. Both Parents will have access to the notifications screens based on their % role in the child’s life.

Menu Items :

Mockup Dashboard Design Low Resolution

Receive or Pay – (Mom or Dad) will be able to make payments to Extra Curricular , Each Other, School etc through this 3rd Party Application set for payment
School -Show recently updated grades by teacher.  Ability for the parent to add dates and give warning / success messages to other parents based on agreement from court.
Upload Documents – Upload Most Documents / Court Judgments and link them to sections based on your user role.  Example ( Mother can post latest doctor appointment findings etc,)
Extra Curricular – Update Parties on events (calendar update, payment for Karate, payment for Soccer ) Give Notifications of upcoming events to the other parent.
Notifications – Update Parties on events,  activities, payments (once both parties are signed up this can be automatically sent to your messages)
Medical – Update Parties on doctor visits, co-payment, health statistics
Judgments – Court Judgement (Forward to Parental Coordinator or the lawyer for reviews)

Dashboard Layout In Wire frames

Dashboard Wireframe Profile Selection dashboard My First 18 UX Design & Research Rapid Prototyping UX

Designing a Color Scheme for the Site

Designing a color scheme for design

How might we reimagine the future of television?

TV Guide makes TV decision making easier, faster and more informative, making it the best place to discover what to watch, where to watch, anytime, anywhere. I led the ideation, strategy and design for its app across its Android and iOS platforms. 

MY ROLE

User Research
User Interviews
Journey Mapping
Sketching
Wireframing
Screen Flows
Visual Design
Interaction Design

PLATFORMS

Android, iOS

YEAR

2017-18

Related: Design Systems for Multi-Platform Experiences
design-systems

PROBLEM

Today, TV is about choice, and for most of the viewers, there are a lot more choices than ever before. TV is now being watched in more than one place and being offered by more than one provider, and while this abundance of media content is good, the fragmentation of various sources and media devices has made it increasingly complex for users to discover and manage the content they are interested in.

KEY DRIVERS

As the density of the online content increases and consumers are overloaded with choices, the ability to find and access content across a myriad of services is crucial to the success of the app. I based my designs to deliver upon the following key areas.

UNIVERSAL SEARCH

A universal search that unifies content from multiple services and streaming providers (Netflix, Hulu, CBS, HBO etc.), providing a single point of entry to discover new content.

PERSONALIZATION

A watchlist that notifies users of any upcoming releases and content from services they are subscribed to, allowing curation of personalized content.

SMART RECOMMENDATIONS

Offering users with smart recommendations based on their preferences and watching habits, enabling tailored content consumption within the context of their lifestyle.

TV-Guide-Visuals-4

WHAT DOES THE CURRENT TV LANDSCAPE LOOK LIKE?

I wanted to get a clear picture of how our primary users went about discovering new shows and movies. In order to get a better understanding of their behaviors and motivations, here are some research techniques I used for the redesign.

METHOD #1:
QUALITATIVE & QUANTITATIVE DATA

By performing in-person interviews and conducting surveys, I learnt existing user behaviors for shows discovery and management. Findings included studying device usage, existing TV Guide market and user preferences for shows management. Some of the learnings are shared below.

METHOD #2:
USER REVIEWS ON APP STORES

I sifted through hundreds of reviews and comments left by users on Play Store and Apple Store, and further categorized them under buckets and highlighted them in terms of importance. This was some crucial feedback that helped me identify various pain points and areas of improvement.

“Mobile respondents report higher levels of influence and are more dependent on their phones and social media”

The digitisation of TV has significantly changed viewing patterns, nature of content and its delivery. The interruptive ads of today have given way to more engaging content, as new technologies enable audiences to skip content that they don’t want to engage with. Certain programmes, however, still remain in linear form – including news, live sports and big events. Other than that, everything else is shifting to video-on-demand (VOD).

USER ATTITUDES TOWARDS KEEPING TRACK OF THEIR FAVORITE TV SHOWS (SURVEY)

data

SURVEY FINDINGS

“Genre selection and recommendations from friends & family topped the list of preferences for watching new shows”

A sample of the various set of questions asked from the participants is shared here. Items with the highest opportunity highlighted in red.

SYNTHESIS: JOURNEY MAPPING

Based upon data from in-person interviews, surveys and user reviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey. It also helped spark discussions to help close knowledge gaps and acted as a catalyst for idea sharing and generation between team and stakeholders. Furthermore, I identified various touch-points by intent and task including aspects such as emotions and expectations.

Journey Map Updated

BALANCING USER NEEDS WITH BUSINESS GOALS

The initial user research uncovered various areas of opportunity, such as content discovery based on genres, moods, or a combination of the same. However, for the MVP, I kept in mind the business goals and organizational capacity and decided to focus upon some key areas, including simplifying user experience around user on-boarding, shows discovery and alerts management, and thereby, meeting user and business goals including key engagement and user retention, with a strong focus on personalization, discoverability for what to watch & where to watch, and watchlist gamification. The previous app also missed an editorial and discovery strategy. The redesign was an attempt to address all of these shortcomings.

BRAINSTORM

PROTOTYPE

ORGANIZE

IMG_20180108_182524
tvguide sketches
2018_1

(Left) Some shots of various brainstorming sessions and sketches from the project
(Right) A cat left in awe during a mapping exercise

SETTING UP THE STRUCTURE

I refined the concept with research outcomes in-line with our business goals and went through a few rounds of iteration using hand sketching. I also came up with a revised and simplified information architecture that focused on content discovery, TV listings (by location and providers for both US and International regions), and easy management of shows.

IA-01

IDEAS TO ACTION

I sketched countless ideas and brainstormed various possibilities with my product team and created low-fidelity wireframes and prototypes to test. The outcome was four distinct views: watchlist, explore (discovery), TV listings and settings (favorites and alerts management).

TV Guide Wireframes Updated

MODULAR DESIGN SYSTEM

TV Guide App Design System was built to accommodate scalibility, so components can work well alongside each other, at the same time, render well on various device resolutions. 

DARK COLOR SCHEME

Traditionally, TV Guide has been accustomed to lighter themes, primarily because most of the content resides on the web. I intentionally chose a dark theme for the app since our users tend to engage in the app much later in the day, and in a room with dimmed lights, and thus a brighter theme would have been too harsh on the eyes.

SKETCH SYMBOLS

I started by building a comprehensive components library within Sketch that would later reflect in various parts of the app, i.e., colors, typography, setting the grid etc. This included icons, buttons, form elements, error and empty states, show cards and content cards. For achieving vertical rhythm, I used an 8pt grid system (fonts set at 4pt, UI set at 8pt).

Design System

USER ONBOARDING

Watchlist is a core utility of TV Guide’s app — allowing users to add shows/movies and set alerts to be notified of any new releases. In order for users to get to up to speed with this feature, I designed an experience that was simple, yet fun! I took inspiration from Tinder style cards where users could swipe up to like a movie/show or swipe down to dismiss it. Any items that were liked were automatically added to the user’s watchlist. Why swipe left or right, when you can always thumb up or down!

Onboarding-6

PERSONALIZATION

watchlist

WHAT’S ON TV?

Listings

SHOW DETAILS

show-gif

DISCOVERABILITY

Related Objects
All Screens

 

Project Details:

Hiram Barsky

Credit

First 18 Years

Client

January 2019

Date

UXDesign

Category
This application is for parents who have communication issues. To alleviate the stress of going to court. This app will present ways to help balance your children’s calendar and make essential payments to agreed finances.
Description