Hanzhen Liu

Prompt

“If Amazon are to make an AR Glasses to extend their Alexa platform, how would you conduct market research and define features?”

My Role

Product Planning | Concept Development

Introduction and Purpose

The recent generation of AR glasses, such as Google Glass and Spectacles, suffers from a lack of clear identity. Without defining specific use-cases, augmented reality is a very general medium for data consumption.

Current technical constraints force trade-offs between design and functionality - it's exceedingly difficult to design slick AR glasses with outstanding tracking, optics, connectivity, and battery life.

The purpose of this case study is to lay out the roadmap for understanding buyers and validating use-cases so we can make the best development decisions.

This is a case study using Reali’s current android app (Aug 2018). This case study aims to:

(1) Identify easy to implement improvements and provide solutions.

(2) Suggest design concept that should be applied to the entire app.

Role

Visual Design | Interaction Design

Introduction

Reali is an up-and-coming real estate platform that removes agents from the home buying/selling experience. It will save you tens of thousands of dollars in commission fee. They have recently secured series B funding.

Compare to listing services like Zillow and Trulia, buyers and sellers can directly manage their purchase journey via the Reali app. Reali “experts” will be available online or via phone call to answer questions/facilitate document exchange.

The goal of this case study is to quickly identify easy to implement improvements to the existing app and propose design concepts that can be applied to the rest of the app.

Approach

I started by reading about the real estate marketplace and identifying Reali’s competitions. Zillow and Trulia are listing services that charge a fee for including properties in their platform. Redfin is similar to Reali in that they also hire in-house agents in addition to make referrals to outside agents. Reali differs from all 3 above services in that it is the only one with end-to-end technology support, as well as charging the least commission (by cutting out outside real estate agents’ commission).

Next I went over App Store reviews, social network feedback, and news articles to learn about different opinions. People who leave positive reviews likes (1) low commission rate and (2) helpfulness of Reali experts. The most common complaint was that the app process doesn’t help first time home buyers enough.

From my own usage of the app, I noticed that Reali experts are very attentive and work together as a team. I also spotted a few issues (shared by many other Real Estate apps) that can be easily changed to improve the over all app experience. I picked a few of them to provide solutions for in these mockups.

Client

Touch Adventures

Role

Mobile Product Design | Backend Wireframing

Introduction

Caravansary simplifies content operations for membership organization; it is a platform for managing media and membership.

There exists a love and hate relationship between membership organizations and technology. At one hand, technology encourages online and offline engagement, on the other hand it means that organizers have to juggle multiple tools to manage a running list of functions such as newsletters, payment, website, database, and social media profiles - this quickly become chaotic and expensive.

We wanted to introduce a platform for running membership organizations that will reduce business expense and streamline tasks. The early questions we asked ourselves were, "what's the best way to simplify organizers’ workflow", and "what types of organizations can immediately benefit from our methodology".

Approach

Success from companies such as Medium and Netflix taught us that good content is at the heart of every successful network. We were realizing the power of content driven network effect, when great content brings in more users, and more users drive better and more content. This trend doesn’t only apply to big companies, with the right administrative tools, small to medium organizations can also follow the same path to grow their membership. One of our main goals is to introduce tools that make content publishing and content aggregation easy and universal.

Our proposal:

(1) Create a headless CMS infrastructure to power all of organization’s publishing and membership management while providing key analytics.

(2) Provide organizations with a white-labeled mobile app that acts as a “passport” its members. It will be a single entry for content distribution, ticketing, and payment.

More on the issues we are trying to solve

Building a network is time consuming and involved. From researching and working with local organizations, we learned that events and media content (video, audio, articles) are critical for the journey between hearing about an organization to purchasing a membership. For SFFILM, a film organization who produces the yearly San Francisco Film Festival, public events give their current and prospect members a sense of belonging and personal investment. SFFILM also delivers monthly movie screenings (via their website and app) to generate additional membership values. Another example, Alta, a fledging new magazine about californian culture, sponsors group book reading sessions all around the Bay Area to promote their quarterly subscription. 

Organizations like Alta and SFFILM traditionally use third party services such as Agile and Wordpress to manage their ticketing, memberships, and CMS. They face challenges such as maintaining legacy code, long and costly development cycles, disconnected content repositories, and weak performance due to stacking technical debt. They are stuck choosing between paying exorbitant technical expense or falling behind competitions.

Client

Stella & Dot

Role

Visual and UX Design

Introduction

Stella and Dot sells jewelry and small accessories on their website and app. Their revenue stream relies on online sales and local events (trunk shows).

Identifying user needs

There are 2 types of customers in their business ecosystem,

(1) Shoppers: the app is a tool to shop and meet new friends with similar fashion sense.

(2) Stylists:  independent distributors and event organizers who make commissions. The app needs to provide sales tools and analytics.

Learn pain points

After preliminary research and user interviews, it became apparent that stylists are the lifeblood of the company - their consistent community effort drives brand recognition and sales. The app needs business tools that help stylists attract and retain local clients.

During trunk shows, stylists need to entertain guests and facilitate purchases. Since they are always talking and moving, having a phone app that make transactions will be a big plus. 

Organizing app structure

Stella and Dot is more than a shopping mall, it is a community. The challenge is to translate all its interconnecting components in a concise way.

Because regular users and stylists have different goals, we decided to create a single app but with 2 tenant levels: the first level tenant will focus on the shopping and event discovery, the second level tenant will have additional event marketing and sales management features.

Networking tools

During interviews, we found out that majority of stylists are Facebook friends with their clients. Unsurprisingly, Facebook messenger is their go to form of communication.

While Facebook messenger is very convenient, it dilutes the Stella & Dot brand. Stella & Dot would very much prefer their own chat tool to be used for communication.  

With that in mind, a chat tab is added to encourage chatting and gifting outside of trunk shows. The interviewees also agree that being able to suggest a product inside a chat interface that his or her client can purchase immediately is a powerful tool. 

Client

The Long Now Foundation

My Role

UI | Visual Design for Apple TV platform

Introduction

The Long Now Foundation is an American non-profit organization aims to seed long term, responsible thinking. It believes that today’s culture focuses too much on “speed” at any cost, and we as a specie must thinking ahead to address the Year 10,000 problem.

The Long Now Foundation hosts regular seminars about long-term thinking in the Bay Area; their expert speakers range from futurists to biologists. The goal of this project is create an Apple TV app for Long Now’s membership.

Goal

Improve the usability of a turnkey solution for direct sales lead generation. The client has developed a suite of direct sales mobile apps aiming at prospecting, communication, and media management. This redesign focuses on the prospecting app.

My Role

Ideation/Wireframing/Design/Analysis

Study User Behavior Data - Method

We are inspecting Google Analytics of the existing prospecting app and 2 of its tenants from Jan 1, 2017, to March 13, 2018. We will review both tenants separately at first to identify individual characteristics. We will also compare similarities in user behavior to determine important features. Within Google Analytics's behavior section, 3 different categories are researched: 

Screens - equivalent to pageview on a website. Represents the content user is viewing in the app.

Event Category - groups of similar events

Event Actions - specific actions.

TENANT 1

Screens:

Gift screens are by far the most captivating screen within the app with avg time on the screen of 12:57. 

IBOs like to look at user activities (2nd most viewed screen with an average duration of 3:48) and drill down to prospect details (1st most viewed with avg duration of 5:57). 

Chat dashboard, although it has the 4th highest average time spent and a low % exit (number of users end their session after using the screen), does not see most usage. I feel this is the biggest wasted potential here. 

Event Category

Invitations can be drilled down into invitations by types. Invitation via text is by far the most popular.

Invite via text: 82.44%

Invite via email: 13.30%

Invite to discover more: 2.30%

Invite to register: 2.15%

Gifting and text Invitation are by far the most popular events. I believe this is because texting and giving gifts are very personal and builds relationships. 

Event Action

We are not seeing Gifts under Event Action because gifts actions are recorded by individual gift titles rather than a single category. 

Outside of session actions and gifts, we see texting as the preferred vehicle for invitations.

TENANT 2

Overview:

We again see Gifts with by far the highest average screen duration at 5:50.

Discover and Info Sessions are also very popular, representing an LTD's unique culture.

People spent more time on Chat Dashboard than Discover and notifications. please note that in both Connect21 and DYS, IBO's chat window is hidden inside the "more" section. We also not provide any chat features other than the very basic.

Invitations can be drilled down into invitations by types. Invitation via text is by far the most popular while invite to register is VERY low.

Invite via text: 72.61%

Invite via email: 12.84%

Invite to discover more: 11.67%

Invite to Info Session: 2.77%

Invite to register: 0.13%

Client:

DYS

Role:

UI/UX Design

Introduction

DYS is a salesforce training company focuses on selling video and audio based business resources via their ap. They want to improve their existing platform by adding a chat app.

I am tasked with creating the user interface for the chat app and a set of icons to go along with it.

My first time experiencing AR was magical. I placed a tablet over a photo of Atelier Crenn's filet mignon, and then viola, a photogrammetric reconstruction of that exact dish appeared. This was before the release of ARKit and ARCore, when Vuphoria was the leader in marker based AR. 

This app concept describes a mobile-first glasses retail marketplace. Facial landmark detection will fit glasses models on top of user's face to offer instant visceral feedback. Basic camera functionalities and filters are included to encourage social sharing. 

The last picture shows real reactions from strangers who tried a demo app, developed by Yosun.

In a recent presentation by Houzz, users who tried their "View In My Room" feature are 5x more likely to purchase and spent 3-4x more time in app. According to Decorist, another company in the interior design field, users of their virtual preview feature has a much larger (8-10x) shopping cart.

Shopping should be an experience

With eCommerce's tremendous growth in recent years, we are no longer reliant on shopping centers for our puchases. This is a mixed blessing. On the one hand we have so much control and choices, but on the other hand it is really hard to tell whether a product will fit like how we imagined.

AR can bridge that gap by helping us visualize the purchase before it arrives. Ikea and other furniture companies are already on top of it. Car manuatures are getting into the VR space to do the same. Going to the mall was a treat! And AR is the technology to bring back some of that magic.

Game Changer: ARKit

It is hard to imitate realistic lighting and shadow on a 2D model. Apple's vision api offers a great solution by exposing iPhone X's depth camera, thus opening up a simple way to place 3D glasses models on top of face mesh.

TV #1: Guest threw his controller at the screen while cowering in fear from playing a zombie shooter. R.I.P.

TV #2: Guest threw a right hook with his controller directly at the screen a few feet in front of him, crushing the monitor in the process.

TV #3: Guest in full suit did a 360 in-air backhand swing into the monitor while aiming for a monster’s head high above. No, that wasn’t game sound, it’s $$ flying out of this month’s budget.

Virtual reality is great.

Right after college, I emptied my wallet to visit Japan. We climbed Fuji, rode the Shin Kan Sen all the way from Tokyo to Nagasaki, ate, ate, and ate.

All the izakayas in the city have a little ordering tablet next to the table; for us, a bunch of foreigners speaking in broken Japanese (in fact, my Chinese was more useful because I was always able to find a Chinese employee to speak with), these touchscreens were a godsend. 

Back in the States, MICROS was too expensive for new restaurants to afford, so Square and its competitors were gaining grounds. I wanted to design my own prototype of the ordering experience.

List vs Grid

List is easy to understand while grid has the real estate advantage (showing more items per area). For superusers (waiters) where items' UI placement will be memorized, a grid is faster. For regular users (customers) a list is easier to pick up. 

Brand customization

My goal was to create UI patterns that will eventually be used by customers directly. Following that thought, the ability to change theme color and wallpaper is a powerful branding tool for businesses. 

Mobile ordering 

This part is still incomplete. Some great additions will be food thumbnails, calorie number, special requests, and completion timer.

A local nonprofit organization wanted to create an app encapsulating their services.

1: Film screening events at various venues

2: Movie streaming platform for paid members

On time under budget

We realized the only way we can complete the specs is by leveraging what the client already has - their mobile responsive website.

Without header, menu, and footer, a responsive webpage is pretty darn close to an app screen. We contacted the client's website company to generate URLs for pages (sans the extra elements) we need, and we redirected users to these web views as they are browsing the app. 

Online Screening Room Landing Page

I redesigned their landing page without making structural changes. 

Live stream app broadcasting 24/7 places, people, events. 

There's a cocktail bar called John Collins that my friends frequent. The bar always projects movies high up on the wall, maybe they'd want something like this.

Structure

1. Scroll up and down (on touch to display categories text) to access different categories.

2. Scroll left and right to access streams from the same category

3. Tap on a particular feed expands it to display details and additional functionality.

A few friends and I were hiding from the pouring rain at a neighborhood coffee house called Blue Danube. I ordered a macchiato and then promptly posted a photo of it on Instagram.

As we debated on where to go next, I thought to myself, "man, I wish Yelp simply returned recent food photos taken at nearby restaurants." It would be spontaneous, unbiased, and relevant, a service that combines Yelp's intent with Instagram's design.

Thinking louder, what if we anchor media content to venues and businesses instead of people?

I made a few mockups by mostly removing nice-to-have features from Instagram, and then redirect focus from people profile to venues. For simplicity's sake, let's assume this app is only targeting food and entertainment verticals, but I see use cases in other markets as well.

I see the following advantages:

1. We are directly giving credit to the content creators. Let's be honest, my cute macchiato photo with 40 likes was not the result of my photography skills. The barista made the drink and the owner chose the wares; I borrowed.

2. We are generating values for the content creators. Instead of my profile selfie, people will associate the photo with the business. We are generating buzz and revenue for local businesses.

3. Let's assume the app blew up - restaurants will compete with each other by inventing new, creative cuisine. Concerts will compete by upping their production game. We are rewarding innovation rather than review management. I think that is beautiful.

Potential

The last screen shows an AR Buzz Lightyear flying over the salad. 

What if we allow advertisers to match with popular Insta-yelp businesses, unlocking sponsored AR models to pop up when guests take photos at sponsored locations?

Since we are generating more foot traffic for businesses, they will also be more willing to spent $$ on advertisement. 

I was tasked with designing a media player for broadcasting lecture videos. Unlike movies where we usually only press "play", educational videos are constantly being interacted with.

Control features

1. Skip forward/backward are convenient features because users will need to re-watch more convoluted topics.

2. Subtitles are necessary for Russian professors with a heavy accent.

3. Go next/previous controls are necessary because users will need to navigate in between lectures.

By incorporating above tweak to a typical media player, we are removing frictions hindering a successful study session. 

App design for Gates Foundation's financial inclusion research project in Kenya. Many Kenyans are financially illiterate; the project aims to teach individuals about the banking system by allowing them to transfer a small sum of money everyday.

Kenyans partaking this research are given 3 options each day: withdraw (earn only the amount), save (earn some interest), or invest (earn more interest). Their behaviors are charted via the app.

Skeuomorphism

I decided to go with the skeuomorphic route so Kenyans unfamiliar with technology can learn easily. 

Illiteracy

Play audio buttons are added for individuals who cannot read.

1 Page

The app is about teaching the concept of banking, and not learning technology.

Client wanted to create a simple back office for administrators of their messenger mobile app. After researching existing services and discussing internally, we decided on a 2 columns UI approach to make sure we can make the tight deadline.

The overall structure is kept modular so future features can be implemented painlessly.

2 Columns vs 3 Columns

3 column layouts are typically used for email clients (such as Yahoo mail). The third column usually offers organization features such as folders and filters. After estimating both directions, we decided to combine the subject column with folder column to shave off development time.

Color

Quite monochromatic with a splash of color here and there. I want to be sure that it's comfortable to look at after a long day. Theme colors are chosen based on branding requirements.

A wealthy client's sons are professional motocrossers, the family thought that fantasy motocross app may be a fun idea. I created this mockup in support of their ideas.

sponsored by Monster

After Tinder blew up, Nicholas Sparks wanted to make a dating app. His idea revolves around matching people based on their astrology signs.

Popular quotes from movies and books would be inserted in between profile cards.