kim liu - portfolio

UX DESIGNER / RESEARCHER

KIM LIU

[email protected]

201 835 5411

www.kimliu.co

linkedin.com/in/kimliu2

mailto:[email protected]

http://www.kimliu.co

http://linkedin.com/in/kimliu2

I am a curious, self-directed learner with a background in writing and digital marketing. I am looking for a challenging, fast-paced UX designer position in an environment that emphasizes growth, feedback, and innovation.

Here’s a sneak peek at the inside of my brain:I value

BIG IDEAS

I believe in failure as

GROWTH

Hi, I’m Kim.

In the words of Alice, I am

CURIOUSER AND CURIOUSER

I approach situations with INTEGRITY

I am interested in EMERGING

TECHNOLOGIES

ABOUT ME PROJECTSMY PROCESSTOOLS CONTACT

some key highlights…

My process is driven by problem-solving, iterative testing, and a strong foundation of research, while taking into consideration all stakeholder needs.

Here is an overview of my process.


Here are my go-to tools.

PROTOTYPINGDESIGNING COLLABORATION

Tools I am interested in learning include Adobe Illustrator, After Effects, Pixate, and Marvel.

RESEARCH

IDEATION

DESIGN

TESTING

ITERATION

INSTAGRAM SUNDARA CREATUREPersonal ProjectClient WorkStudent Work

These are the projects we will be going through. Detailed case studies are available upon request. Click to see any project you might be interested in.


OVERVIEW

CHALLENGE Create and integrate a photo printing feature for Instagram with customization options

SOLUTION A simple single photo printing that allows for customization and gifting, taking into consideration user goals, business goals, and brand identity.

MY ROLE

PROCESS Research Ideation Design Iteration

TOOLS

PRODUCT MANAGER I acted as product manager, focusing primarily on managing our schedule, research, feature definition, and testing.

This was a student project for General Assembly, created in a 1.5 week span with a team of three people.Instagram

DESIGNIDEATIONRESEARCH ITERATION

OVERVIEW DESIGNIDEATIONRESEARCH ITERATIONS

As project manager, I created a project plan to keep us on track, as well as a more detailed task sheet with responsibilities and due dates.

Managing the Project

DESIGNIDEATIONRESEARCHOVERVIEW

In approaching this project, we looked for the intersection between users of Instagram and photo printing. We collected data about printing needs and Instagram use from 2 surveys and 90 respondents.

I conducted extensive contextual inquiry of physical locations where people went to print. We additionally interviewed 24 users who used Instagram and had printed photos in the past. I led the creation of 5 personas from the synthesis of our research.

competitive analysis | contextual inquiry | surveys | user interviews | personas

ITERATIONS

Contextual inquiry at photo studio

diana

BACKSTORYDiana is just out of college and her friends are scattered across the States. She feels nostalgic for her college days and she wants a way to remember them as she navigates through a new city and new job. She also likes to send her friend gifts to share with them social moments.

PAIN POINTS

USE CASES

BEHAVIOR

NEEDS

I want to capture the social moment.

• Good quality• Reasonable price• Reasonable price

• Inconsistent quality• Time consuming

• Diana wants to send her friend Katie a print for her bday

Age: 23 | Gender: Female | Instagram Use: Frequent

• Diana wants to print out photos from college to put on her bedroom wall

• Posts: friends, vacation, family, nature

• Prints for: For herself to remember, gifts for friends

Instagram and Photo Printing

Contextual Inquiry and Personas


MVP | feature prioritization | brainstorming | user flows

We considered user needs, business goals, and brand identity, making use of takeaways from our research, personas, and writing out user flows to find the MVP and prioritize features.

We brainstormed multiple possible interfaces in design studio, incorporating features that we further validated through a survey.

Brainstorming the MVP and prioritizing features on the whiteboard.

ITERATIONS

Design Studio

Less is more


The digital prototype demonstrates the first use case, available at the link. We used this to test more subtle interactions and interface details, such as gestures and color.

I created a paper prototype to test the printing feature selection and checkout flow, which also functioned as low fidelity wireframes. I created 2 use cases for testing both the low and high fidelity prototypes.

rough sketches | paper prototyping | wireframes | user testing

ITERATIONS

A paper prototype demonstrating how you can scroll through features at the bottom of the screen.

DIGITAL PROTOTYPE: http://invis.io/C620CG03X

Paper Prototype

Digital Prototype

http://invis.io/C620CG03X

ITERATIONSDESIGNIDEATIONRESEARCHOVERVIEW

INSTAGRAM FILTERS GESTURES

i.1

i.2

i.3

i.4

We iterated on how users would physically interact with the options, the way users navigated through the customization options, defaults (and how they were indicated), and what options were available.

i.1

i.2

Though our early sketches began with scrolling up and down on the screen to select options, I observed that users may be more familiar with the side to side interaction seen in Instagram’s filter function, which was eventually used in our final design.

Integrating with Instagram

Iterations

NAVIGATION

CHALLENGE The founder of Sundara came to us with a request for a site redesign to make her site look more professional with the aim of getting more consistent funding.

SCOPE Based on business goals and all stakeholder needs, we narrowed the scope of the project to updating the information architecture, identifying users, and content strategy.

MY ROLE

PROCESS Site Audit Research IA/Content Strategy Design

TOOLS

INFORMATION ARCHITECT I primarily contributed in conducting research, creating content strategy, revising information architecture, creating wireframes, and creating materials for the client.

Sundara was a client project that I worked on in a team of 4 over the course of 2.5 weeks.

OVERVIEW SITE AUDIT RESEARCH IA/CONTENT DESIGN

Sundara

charity: water clean the world pencils of promise

usability testing | heuristic evaluation | competitive analysis

In the site audit, we conducted usability testing and heuristic evaluation. I focused on examining the sites of direct and indirect competitors to see what is currently succeeding in the nonprofit sector.

I additionally created site maps of the current site and competitor sites in order to audit content and understand how successful nonprofits present information to their users.


Researching the Nonprofit Space

Competitor Site Maps

survey | user interviews | personas

I created the survey that we used to survey 25 people previously involved in the nonprofit sector to understand how they found sites and what content they were looking for. We also interviewed 13 people to better understand Sundara’s target user base.

Identifying the Sundara User

LAURIE “The Millennial Activist”

EDGAR “The Consistent Donor”

COURTNEY “The Knowledge Seeker”

ASHWINI “The Screener”

We synthesized our research into 4 personas. Our primary persona was Ashwini, whose job consists of scouring websites to find nonprofits to recommend to her boss for corporate sponsorship. This was based off the stakeholder need for consistent funding.

Ashwini, the Screener


\

I created user journeys and use cases for all of the personas to help understand what pages would be important for us to build out and what type of content Sundara’s users would be looking for, with an emphasis on Ashwini’s user journey.

Ashwini’s Story

We used affinity diagramming and the MSCW method to determine what content was most important to users on a non-profit site. We tested the taxonomy of our results through open and closed card sorting.

Identifying Important Content

user flows | affinity diagramming | MSCW method | card sorting


I collaborated with the project manager on content strategy and created lo fi wireframes for each page, which we validated through user testing.

http://dz5wna.axshare.com/home.html

site map | prototype


Lo fi Prototype

I synthesized the results of the card sorting into an updated site map. The navigation was further validated through multivariate testing.

A New Site Map

http://dz5wna.axshare.com/home.html

PROBLEM Couples in long distance relationships have difficulty feeling connected.

Current technology has improved frequency of contact, but few significant improvements in quality.

SOLUTION An interactive experience app for mobile and wearable. Partners interact through synchronous tapping to maintain the health of a virtual creature.

MY ROLE

PROCESS Research Ideation Design Validation

TOOLS

INTERACTION DESIGNER In a team of two, I contributed with research, interaction design, and illustrations.

Creature was created as a student project for General Assembly in a 1.5 week span in a team of two people.

Creature

OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION

We began the project with an in-depth investigation of intimacy and technology, with the primary goal of understanding how people feel connected. A notable source is the paper “On Relationships” by Marc Hassenzahl.

academic research | competitive/comparative analysis | user interviews

We conducted a feature analysis of various couple apps and discovered there was a focus on awareness, expressivity, and memories. However, in our user interviews, people cited sharing activities and responsibilities as a key aspect of feeling intimacy with their partner.

JOINT ACTION

GIFT GIVING

EXPRESSIVITY

AWARENESS

MEMORIES

PHYSICALITY


Intimacy and Technology

A Market Gap in “Joint Action”

The pattern observed in user interviews: joint action was a common source of bonding not addressed in current couple apps.

JOINT ACTION

GIFT GIVING

EXPRESSIVITY

AWARENESS

MEMORIES

PHYSICALITY

personas | finding the MVP | feature prioritization


Brainstorming ideas around Hassenzahl’s facets of intimacy.

I created the basis for 5 personas based on common needs and pain points observed through user interviews. We chose Irene, a woman in an international relationship, as our primary persona.

Irene, the International

We considered user needs, business goals, and technology constraints to understand our MVP, which we used to converge on a solution through multiple brainstorming sessions and user testing.

Converging on a SolutionSADIE The Madly in Love

IRENE The International

(primary)LYDIA

The Busy Bee

NEAL The Weekender

JOHANN The Traveller

character conceptualization | survey | character design | hi fi mockups | prototype

I conceptualized various character designs for the creature, as well as the room that he would live in within the app.

We tested my designs through a survey. Out of 44 respondents and 10 possible creatures, there was one clear winner. I created multiple animations of Creature in Photoshop.


Character Design

Testing the Characters

character conceptualization | survey | character design | hi fi mockups | prototype

JOINT DANCE SEND TAPS NOTIFICATION

I created hi fi mockups for the watch. The primary function of the watch app involved the taptic engine and notifications to give Creature a sense of life.

PRIMARY SCREEN

A A. Indication at the top of the screen of your partner’s presence in the app

B. The health and form of the creature increase and evolve based on the frequency and question of your interactions.

C. The creature’s environment also evolves over time. Color, sound, and texture increase in complexity.

D. The dots indicate your progress during the synchronous tapping interaction by growing into pink circles.

B

C

D

I also created hi fi mockups for mobile, as well as an interactive prototype in Hype 3 (beta) demonstrating the synchronous tapping interaction in the on boarding tutorial (after account signup).

PROTOTYPE | http://bit.ly/1zlQ3LD


Mobile Screens

Watch Screens

http://bit.ly/1zlQ3LD


I executed this user test by setting up a board between people in the same room so they could hear but not see each other. Test subjects interacted through clapping without talking to make the ‘creature’ (my partner) dance.

We incorporated testing throughout the design process. Due to technical constraints in creating prototypes of sufficiently high fidelity, we used unusual methods: one example being bodystorm testing the synchronous tapping interaction.

I additionally created a few test plans for involving real couples to address the possible issue of negative feedback loops, as well as a diary study to understand how the Creature app would work over time. Due to time constraints, these were not able to be implemented, but may be used moving forward on this project.

Future Test Plans

Bodystorm Testing

TEST EXECUTION

[email protected]

201 835 5411

www.kimliu.co

linkedin.com/in/kimliu2


thank you

mailto:[email protected]

http://www.kimliu.co

http://linkedin.com/in/kimliu2