https://www.shawnsuzuki.com/about daily 0.75 2021-04-15 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1597614278076-JIF6HZCQA3DSWSF7Q59Q/me2.png About https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1597614459138-JS1PRTQSQRUORAQDZSLZ/quote.png About https://www.shawnsuzuki.com/contact daily 0.75 2021-04-02 https://www.shawnsuzuki.com/work daily 1.0 2024-01-03 https://www.shawnsuzuki.com/work/traffictalk monthly 0.5 2021-04-01 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1615148249389-PFEYI1AJ9BAEW3RI8CC0/TT+Prototype.gif Work - Traffic Talk : Product Design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606160422118-HWD8RE2ZI9NLC85QZ1IO/competitve+analysis.png Work - Traffic Talk : Product Design - Competitive Research Calls to someone is random No control of who you talk to Chatrooms are always empty No one picks up when you call https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1598052751741-F96EZQWFBX5VTJCTC5AM/Final+graph+portfolio.png Work - Traffic Talk : Product Design - User Research I created a screener survey in google forms and used social channels like slack and linked in to check the feasibility of this product. Most people don’t talk on the phones while driving these days. People stay entertained while driving with radio, podcasts, or audio books. User safety needs to be considered seriously. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606161048164-1I3PBNJ8SFZFM0RJJ1IN/TT+Persona+Peter.png Work - Traffic Talk : Product Design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606161028576-45AVI4PIOF5MBNM1PGSK/TT+Persona+Samantha.png Work - Traffic Talk : Product Design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606160993939-DFP07RHEMRTGNT4DMB8M/TT+Persona+Kristy.png Work - Traffic Talk : Product Design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1597686864206-UI0O9OQZCUAPPPOQ7D7E/IMG_2461%404x.jpg Work - Traffic Talk : Product Design - The Idea Heuristic principles like visibility of system status, use control and freedom, consistency and standards and competitor research, drove initial designs. Usability testing was done after this phase with an Invision prototype. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1598314379534-4UZWMCX12RY62HKCE24M/lofi%2Bconcept%2Bwireframes.jpg Work - Traffic Talk : Product Design - User Flow Initial usability testing proved the flow was natural for the user and I moved forward with digitizing the initial sketches into wireframes. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606161156395-Q11JLT54R8XWYTQLK06Z/TT+Style+Guide.png Work - Traffic Talk : Product Design Purple has a lot of meanings and chose it as the primary color because to BTS (k-pop boy band), it means love and respect. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1603146734662-YETPMZVRX6ZTHW0623KS/SearchDesignExploreTT.png Work - Traffic Talk : Product Design During the design process, I proactively sought feedback from a senior product designer, ux designer, and did quick user tests with friends who use apps regularly. Spotify cards were the main inspiration AB tested designs of each screen Got feedback from other designers https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1614657392239-COEP4X7TAKY68KMKD0RM/TT+Hi-Fi+abg.png Work - Traffic Talk : Product Design - Final Thoughts The biggest thing I learned on this project is asking for specific feedback. If I wasn’t specific with what I want feedback on, I either got a lot of feedback or none at all. I found that being more specific on the kinds of feedback I need and explaining the overall thought process, helped fine tune my designs better. I also learned through collaborating, how to better display screens and to keep in mind the commerciality of the product. https://www.shawnsuzuki.com/work/homescreenredesign monthly 0.5 2021-06-16 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1615147924963-IW7WHMRNV1KEPJL32OAE/Spot+SS+homescreen.gif Work - Spot : Mobile Homescreen Redesign Concept solution https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605593269329-WYAJVRN2QQQRIBJCH7S5/competitor+analysis.png Work - Spot : Mobile Homescreen Redesign Secondary research to get familiar with other apps related to this business. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605857460386-AHCH4MTXIQ3PEAZPYUHJ/OTS+SUE+PERSONA+FIN.png Work - Spot : Mobile Homescreen Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605857445915-MAVUOR5O47XWF8CDUV5X/OTS+CHAD+PERSONA+FIN.png Work - Spot : Mobile Homescreen Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605856472301-DIJ4A4FKEWSKSFQSXGZ1/OTS+Style+Guide.png Work - Spot : Mobile Homescreen Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1597617538889-7O2QZWI8VH59VD71S1P3/roughsketch.jpg Work - Spot : Mobile Homescreen Redesign - The Idea Based on findings of what the business owners would like to see on their home screen, I pen and papered some ideas. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1604436071790-ZFRLWS3B50L9GD1DJVMM/Mobile%2BForm%2BDesign%2BExploration.jpg Work - Spot : Mobile Homescreen Redesign - Design Explorations My initial designs tried to accommodate the information I obtained from my guerrilla research. There was no user journey when I joined the team, so I tried to get all that information into a single screen. At the weekly design review, the entire Spot team talked through each section of screen 1. We figured out how to group certain sections together and simplify the home screen. Need to show current rating Need to show money saved with Spot Be able to find spotters Manage postings See matches https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1593194047760-ANG6595QIB585M6TA6IB/Organization+Home+Flow.jpg Work - Spot : Mobile Homescreen Redesign - User Flow Using user research and stakeholder feedback, this is the user flow I created to match the new home screen. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1593125925566-8B28OERPHL2C3EPHHNGF/OrgScreenDesginExploration%404x.png Work - Spot : Mobile Homescreen Redesign This design gives the user the ability to see an overview of their financials, create and fulfill gigs, find talent quickly, and get their reports. It also encompasses the stakeholder wants of star rating, money saved on hiring, and reviews. Fine tune overall look Users can navigate to desired information User friendly Easy to use https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606206936525-2W2H1F27MYZ5U83WSPAT/Spot+SS+homescreen.gif Work - Spot : Mobile Homescreen Redesign - Final Thoughts Final deliverable - app is currently in development https://www.shawnsuzuki.com/work/gigformredesign monthly 0.5 2021-06-16 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606178538771-4CBAHUZKPYLG8VNDD8R9/Spot+GIGform.gif Work - Spot : Mobile Form Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605637441371-Y13EBOWNBZKNJ8M0HFMM/competitor+analysis+form.png Work - Spot : Mobile Form Redesign I researched form styles to get a different perspective on how to approach redesigning the current form but also stay within what’s normal and natural for a user. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605645372763-X4FXTB21Y5MQT7X87SRF/OTS+Style+Guide.png Work - Spot : Mobile Form Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605637528486-ZH1TY0LPXN9EPI5ZYI3T/chad.png Work - Spot : Mobile Form Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1605637517836-TJ4JEDLAO345NX6ROUGW/OTS+SUE+PERSONA+FIN.png Work - Spot : Mobile Form Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1598095479425-GLPQUFSKKMPK6MR1OT0S/Gig+Form+Wireframes.jpg Work - Spot : Mobile Form Redesign With an initial design constraint of 1 page and non scrollable, the initial designs were done around it. These were the lo-fi wireframes driven by user research. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1598098252302-9DMH2UTX41E5ZTYQ92WQ/Gigform+Wireframe+functions.png Work - Spot : Mobile Form Redesign At this point, iterations of the design needed to line up with how the information will be displayed on the worker side of the app. We needed to make sure everything lined up for a great user experience on both the worker and organization side of the app. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1606181619551-I9GR2YZMOAXFVA1CIVZX/Gig+Form+UPDATE.png Work - Spot : Mobile Form Redesign App is currently in development for market release. https://www.shawnsuzuki.com/work/vsc monthly 0.5 2021-07-15 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1615147446474-HDDOYDRC8S2RCGMKT1DU/vsc+3.2021.gif Work - Doordash : Charity Feature Doordash + Feeding America partnership for Project Dash Banner https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1608574470182-BPA4512S1OO1MDUQ0NDA/Design+concepts.png Work - Doordash : Charity Feature Hi-fidelity wireframes of the same 3 options from above. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1614377032796-AC50J2IS0UGQGEVQZ5IH/VSC+Design+concept+wireframes.png Work - Doordash : Charity Feature 3 different design option wireframes that looks at designing a new layout or keeping it similar to other categories like ratings. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1616263359765-6KBJX54C53TBZPSEGUC3/Driver+interacting+with+iPhone+11+mockup+in+car+mount+%28Mockuuups+Studio%29.png Work - Doordash : Charity Feature A hi-fidelity mock-up showing the app in use and in context with doordash. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1617337305591-Y73NBB8G0075G2JXA1GT/usability%2Btest%2Bresults.jpg Work - Doordash : Charity Feature Usability testing results from 11 people. There’s a heat map on the device itself, their comments through the screens, and the overall vote from the 3 options provided. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1616261629105-TILYX0VNW16JV0E4T7T4/ezgif.com-gif-maker+%281%29.gif Work - Doordash : Charity Feature Here are the 2 variations of the designs I needed to confirm through user testing. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1608576553866-A3KW0E34OLDML83I2CAW/image+%287%29.png Work - Doordash : Charity Feature Top left-initial social share card design. Bottom left-Glass and Spin animation designs. Right-Giving an image that has a feeling of doing good with recognition card. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1616262228880-QS0K4QWU5H9X2NLV1HBZ/vsc+new.gif Work - Doordash : Charity Feature Click on image above to experience the app for yourself. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/04d64c49-2ca0-49ce-8739-174ea59d422a/Dasher.png Work - Doordash : Charity Feature I considered what had the lowest barrier to entry and highest visibility when starting this project. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/27759b9f-46f1-4516-8bda-a3e1d38709a2/Screen+Shot+2021-03-31+at+8.58.40+AM.png Work - Doordash : Charity Feature I sort out ideas and create goals for this portion of the project. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/a213d0f9-0519-4994-92a3-97568539e00e/VSC+Persona.png Work - Doordash : Charity Feature Phase 1 focuses on the career dashers. Phase 2 could include part-time dashers or weekend warriors. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/4aae18d4-5833-4ded-9073-d0f407ea9950/DD+VSC+Flow.png Work - Doordash : Charity Feature I needed to understand how data will flow to create the right visual queues for the service flow and social sharing design cards. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/e5f2edb4-2dc9-4ec6-a0dc-661572ccfcac/CA-VSC.png Work - Doordash : Charity Feature Checking product-market fit and to see if there was another service like this one out there. There isn't one. https://www.shawnsuzuki.com/work/shelterapp monthly 0.5 2021-06-22 https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623791855289-F7UMCSVEB1ASSOD1SWBT/LogoOnly_Purple.png Work - Shelter App : Landing Page Redesign - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623791809898-R2Q0M0UDJA7KGA2OGXZ4/shelter+logo.png Work - Shelter App : Landing Page Redesign - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623792330386-17BBC7BWG7A80S4XSHTU/beforeAndAfter.png Work - Shelter App : Landing Page Redesign - As a user who is trying to find an app that will help me get the help I’m looking for, I want to know if they can help me quickly. I decided to break down the information from the old site into more digestible bits of information that is easy to scan. The hope of this decision is to allow users to see quickly, if we can support them or not. Before and After designs of landing page. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793394910-EAW7S0W38YIIR5X3FSMI/landing.new.png Work - Shelter App : Landing Page Redesign - Make it stand out New landing page design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793400344-FPK39BFJ2YEHUDHHMHM5/landing.original.png Work - Shelter App : Landing Page Redesign Original landing page design https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626484046646-KQG89G8A1LWYCTBXIQN2/neither+1.png Work - Shelter App : Landing Page Redesign - Make it stand out Image of voting results on which landing page design would entice user to download app with 89% voting for the right 1 and 11% voting for neither. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626483090375-GORQWSTHE0EKYA2PRUJ3/landing+page+test.png Work - Shelter App : Landing Page Redesign - Make it stand out Left image is original landing page idea. Right image has the added download now button. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626483719004-WW6ARC9G4Q2BI8R3YQXL/dual+cta.png Work - Shelter App : Landing Page Redesign - Make it stand out Image of woman holding child in oversized hat and kissing them. Buttons to download now and see how. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793782585-ACKV24P9XBXSOT2C2W4Y/counties.png Work - Shelter App : Landing Page Redesign - Make it stand out Map with points showing counties currently in our database. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793770733-MB1HIXRUEZPNT691B1MS/we%27reON.png Work - Shelter App : Landing Page Redesign - Make it stand out Image with download links for desktop, tablet, and phone. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626485997574-QP20J4IHLQ0QQ40LBVU7/top5notes.png Work - Shelter App : Landing Page Redesign - Make it stand out 5 quotes from testers. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793745111-4IWMWLW63PG0BQWEZ0TO/aboutApp.png Work - Shelter App : Landing Page Redesign Original about section version https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623793898547-P2LSN3XQ5FTNZ4Q2NYHE/featuresectionOriginal.png Work - Shelter App : Landing Page Redesign Screenshots of original designs for Shelter App features and screenshots pages. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623794800312-8VM0CZ6LFRQOCXUYIGZV/Desktop+-+27.png Work - Shelter App : Landing Page Redesign - Make it stand out Screenshot of Partner Logos and Award Logos on their own carousels. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623794689085-32Z6X18D804PTJA98IA3/clout.png Work - Shelter App : Landing Page Redesign Screenshot of original section with awards and partners. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626487931358-WVPUY0T2ZA0FGK7KYNF6/contactform.png Work - Shelter App : Landing Page Redesign - The old site didn’t have a contact section in the current landing page reel. Research has shown that including a form generates more leads than a site with a separate contact page only. To solve these issues, I... Created a contact form with floating labels. Added 3 suggestions for contacting us. Before and After designs of landing page. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626486237113-YYNYWN5WT361USDCUM0D/ShelterMarketingPageRedesign2021NEW.png Work - Shelter App : Landing Page Redesign - Make it stand out New landing page design. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1623800226205-48SQVY7E93JKVFB3XBZD/image+1.jpg Work - Shelter App : Landing Page Redesign Original landing page design. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626487017752-NL9W7MIRUCRWAPE9CQIN/ShelterMarketingPageRedesign2021MidResponsive.png Work - Shelter App : Landing Page Redesign - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1626487122190-J959JFX1WZBYPTSV5WY1/ShelterMarketingPageRedesign2021Responsive.png Work - Shelter App : Landing Page Redesign - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1627313041266-PDLZAML071MFN481J4EM/ShelterMarketingPageRedesign2021Responsive.png Work - Shelter App : Landing Page Redesign - Make it stand out Landing Page design Mobile version https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/1627312804986-LOX0M27HF9H5O2W3RYEO/singleview.png Work - Shelter App : Landing Page Redesign - Make it stand out Landing Page design Desktop version https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/e77227ac-8495-418b-9ba9-f6acb6efd062/Desktop+-+2.png Work - Shelter App : Landing Page Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/0a30dfd9-c402-455b-bb09-44f213c3f281/Desktop+-+3.png Work - Shelter App : Landing Page Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/cc0cc341-e87e-46d4-a887-489ffefb0620/Desktop+-+4.png Work - Shelter App : Landing Page Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/c610c765-4562-4c1a-8798-ada365c6b1bc/Desktop+-+5.png Work - Shelter App : Landing Page Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/9cba0db2-eb3d-4de7-a515-535aae8c3a8e/Desktop+-+1.png Work - Shelter App : Landing Page Redesign https://images.squarespace-cdn.com/content/v1/5e7060ec0bca553b364c7349/32467fa1-cb8a-4125-b365-f9100cc98135/Desktop+-+6.png Work - Shelter App : Landing Page Redesign