https://www.qtinamai.com/work daily 1.0 2020-01-15 https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbe34ab4462c0f7dfa0df6/1576814358439/IMG_4612.JPG Work PICTURED: Our wall of popular millennial brands and the color palettes, typography, and imagery they use. We often referred to this wall to determine patterns and opportunities for differentiation. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbecb47a385e6587c63679/1576814374172/Color+Palette+Iterations.jpg Work PICTURED: A screenshot of a portion of my workspace when I was trying out different color palettes in the beginning. I would sample colors from our design trends wall based on the colors that the team voted resonated most with the brand values and then mock the palettes up on UI screens to provide a more realistic application of the potential color palettes. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e0267643c0d245776750fac/1577215849506/Wireframes.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e0282093c0d245776771423/1577222674502/Reservation+Conversion+Flow.jpg Work PICTURED: A look into the reservation conversion happy path that I designed the visuals, interactions, writing, and flow for. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbe009560cbb19703c0e33/1576787984153/Survey.png Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbf1bdfa0eb91d2b9ab689/1576906846247/Type+Exercise.JPG Work PICTURED: An exercise we did internally to test out typography options for header and body typefaces. We printed out the different options and asked internal team members to see which ones were most easily readable and legible to them. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbf4c175f4203eba4b5a62/1576814470338/Screen+Shot+2019-12-19+at+2.07.41+PM.png Work PICTURED: The photography direction that we wanted to pursue for the brand that resonated with our values. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfde45896c1db55a0c1f111/1576920164919/Demo+Happy+Path.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfc304af0c1a626de642512/1576814320077/Personas.jpg Work PICTURED: Some of the early personas that we discovered through the user research. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbfec988ff1e2afa99d7a3/1576814463639/Product+Features.jpg Work PICTURED: A rough map of the features that we suggested be included in the demo app based on phases of the subscription journey that a user would go through. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbe36f37c9c220b9289138/1576792561332/IMG_4608.JPG Work PICTURED: Our wall of design trends and styles that various internal members including ourselves found and felt resonated with the brand values. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbf5d58d746f18efe9739e/1576793561775/Color+Palette.jpg Work PICTURED: The final color palette that we landed on after numerous iterations. We made yellow the primary color as it is often used in traffic on the road and drew out the sense of warmth. We also coincidentally played up the traffic theme even further with the teal and peach accents that reflect the greens and reds of a stoplight. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbe282e6c775143d109d8d/1576814352806/IMG_4605.JPG Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfbf210c490504c2a97cd14/1576814476239/Screen+Shot+2019-12-19+at+1.56.15+PM.png Work PICTURED: The final typography that we landed on after numerous iterations. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfdad0ac3cccc2628885cfa/1576906006581/Cover+Photo.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e192d0612be5b2164a7392b/1578708249865/Strategy.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e0e71e7bb79b513fb222281/1578005006894/Branding.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e0f9d89e3f2e75eb7191a75/1578081704294/Deal+Gen+UX+Map.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e0e6c9de717aa3606283afa/1578005017660/Pain+Points+Table.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5def054e5cb2154c11dba6a7/1576716386080/Inconsistent+Design+Example.jpg Work PICTURED: An example of one issue we faced in the past with moving fast without a design system through a mockup of a fictional product I created. Small things like unintentional inconsistent border radius, border color, and shadows on cards unknowingly added up into a later greater need to scrape and update to make the product feel more unified. This one issue combined with additional issues called for serious design system considerations. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfd65858c6e911e4fd9d8d2/1576887706744/dsm+webpage+mock+copy.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfd654e5a4eb35ea75c47ce/1576887715174/Cover+Photo.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5def04f5cf3fcd044c82929f/1576716400034/Atomic+Design+Example.jpg Work PICTURED: An example of how we applied the atomic design methodology to creating our own UI components. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfd657427eac52da1690f70/1576887702894/Style+Guides+Example.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5def06a9c4c5ef23016c908c/1576716393227/Atomic+Design+Illustration.jpg Work PICTURED: Brad Frost’s atomic design methodology uses chemistry as an analogy to how interfaces can be set up and designed in a similar building block fashion. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deac7a8a3a50c5c1ee6c7a0/1576887781633/Wireframes.jpg Work PICTURED: Screenshot of the wireframes of an early iteration of the flow I created for initial feedback from my manager and the developers. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deacfefc23d844293500bb4/1576887792110/Error+Messages.png Work PICTURED: A common concern with errors is that, if left unidentified, the system message can be very unfriendly and difficult to understand so I worked with a developer to address as many as we could catch on our own and provided more human-friendly copy to use. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deab88eca0f8c736ee032b3/1576887773742/Return+Car_Rough+Flow+for+Discussion.jpg Work PICTURED: I drafted a quick flow chart illustrating the customer’s required actions, the internal operator’s required actions, and which platforms those actions needed to happen on to help with discussions at the kickoff meeting. Internal facing information has been omitted for confidentiality purposes. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dea0ddc772746761f341e5e/1576887760881/Cover+Photo+v3.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df18e4290c9a20b873bbed9/1576887818297/Excess+Usage+Expand+Collapse.gif Work PICTURED: Animating the expand+collapse interaction of an estimate through InVision helped developers easily understand how the actual implementation should flow. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deac81681b0d128b83f4f0e/1576887778178/Sketches.jpg Work PICTURED: A rough initial sketch of the return form flow of the return feature. I also captured running thoughts I had for potentially useful future features/functions related to returns. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dead89f9aa1093be5b5024f/1576887798847/Return+Details+Screens.jpg Work PICTURED: An example of the dynamic Return Details screen that I designed for with a goal of providing strong information scent for the user to understand its changing states through updated messaging and visual cues. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df18f07926faa6e7ddf4eea/1576887814647/Odometer+Photo Work PICTURED: Prototyping the overall return service flow allow also helped to provide a more realistic idea of what going through the experience in-app would actually feel like. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deaf8599a5b6c7918789f6f/1576887808742/Return+Overflow.png Work PICTURED: User flow diagram of the consumer facing return flow I created through Overflow.io which was shared with stakeholders, developers, and QA to communicate the final flow. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deace079a5b6c7918734015/1576887785985/Initial+Return+Screen.png Work PICTURED: An example of a part in the flow that needs to consider how many cars the user has. In order to communicate which screen to show depending on the user’s condition, I ensured that the logic for these use cases were captured along with the appropriate UI. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deb081d4d5f2571c8ace74b/1576887823604/Return+Service+Mockups.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5deae9bc9aa1093be5b718ac/1576887803638/Internal+Facing+App+Snippet.jpg Work PICTURED: A short snippet of a possible path from the internal facing returns management app tool showing a glimpse of how user input from the consumer app flows into the internal app. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df87af9c7a6cd1f9f5edd2d/1576574051939/Create+Account.png Work PICTURED: A screenshot of the basic Create Account user flow. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df86128cde8ca0f952166a2/1576574044581/Navigation+Bar.jpg Work PICTURED: Once a user advanced to the checkout/car reservation segment of their journey, we removed links to other pages in the navigation car and replaced them with information on the user’s chosen car to reduce any noise that could possibly deviate the user from completing the reservation and to provide the user a sense of affirmation of their chosen car. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df8670c5619880ca4260216/1576574066205/Card+Interactions.gif Work PICTURED: Providing hover states for the cards not only helped users detect that they were clickable, but also helped to show when something was not clickable (unavailable cars). https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df8545c3d69ea478c9f2443/1576887732776/Cover+Photo.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df88643007162372269f044/1576574194873/Empty+Account+Pages.jpg Work PICTURED: It was important for us to keep in mind what unsubscribed users would see and interact with as well so I designed empty states for pages that were dependent on a subscription. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df896ccf135863d2fc9784a/1576906794722/Collage.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5dfac65cde0331433d012dc4/1576906787928/Responsive+Tables.jpg Work PICTURED: An example of a particular component and page that we discussed responsiveness for in more detail. Although most other pages and components mainly involved how content would stack or wrap as the viewport or device shrinks or grows, this specific table component required more detailed discussion of how we wanted it to respond since content would need to be scrollable for smaller viewports and devices. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5df86593f135863d2fc5fc15/1576574059965/Button+and+Card+States.gif Work - Buttons and loading PICTURED: I worked on the interaction design for buttons and inventory card loading to help give users a better sense of anticipation and feedback throughout the site. https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e02c14e10bed97c4141d332/1577238868478/Thumbnail+1.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e02c1c210bed97c4141d8cb/1577238984340/Thumbnail+3.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e02c1df7645b07c061c5eaf/1577239013538/Thumbnail+4.jpg Work https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e02c49224832420df7708bb/1577239704605/Thumbnail+2.jpg Work https://www.qtinamai.com/about daily 0.75 2020-01-16 https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e1d2685b387c1091da15dbd/1578968725911/Photo.png About https://www.qtinamai.com/connect daily 0.75 2020-01-14 https://static1.squarespace.com/static/5aac02be2487fddc78cb225a/t/5e1d25ae4ca29a5aa43f3d7c/1578968654409/collage.png Connect A cafe+library I stumbled upon in Kyoto, Japan! Two of my favorite things. ☕️