Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kim Liu - Portfolio Mar 2015

3,407 views

Published on

UX Portfolio

Published in: Design

Kim Liu - Portfolio Mar 2015

  1. 1. UX DESIGNER / RESEARCHER KIM LIU kimliu17@gmail.com 201 835 5411 www.kimliu.co linkedin.com/in/kimliu2
  2. 2. 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…
  3. 3. 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
  4. 4. INSTAGRAM SUNDARA CREATURE Personal 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
  5. 5. 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
  6. 6. 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
  7. 7. 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 BACKSTORY Diana 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 CASESBEHAVIOR 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. kimliu17@gmail.com 201 835 5411 www.kimliu.co linkedin.com/in/kimliu2 ABOUT ME PROJECTSMY PROCESSTOOLS CONTACT thank you

×