Kim Liu - Portfolio
Transcript of Kim Liu - Portfolio
UX DESIGNER / RESEARCHER
KIM LIU
201 835 5411
www.kimliu.co
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.
ABOUT ME PROJECTSMY PROCESSTOOLS CONTACT
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.
ABOUT ME PROJECTSMY PROCESSTOOLS CONTACT
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
DESIGNIDEATIONRESEARCHOVERVIEW
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
DESIGNIDEATIONRESEARCHOVERVIEW
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
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.
OVERVIEW SITE AUDIT RESEARCH IA/CONTENT DESIGN
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
OVERVIEW SITE AUDIT RESEARCH IA/CONTENT DESIGN
\
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
OVERVIEW SITE AUDIT RESEARCH IA/CONTENT DESIGN
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
OVERVIEW SITE AUDIT RESEARCH IA/CONTENT DESIGN
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
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
OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION
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
OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION
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.
OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION
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
OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION
Mobile Screens
Watch Screens
OVERVIEW DESIGNIDEATIONRESEARCH VALIDATION
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
201 835 5411
www.kimliu.co
linkedin.com/in/kimliu2
ABOUT ME PROJECTSMY PROCESSTOOLS CONTACT
thank you