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/vsc monthly 0.5 2021-07-15 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://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/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/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/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/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/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://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/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/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/1606160993939-DFP07RHEMRTGNT4DMB8M/TT+Persona+Kristy.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/1606161048164-1I3PBNJ8SFZFM0RJJ1IN/TT+Persona+Peter.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/shelterapp monthly 0.5 2021-06-22 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/32467fa1-cb8a-4125-b365-f9100cc98135/Desktop+-+6.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/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/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/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/1623793400344-FPK39BFJ2YEHUDHHMHM5/landing.original.png Work - Shelter App : Landing Page Redesign Original landing page design 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/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/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/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/1623793745111-4IWMWLW63PG0BQWEZ0TO/aboutApp.png Work - Shelter App : Landing Page Redesign Original about section version 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/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/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/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/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/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/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/1623800226205-48SQVY7E93JKVFB3XBZD/image+1.jpg Work - Shelter App : Landing Page Redesign Original landing page design. 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/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/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/1627313041266-PDLZAML071MFN481J4EM/ShelterMarketingPageRedesign2021Responsive.png Work - Shelter App : Landing Page Redesign - Make it stand out Landing Page design Mobile version