https://vsquaredesign.com vsquaredesign.com Wed, 15 May 2024 22:33:40 +0000 https://vsquaredesign.com en https://vsquaredesign.com/Splash-Page Wed, 05 Jun 2019 16:33:32 +0000 vsquaredesign.com https://vsquaredesign.com/Splash-Page Hi there.I’m Vladimir, a UX/Product Designer based in San Francisco. ︎ I enjoy working on complex problems&nbsp; and figuring out elegant solutions that improve people’s lives. &nbsp; Take a look at my work below!&nbsp; https://vsquaredesign.com/Adobe-App-Recommender Wed, 05 Jun 2019 16:33:34 +0000 vsquaredesign.com https://vsquaredesign.com/Adobe-App-Recommender Adobe App Recommender Helping top of funnel customers find the product that best suits their needs <img width="3092" height="1484" width_o="3092" height_o="1484" data-src="https://freight.cargo.site/t/original/i/ef569614ead052366de53aa76b2f4f097f5191260433ddac278ab1d31b9243b8/Screen-Shot-2022-09-14-at-3.14.13-PM.png" data-mid="152990469" border="0" data-scale="92" src="https://freight.cargo.site/w/1000/i/ef569614ead052366de53aa76b2f4f097f5191260433ddac278ab1d31b9243b8/Screen-Shot-2022-09-14-at-3.14.13-PM.png" />Click here to view the live page of the app recommender The ChallengeWe identified a need from customers new to the Adobe creative suite that were having a hard time finding the right product or plan. <img width="3318" height="580" width_o="3318" height_o="580" data-src="https://freight.cargo.site/t/original/i/f33a77d71395c02f57faabdde2acff334fd1eed3d96efa80a69f98023fdcf244/Screen-Shot-2022-10-03-at-1.25.06-PM.png" data-mid="154748063" border="0" src="https://freight.cargo.site/w/1000/i/f33a77d71395c02f57faabdde2acff334fd1eed3d96efa80a69f98023fdcf244/Screen-Shot-2022-10-03-at-1.25.06-PM.png" /> <img width="896" height="672" width_o="896" height_o="672" data-src="https://freight.cargo.site/t/original/i/c634d48f931aaa0ad46c524e838357423b5dc725779713346b2a471acb861655/Adobe-Project-Goals-Image-for-Portfolio-3.png" data-mid="169220811" border="0" src="https://freight.cargo.site/w/896/i/c634d48f931aaa0ad46c524e838357423b5dc725779713346b2a471acb861655/Adobe-Project-Goals-Image-for-Portfolio-3.png" /> My Role:Conduct user research &amp; assess user testing feedbackCoordinate across multiple teams on project timeline and goalsVisual &amp; Interaction designPrototyping &amp; designing user flows“Pixel perfect” implementation of design Project Goals Capture top of funnel customersConvert free trial users into subscribersMinimize drop-off during check-out processCreate targeted content for users <img width="870" height="638" width_o="870" height_o="638" data-src="https://freight.cargo.site/t/original/i/4a0b6bf573df6e11ea0a17d7351271c3ae3c3914acc3213cee1418a017e53a3f/Adobe-Project-Goals-Image-for-Portfolio.png" data-mid="169219928" border="0" src="https://freight.cargo.site/w/870/i/4a0b6bf573df6e11ea0a17d7351271c3ae3c3914acc3213cee1418a017e53a3f/Adobe-Project-Goals-Image-for-Portfolio.png" /> Design Goals <img width="1000" height="828" width_o="1000" height_o="828" data-src="https://freight.cargo.site/t/original/i/777ec54b0c04063f2d149b8d7528ec509342bc6d0c7889397f66c5395a873c24/Adobe-Project-Goals-Image-for-Portfolio-II.png" data-mid="169220289" border="0" src="https://freight.cargo.site/w/1000/i/777ec54b0c04063f2d149b8d7528ec509342bc6d0c7889397f66c5395a873c24/Adobe-Project-Goals-Image-for-Portfolio-II.png" /> Make answering questions an enjoyable experience and not a choreCreate a cohesive visual language from beginning of flow to final checkoutHave the app recommender feel intuitive and easy to understand through design queuesEncourage a free trial with primary CTAs Wireframe Mockup <img width="1668" height="768" width_o="1668" height_o="768" data-src="https://freight.cargo.site/t/original/i/7c003381dc88ab94b53c57e70a1e58ffaefb8310c15e39a1035e169f1c527292/Adobe-Wireframe.png" data-mid="173623994" border="0" src="https://freight.cargo.site/w/1000/i/7c003381dc88ab94b53c57e70a1e58ffaefb8310c15e39a1035e169f1c527292/Adobe-Wireframe.png" /> The SolutionCreate a compelling multi-step questionnaire that helps steer new customers to a product or plan that suits their needs. <img width="16512" height="6240" width_o="16512" height_o="6240" data-src="https://freight.cargo.site/t/original/i/69d9ec5533fa62fdc11087e07f2c6baaad3945a6a1edc88c0a9d452dd9b8c674/Adobe-App-Frames.jpg" data-mid="154992328" border="0" src="https://freight.cargo.site/w/1000/i/69d9ec5533fa62fdc11087e07f2c6baaad3945a6a1edc88c0a9d452dd9b8c674/Adobe-App-Frames.jpg" /> Project Learnings and Pain Points Don’t fall in love with your first design Make sure design components are scalable across devicesBalance when to fight for your design vision vs. understanding other project team constraintsValidate (or disprove) design choices through user feedback <img width="584" height="1176" width_o="584" height_o="1176" data-src="https://freight.cargo.site/t/original/i/1aaf574044252c2e9e80550aa6da82b2054e4faa39fd7b3d7703bbcf6e89a576/Adobe-Project-Goals-Image-for-Portfolio-4.png" data-mid="169225134" border="0" data-scale="48" src="https://freight.cargo.site/w/584/i/1aaf574044252c2e9e80550aa6da82b2054e4faa39fd7b3d7703bbcf6e89a576/Adobe-Project-Goals-Image-for-Portfolio-4.png" /> Next Project︎ Running on Cargo https://vsquaredesign.com/Product-Design Tue, 09 Mar 2021 19:58:32 +0000 vsquaredesign.com https://vsquaredesign.com/Product-Design Product Design&nbsp; Risk Management as a Service <img width="2165" height="1355" width_o="2165" height_o="1355" data-src="https://freight.cargo.site/t/original/i/81d72ff5f057eab12d2cc8794bf67cf5868b5ab4a014e2618bcbc3f3a822cf06/Encircle_Product-Design.png" data-mid="105187723" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/81d72ff5f057eab12d2cc8794bf67cf5868b5ab4a014e2618bcbc3f3a822cf06/Encircle_Product-Design.png" /> Setting the contextA product to mitigate risk in construction projects for all parties. Create a platform for: Homeowners&nbsp;Building contractorsBanks &amp; lending institutionsTo address known pain points such as: Payments Tracking of construction progressChange orders <img width="588px;" height="440px;" src="https://freight.cargo.site/t/original/i/e56164b37c0bd7aa943c795a1d41a8abab2954f8b8d1d22e9d2fe6889e06fdcb/embedded-09dc1b96.png" style="width: 501.774px; height: 375.477px;" data-scale="100"> &nbsp; &nbsp; &nbsp; Platforms: &nbsp; &nbsp; &nbsp; iOS, ANDROID <img width="806" height="1558" width_o="806" height_o="1558" data-src="https://freight.cargo.site/t/original/i/182bcbec6c58417b833897425ac0a58563f80a2f3f8deb0be8f4ed2f3976b374/Screen-Shot-2021-03-09-at-12.01.21-PM.png" data-mid="101420033" border="0" data-scale="95" src="https://freight.cargo.site/w/806/i/182bcbec6c58417b833897425ac0a58563f80a2f3f8deb0be8f4ed2f3976b374/Screen-Shot-2021-03-09-at-12.01.21-PM.png" /> My RoleConduct user research &amp; testingProduct strategyAligning stakeholders on product goalsVisual &amp; Interaction designPrototyping &amp; designing user flowsUser testing feedback &amp; QA with devs Design Goals <img width="2990" height="1174" width_o="2990" height_o="1174" data-src="https://freight.cargo.site/t/original/i/70f6a122e6adba03a7b56ce26416affd275d85698a404e3ff3cfd8f4e7683eb5/Screenshot-2023-02-21-at-9.25.49-PM.png" data-mid="169267088" border="0" src="https://freight.cargo.site/w/1000/i/70f6a122e6adba03a7b56ce26416affd275d85698a404e3ff3cfd8f4e7683eb5/Screenshot-2023-02-21-at-9.25.49-PM.png" /> Product Goals Streamline the construction finance arenaSend Verified DisbursementsScore Loan Health of a project in real-timeVirtual inspections of building phases STEP&nbsp; 1: Approve Submitted Work from Subcontractors &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="952" height="1576" width_o="952" height_o="1576" data-src="https://freight.cargo.site/t/original/i/62a8cca7ad7fadbab0cc1cb277382f2b947aa1fd686203809769202c565e0596/Step-1-3.gif" data-mid="105915392" border="0" data-scale="69" src="https://freight.cargo.site/w/952/i/62a8cca7ad7fadbab0cc1cb277382f2b947aa1fd686203809769202c565e0596/Step-1-3.gif" /> User receives notification on homescreen that there is work from subcontractors to reviewClicks on notificationLooks at supporting documentation provided&nbsp;Compares progress of work with amount requestedApproves or declines sign off on milestone STEP&nbsp; 2: Upload Supporting Documents &nbsp; &nbsp; &nbsp; &nbsp; <img width="984" height="1568" width_o="984" height_o="1568" data-src="https://freight.cargo.site/t/original/i/b5b53a2533517b58177f08d9d74a654017382d61035823088f816124de713cc2/Step-2-1.gif" data-mid="105913434" border="0" data-scale="76" src="https://freight.cargo.site/w/984/i/b5b53a2533517b58177f08d9d74a654017382d61035823088f816124de713cc2/Step-2-1.gif" /> User clicks on one of their active projectsScrolls through the project milestonesDrills down into a checkpointClicks on thumbnail of media that is requiredUploads a supporting photo or video STEP&nbsp; 3: Submit Uploaded Supporting&nbsp; Documents &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="1116" height="1628" width_o="1116" height_o="1628" data-src="https://freight.cargo.site/t/original/i/1a9655d8d34ad64bb58d0e1ac584bf6aab4ab4d4667432ba4f95e65f2bbd6500/Step-3.gif" data-mid="105911494" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/1a9655d8d34ad64bb58d0e1ac584bf6aab4ab4d4667432ba4f95e65f2bbd6500/Step-3.gif" /> User expands bottom drawerUploads invoicesVerifies dollar amount requestedSubmits draw request Project Learnings and Pain Points Ensure proper functionality of built elements through testing and QATake time to cultivate relationships with dev team to walk through designsHave a holistic vision of how various users will engage with the product as well as one another through the product <img width="1588" height="834" width_o="1588" height_o="834" data-src="https://freight.cargo.site/t/original/i/962e92f5ddbcb1f5bbcf3ecb9d037cfd9e8e9b1959cc7253ef5499e794978cc0/Screenshot-2023-02-22-at-10.07.30-PM.png" data-mid="169404289" border="0" src="https://freight.cargo.site/w/1000/i/962e92f5ddbcb1f5bbcf3ecb9d037cfd9e8e9b1959cc7253ef5499e794978cc0/Screenshot-2023-02-22-at-10.07.30-PM.png" /> Next Project︎ https://vsquaredesign.com/Data-Visualization Tue, 09 Mar 2021 19:35:34 +0000 vsquaredesign.com https://vsquaredesign.com/Data-Visualization Data VisualizationCreation of dashboard for banks and lending institutions <img width="4060" height="2694" width_o="4060" height_o="2694" data-src="https://freight.cargo.site/t/original/i/98d8f0b174b79f1a2cdc64fb296402f2a7875308820a28ded22d641a7137ec0e/Lender_Thumbnail.png" data-mid="104564071" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/98d8f0b174b79f1a2cdc64fb296402f2a7875308820a28ded22d641a7137ec0e/Lender_Thumbnail.png" /> <img width="1476" height="936" width_o="1476" height_o="936" data-src="https://freight.cargo.site/t/original/i/ecf5a80edade8a540df1c134560ef55e763d03167b048d070885730d9394f28d/Current-Draw-Request_Demo2-DRAW-INSIGHTS.png" data-mid="101418361" border="0" src="https://freight.cargo.site/w/1000/i/ecf5a80edade8a540df1c134560ef55e763d03167b048d070885730d9394f28d/Current-Draw-Request_Demo2-DRAW-INSIGHTS.png" /> <img width="1476" height="936" width_o="1476" height_o="936" data-src="https://freight.cargo.site/t/original/i/069a7f0cb58b1a931675dee39d1431c56873863e72aea9ded6fecae919590b44/Current-Draw-Request_Demo2-DRAW-INSIGHTS.png" data-mid="101418026" border="0" src="https://freight.cargo.site/w/1000/i/069a7f0cb58b1a931675dee39d1431c56873863e72aea9ded6fecae919590b44/Current-Draw-Request_Demo2-DRAW-INSIGHTS.png" /> Dive deeper and test out the prototype here&nbsp; Next Project︎ https://vsquaredesign.com/Design-System Thu, 12 Jan 2023 01:15:57 +0000 vsquaredesign.com https://vsquaredesign.com/Design-System DESIGN SYSTEM that effortlessly scales across platforms <img width="1952" height="891" width_o="1952" height_o="891" data-src="https://freight.cargo.site/t/original/i/c752c98c5b5258908e7caf0556a451f88b796be862cc4fb46e2abaee5994c463/Design-System.png" data-mid="169407260" border="0" data-scale="92" src="https://freight.cargo.site/w/1000/i/c752c98c5b5258908e7caf0556a451f88b796be862cc4fb46e2abaee5994c463/Design-System.png" /> Design Principles <img width="921" height="921" width_o="921" height_o="921" data-src="https://freight.cargo.site/t/original/i/7fa693d499985d473ccb6dc6f4217747def07ae5988f8ade0a753f38860f8d60/principles_rational2x_1617048319517.png" data-mid="179870601" border="0" data-scale="53" src="https://freight.cargo.site/w/921/i/7fa693d499985d473ccb6dc6f4217747def07ae5988f8ade0a753f38860f8d60/principles_rational2x_1617048319517.png" /> Every component, pattern, and principle is informed by research and thoughtful testing. Inclusive design:We all differ in our abilities to see, perceive colors, hear, control our motions, concentrate, and understand concepts. Inclusive design makes room for as many people as possible. <img width="921" height="921" width_o="921" height_o="921" data-src="https://freight.cargo.site/t/original/i/27a82e7fbef266a0d6d52975e1d53b1deb9e9ddf8c2fe22b6ddf5275f0b98382/principles_human2x_1617048319534.png" data-mid="179873306" border="0" data-scale="56" src="https://freight.cargo.site/w/921/i/27a82e7fbef266a0d6d52975e1d53b1deb9e9ddf8c2fe22b6ddf5275f0b98382/principles_human2x_1617048319534.png" /> Platform scale <img width="1952" height="440" width_o="1952" height_o="440" data-src="https://freight.cargo.site/t/original/i/469270a417dd4c5bddb4ae43db4985f3b92e8a3e3948094435aee8c7f084a739/platform-scale_hero_desktop2x_1649709002989.png" data-mid="179871026" border="0" src="https://freight.cargo.site/w/1000/i/469270a417dd4c5bddb4ae43db4985f3b92e8a3e3948094435aee8c7f084a739/platform-scale_hero_desktop2x_1649709002989.png" />A design system for multiple platforms. There are two different scales for user interfaces in order to accommodate cursor and touch experiences: a desktop scale and a mobile scale. System componentsProduct Cards <img width="1200" height="853" width_o="1200" height_o="853" data-src="https://freight.cargo.site/t/original/i/0f40abc174e27ff753c8dc1e9c1273e3654f2c97b53c6e45daaeba4b547c82b2/Pattern_1.png" data-mid="179870337" border="0" data-scale="65" src="https://freight.cargo.site/w/1000/i/0f40abc174e27ff753c8dc1e9c1273e3654f2c97b53c6e45daaeba4b547c82b2/Pattern_1.png" /> <img width="973" height="448" width_o="973" height_o="448" data-src="https://freight.cargo.site/t/original/i/f566c3a03cbdbbc836aaf80546f40eb3bf599b5d12636cc38a6e0392ea49a9fd/Cards.png" data-mid="179872873" border="0" data-scale="66" src="https://freight.cargo.site/w/973/i/f566c3a03cbdbbc836aaf80546f40eb3bf599b5d12636cc38a6e0392ea49a9fd/Cards.png" />Marquee headers <img width="1920" height="560" width_o="1920" height_o="560" data-src="https://freight.cargo.site/t/original/i/9116b433101706c89dcac5129d20ad2ca5a2f181bd91c46bee3aa55b7c1d7f79/Aside_Standard_Medium_Left.png" data-mid="179871669" border="0" src="https://freight.cargo.site/w/1000/i/9116b433101706c89dcac5129d20ad2ca5a2f181bd91c46bee3aa55b7c1d7f79/Aside_Standard_Medium_Left.png" /> <img width="1920" height="560" width_o="1920" height_o="560" data-src="https://freight.cargo.site/t/original/i/6e92d143bc5f48274e59f08ada2c28bde9d6ac4f56b56323841c783241fda2c1/Pattern2.png" data-mid="179872151" border="0" src="https://freight.cargo.site/w/1000/i/6e92d143bc5f48274e59f08ada2c28bde9d6ac4f56b56323841c783241fda2c1/Pattern2.png" /> Next Project︎ https://vsquaredesign.com/Bus-Shelter-Ad-Campaign Wed, 15 May 2024 22:33:40 +0000 vsquaredesign.com https://vsquaredesign.com/Bus-Shelter-Ad-Campaign Bus Shelter Ad Campaign <img width="1440" height="372" width_o="1440" height_o="372" data-src="https://freight.cargo.site/t/original/i/9e7a57879d890e920f7f51d4fdba6bf6167aa915bb61300a97123272a4c7d94d/TL_red_pattern_wave-1.png" data-mid="211009372" border="0" src="https://freight.cargo.site/w/1000/i/9e7a57879d890e920f7f51d4fdba6bf6167aa915bb61300a97123272a4c7d94d/TL_red_pattern_wave-1.png" />Supporting small businesses through visual storytelling <img width="2326" height="1748" width_o="2326" height_o="1748" data-src="https://freight.cargo.site/t/original/i/539d07e9fa3f9f541b45155d7afc3d2d9a8ddb72f0d297947df2d0a23eb7f823/Untitled-7.jpg" data-mid="211000284" border="0" src="https://freight.cargo.site/w/1000/i/539d07e9fa3f9f541b45155d7afc3d2d9a8ddb72f0d297947df2d0a23eb7f823/Untitled-7.jpg" /> The Brief:&nbsp; I was approached by TLCBD to design an ad campaign&nbsp; that showcases the amazing cuisine that the Tenderloin has to offer&nbsp; from all over the world. Design Language &amp; Inspiration: <img width="3000" height="1582" width_o="3000" height_o="1582" data-src="https://freight.cargo.site/t/original/i/4d7a0abee52ddac9cc6dfcd046f57bf8e35c2ce6c281446f4e4dd2ec61e7f4f3/Screenshot-2024-05-15-at-11.44.47-PM.png" data-mid="211010642" border="0" src="https://freight.cargo.site/w/1000/i/4d7a0abee52ddac9cc6dfcd046f57bf8e35c2ce6c281446f4e4dd2ec61e7f4f3/Screenshot-2024-05-15-at-11.44.47-PM.png" /> <img src="https://images.squarespace-cdn.com/content/v1/63da9f8b8c7f4c65708640a3/7363e01f-371f-490c-8c21-96a4531435a0/teal_burst.png" width="263" height="253" style="width: 61.8444px; height: 59.4929px;" data-scale="7">I knew I wanted the ads to have a visual pop and catch the eyes of people walking by or waiting at the bus stop so I looked towards&nbsp; the colors &amp; patterns already in use on the visittenderloin.com site for inspiration. <img src="https://images.squarespace-cdn.com/content/v1/63da9f8b8c7f4c65708640a3/31556dc7-9dcb-43ad-9af7-06b9c339001f/yellow_line_large.png" width="560" height="44" style="width: 300.387px; height: 23.6019px;" data-scale="34"> Six posters were created highlighting restaurants in the Tenderloin district: <img width="13484" height="12416" width_o="13484" height_o="12416" data-src="https://freight.cargo.site/t/original/i/d6775f9f4edae157e480d784c516dc91c3f76f574251c7342ef4d5e2ed3137fa/Collection-of-Bus-Shelter-variants.jpg" data-mid="211004393" border="0" src="https://freight.cargo.site/w/1000/i/d6775f9f4edae157e480d784c516dc91c3f76f574251c7342ef4d5e2ed3137fa/Collection-of-Bus-Shelter-variants.jpg" />The final products on display at local bus stops: <img width="1200" height="1600" width_o="1200" height_o="1600" data-src="https://freight.cargo.site/t/original/i/6af4ae9947f6e4ca54a02c97c6d69f2c8d01bf8aeb9fe1268a21d3ba94999b9d/370024002955048204.jpg" data-mid="211010425" border="0" src="https://freight.cargo.site/w/1000/i/6af4ae9947f6e4ca54a02c97c6d69f2c8d01bf8aeb9fe1268a21d3ba94999b9d/370024002955048204.jpg" /> <img width="2268" height="4032" width_o="2268" height_o="4032" data-src="https://freight.cargo.site/t/original/i/213b1af59bd3b30d27ffb61ccec52c979103c1468e64ef038ae7bbac4620d19c/PXL_20240426_170629122.MP3.jpg" data-mid="211010272" border="0" src="https://freight.cargo.site/w/1000/i/213b1af59bd3b30d27ffb61ccec52c979103c1468e64ef038ae7bbac4620d19c/PXL_20240426_170629122.MP3.jpg" /> <img width="1440" height="372" width_o="1440" height_o="372" data-src="https://freight.cargo.site/t/original/i/837cc95f32f6a1b9f415b0e8596df3ebf90b332a0654f598aba45fe3351c4604/TL_red_pattern_wave-up.png" data-mid="211010169" border="0" src="https://freight.cargo.site/w/1000/i/837cc95f32f6a1b9f415b0e8596df3ebf90b332a0654f598aba45fe3351c4604/TL_red_pattern_wave-up.png" /> https://vsquaredesign.com/MyCarbon-Trackr-Mobile-App Tue, 03 Sep 2019 22:34:39 +0000 vsquaredesign.com https://vsquaredesign.com/MyCarbon-Trackr-Mobile-App MyCarbon Trackr&nbsp; <img width="3000" height="2250" width_o="3000" height_o="2250" data-src="https://freight.cargo.site/t/original/i/ac8ca1be397929ef164fa43f0b740995eb7509c72f609e0f70c1b6669beba287/My-Carbon-Trackr-Thumbnail.png" data-mid="107575294" border="0" src="https://freight.cargo.site/w/1000/i/ac8ca1be397929ef164fa43f0b740995eb7509c72f609e0f70c1b6669beba287/My-Carbon-Trackr-Thumbnail.png" /> Taking on Your Carbon Footprint, One Trip At a Time &nbsp; Project Overview MyCarbon Trackr is a mobile application that helps keep track of your carbon footprint based on your transportation choices.&nbsp; Project Details2 week duration My Role: UX Designer &amp; Researcher Solo project Methods Interviewing User Journeys User Flows User Archetypes Storyboarding Competitive / Comparative Analysis &nbsp;&nbsp; Wireframing The Challenge Raising AwarenessClimate change is no longer an abstract issue we can choose to ignore. Rising sea levels, devastating wildfires and heatwaves are now a part of our daily news cycle. After conducting research on the topic of carbon emissions, I discovered some pretty eye-opening numbers. The average American’s carbon footprint is 20 metric tons per year, resulting in 5.1 billion metric tons of CO2 emitted by just the United States alone. It is easy to feel like these pressing issues are too large for any one person to begin to address. The challenge that came into focus was how can I help empower individuals to learn more about what their daily transportation carbon footprint is and create new habits that will reduce their CO2 impact.&nbsp; &nbsp;<img width="2540" height="844" width_o="2540" height_o="844" data-src="https://freight.cargo.site/t/original/i/4645745cf8cb30e43118ffcf313171be86ee9ff1f8c15a25959545fb8398314b/Diagram.jpg" data-mid="53676915" border="0" src="https://freight.cargo.site/w/1000/i/4645745cf8cb30e43118ffcf313171be86ee9ff1f8c15a25959545fb8398314b/Diagram.jpg" /> The Proposed SolutionChanging Our Habits MyCarbon Trackr is a mobile app that allows its users to easily visualize and keep track of their transportation carbon footprint. By shining light on the users transportation habits it will raise their awareness, allow them to make educated decisions and empower them to do their part in tackling climate change. The success of the application can be measured quantitatively through user engagement and an overall reduction in their carbon footprint. Initial Steps: Research Getting To Know The UsersThe beginning of MyCarbon Trackr’s journey from concept to app began with research. During this important phase of the design process&nbsp;I wanted to focus on three main components: 1. Interviews with potential users.&nbsp; 2. Affinity mapping and user personas. 3. Feature prioritization based on insights. User InterviewsLearning Where the Need IsBefore conducting user interviews, I wanted to ensure that the interview questions that I wrote out would be the most conducive towards gaining the information I was looking for. This proved challenging, as I didn’t want the questions to be leading, or promote any sort of confirmation bias. The top three things that I wanted to learn during the interviews were: &nbsp; What kind of demand is there for the MyCarbon Trackr app? How can the MyCarbon Trackr app help reduce any pain points users currently have?What are the type of ways users can interact with the MyCarbon Trackr app? Once I had a framework on the core questions I wanted to explore, I conducted five in-person interviews with a demographically diverse pool of users.The ResultsThe interviews revealed several recurrent pain points that every interviewee experienced in relation to their carbon footprint. The most popular statements include the following:“I have no idea what my carbon footprint is!”“I would be very curious to find out what my CO2 emissions are.”&nbsp; “I want something that autologs my commute and does all the work for me.” Affinity MappingNoticing Common Threads <img width="2790" height="1584" width_o="2790" height_o="1584" data-src="https://freight.cargo.site/t/original/i/a36c69333dd6369243840d44d34e989598f087457e7ab559fd46108432eab40d/Tabloid---1-1.jpg" data-mid="53784138" border="0" src="https://freight.cargo.site/w/1000/i/a36c69333dd6369243840d44d34e989598f087457e7ab559fd46108432eab40d/Tabloid---1-1.jpg" /> Identifying our target usersHoning in on a Design SolutionAfter I synthesized the user interview data, I was able to better identify who my target users are, their needs and their pain points.&nbsp; I wove together this information to create several user personas that are strongly rooted in research. Each persona illustrates the motivations, barriers, and needs that different MyCarbon Trackr users could potentially have. <img width="2200" height="1400" width_o="2200" height_o="1400" data-src="https://freight.cargo.site/t/original/i/372c96c09e7832b4c80f60a5d3be081aec46d8279c2d32e26b288ed3d87b2802/Conscious-Catherine.jpg" data-mid="53656828" border="0" src="https://freight.cargo.site/w/1000/i/372c96c09e7832b4c80f60a5d3be081aec46d8279c2d32e26b288ed3d87b2802/Conscious-Catherine.jpg" /><img width="2200" height="1400" width_o="2200" height_o="1400" data-src="https://freight.cargo.site/t/original/i/6aa45cb7bcb15c2401cf60bdf12b46de6313114ed8c963378d4a6636bb54381c/Data-Dan.jpg" data-mid="53369734" border="0" src="https://freight.cargo.site/w/1000/i/6aa45cb7bcb15c2401cf60bdf12b46de6313114ed8c963378d4a6636bb54381c/Data-Dan.jpg" /><img width="2200" height="1400" width_o="2200" height_o="1400" data-src="https://freight.cargo.site/t/original/i/01429285744c5bce23eba487a233d6adde46fa604a81d796fe58ab46d379dee2/Early-Adopter-Ethan.jpg" data-mid="53656829" border="0" src="https://freight.cargo.site/w/1000/i/01429285744c5bce23eba487a233d6adde46fa604a81d796fe58ab46d379dee2/Early-Adopter-Ethan.jpg" /><img width="2200" height="1400" width_o="2200" height_o="1400" data-src="https://freight.cargo.site/t/original/i/e5d3bec421efbf54f1d5bf239ffebe4cf873524e28c57807ade3445094925bc4/Leaderboard-Lisa.jpg" data-mid="53656830" border="0" src="https://freight.cargo.site/w/1000/i/e5d3bec421efbf54f1d5bf239ffebe4cf873524e28c57807ade3445094925bc4/Leaderboard-Lisa.jpg" />StoryboardingWeaving a NarrativePulling from my user personas I began to draw out a storyboard illustrating an experience a user would have with the MyCarbon Trackr app. This exercise helped me visualize potential touchpoints as I embarked upon my initial design.&nbsp;<img width="11584" height="3168" width_o="11584" height_o="3168" data-src="https://freight.cargo.site/t/original/i/006acb6502c63c0efb72c57c92cad9d210235f5e3eaf041f5a51c6e4d3df1bd7/Storyboarding-1.jpg" data-mid="53728669" border="0" src="https://freight.cargo.site/w/1000/i/006acb6502c63c0efb72c57c92cad9d210235f5e3eaf041f5a51c6e4d3df1bd7/Storyboarding-1.jpg" />Paper Prototyping Learning Through Testing For my next step I wanted to quickly iterate some paper prototypes to learn if my design was user friendly and gain insights on how it could be improved. The three tasks I asked users to complete included creating an account, sharing their leaderboard status and viewing their weekly emissions total. All 5 of the users I tested were able to complete all of the tasks without any help or prompts.Task 1: Creating an AccountHere, the user was asked to set up an account. All of the users breezed through, and even stated that the flow felt “easy”, “intuitive”, and “quick” to navigate. <img width="4000" height="1100" width_o="4000" height_o="1100" data-src="https://freight.cargo.site/t/original/i/ca75204a9233912f21a8d1f5763cd489824bad9bae1540fed96952cff58b5e30/My-Carbon-Trackr-2.jpg" data-mid="54041345" border="0" src="https://freight.cargo.site/w/1000/i/ca75204a9233912f21a8d1f5763cd489824bad9bae1540fed96952cff58b5e30/My-Carbon-Trackr-2.jpg" />Task 2: Sharing Leaderboard Status For this task the user was asked to locate and share their leaderboard status. Some of the testers had a little trouble locating the floating action button where the leaderboard icon was tucked away but once they found it they completed the task without any further difficulty. <img width="4000" height="1100" width_o="4000" height_o="1100" data-src="https://freight.cargo.site/t/original/i/ba8a16dc4978f865366bfc2c7592a85d0cb0433074283d864fd607fa3a370370/Task-2.jpg" data-mid="54043683" border="0" src="https://freight.cargo.site/w/1000/i/ba8a16dc4978f865366bfc2c7592a85d0cb0433074283d864fd607fa3a370370/Task-2.jpg" />Task 3: Viewing Weekly Emissions TotalThe final task of a user viewing their weekly carbon emissions was a fairly straightforward prompt. What I was curious about is if any of the users would be able to find a secondary way of reaching the stats page by holding down on their profile image. Since this type of haptic touch is difficult to test for on a paper prototype all of the users accessed their stats by way of the “fab”. <img width="4000" height="1100" width_o="4000" height_o="1100" data-src="https://freight.cargo.site/t/original/i/9b97365667f9ddc313cff4e85a9ba402151a926b128f72a07922c8a576d4c1e1/Task-3.jpg" data-mid="54118588" border="0" src="https://freight.cargo.site/w/1000/i/9b97365667f9ddc313cff4e85a9ba402151a926b128f72a07922c8a576d4c1e1/Task-3.jpg" />Wireframing Setting The Design FrameworkBefore I began wireframing I looked at a variety of different apps and took note of which styles, sequences, and motifs could inform my design. One key consideration that stayed with me during this exercise was that I wanted to design something clean, elegant and easy to use.Task 1 Getting into wireframes was an exciting step because it allowed me to begin to play with colors, typography and visual hierarchies. Here, the onboarding process is made as simple and straightforward as possible through the help of a clean palette and consistent layout.&nbsp; <img width="5880" height="2168" width_o="5880" height_o="2168" data-src="https://freight.cargo.site/t/original/i/3205a52c65bf017e2bf2fb532209d96872f828a7076020f10bc848673141bff3/Frame-1.jpg" data-mid="54204174" border="0" src="https://freight.cargo.site/w/1000/i/3205a52c65bf017e2bf2fb532209d96872f828a7076020f10bc848673141bff3/Frame-1.jpg" />Task 2 The Leaderboard and the ability to share to social media was an important element that went through multiple iterations in order to get right as these were both important features in the MyCarbon Trackr app.&nbsp;&nbsp; <img width="5880" height="2168" width_o="5880" height_o="2168" data-src="https://freight.cargo.site/t/original/i/0b2d5669cc8e56abe2176649729d67b07a0eba5dadf184f3c60543eeb79b862d/Task-2-1.jpg" data-mid="54216205" border="0" src="https://freight.cargo.site/w/1000/i/0b2d5669cc8e56abe2176649729d67b07a0eba5dadf184f3c60543eeb79b862d/Task-2-1.jpg" /> Task 3At the core of the MyCarbon Trackr app is the ability to quantify abstract data and make it fun, meaningful and easily digestible for the user to process and interact with. The ‘My Activity’ feature allows the user to gain an understanding of their transit carbon footprint across different spans of time.&nbsp;<img width="5880" height="2168" width_o="5880" height_o="2168" data-src="https://freight.cargo.site/t/original/i/abc6c379b59b0d22960e5ad7c5c7c93df4d2a1d83d6aa5806dddd08132af3114/Task-3-1.jpg" data-mid="54265208" border="0" src="https://freight.cargo.site/w/1000/i/abc6c379b59b0d22960e5ad7c5c7c93df4d2a1d83d6aa5806dddd08132af3114/Task-3-1.jpg" />The Design Cool! How Does It All Look?The design of MyCarbon Trackr speaks to a clean and colorful aesthetic whose functionality&nbsp; prioritizes the user at every step.&nbsp; Task 1 <img width="716" height="1410" width_o="716" height_o="1410" data-src="https://freight.cargo.site/t/original/i/b08f9594a0cb1aa46032fbd08932c6c34743cbd79b906481f73c3ec2d6e7eb85/Screen-Shot-2019-11-11-at-5.32.01-PM.png" data-mid="54518710" border="0" src="https://freight.cargo.site/w/716/i/b08f9594a0cb1aa46032fbd08932c6c34743cbd79b906481f73c3ec2d6e7eb85/Screen-Shot-2019-11-11-at-5.32.01-PM.png" /><img width="698" height="1404" width_o="698" height_o="1404" data-src="https://freight.cargo.site/t/original/i/e9d6dc2be82d71f6143c5e330474cda2bffa9046d2b37d44cdff139a1875b865/Screen-Shot-2019-11-11-at-5.32.18-PM.png" data-mid="54518711" border="0" src="https://freight.cargo.site/w/698/i/e9d6dc2be82d71f6143c5e330474cda2bffa9046d2b37d44cdff139a1875b865/Screen-Shot-2019-11-11-at-5.32.18-PM.png" /><img width="688" height="1394" width_o="688" height_o="1394" data-src="https://freight.cargo.site/t/original/i/9bc19f53be40f9fceb885b5f60c6a52666d205acf9ec5e4e89b99266eb7bc38e/Screen-Shot-2019-11-11-at-5.46.05-PM.png" data-mid="54519166" border="0" src="https://freight.cargo.site/w/688/i/9bc19f53be40f9fceb885b5f60c6a52666d205acf9ec5e4e89b99266eb7bc38e/Screen-Shot-2019-11-11-at-5.46.05-PM.png" /><img width="692" height="1404" width_o="692" height_o="1404" data-src="https://freight.cargo.site/t/original/i/9e79d747d22e5872c6c834318658cc326e9130ae4673fd70350154798046cdee/Screen-Shot-2019-11-11-at-5.33.28-PM.png" data-mid="54518712" border="0" src="https://freight.cargo.site/w/692/i/9e79d747d22e5872c6c834318658cc326e9130ae4673fd70350154798046cdee/Screen-Shot-2019-11-11-at-5.33.28-PM.png" /><img width="692" height="1408" width_o="692" height_o="1408" data-src="https://freight.cargo.site/t/original/i/628b51a95175ae4d6daea6d10fb21a31a447cb84e1c285b2fd63bbba404ab65a/Screen-Shot-2019-11-11-at-5.34.23-PM.png" data-mid="54518713" border="0" src="https://freight.cargo.site/w/692/i/628b51a95175ae4d6daea6d10fb21a31a447cb84e1c285b2fd63bbba404ab65a/Screen-Shot-2019-11-11-at-5.34.23-PM.png" />&nbsp; &nbsp;Task 2 <img width="684" height="1396" width_o="684" height_o="1396" data-src="https://freight.cargo.site/t/original/i/65cfb4f28c352cb5f7e379531c4a9af7e20e9907cee3ae69f00810c433285dac/Screen-Shot-2019-11-11-at-3.31.16-PM.png" data-mid="54511605" border="0" src="https://freight.cargo.site/w/684/i/65cfb4f28c352cb5f7e379531c4a9af7e20e9907cee3ae69f00810c433285dac/Screen-Shot-2019-11-11-at-3.31.16-PM.png" /> <img width="688" height="1404" width_o="688" height_o="1404" data-src="https://freight.cargo.site/t/original/i/f1481a4d0716ae59b071dda270408b2a5b017834d9deb88a1a854d40f05fc9ce/Screen-Shot-2019-11-11-at-3.31.27-PM.png" data-mid="54511606" border="0" src="https://freight.cargo.site/w/688/i/f1481a4d0716ae59b071dda270408b2a5b017834d9deb88a1a854d40f05fc9ce/Screen-Shot-2019-11-11-at-3.31.27-PM.png" /> <img width="684" height="1392" width_o="684" height_o="1392" data-src="https://freight.cargo.site/t/original/i/0254c3886454868e9fe4f53324ea3001dcecacb77bf60924e35042fbe577ad37/Screen-Shot-2019-11-11-at-3.31.50-PM.png" data-mid="54511607" border="0" src="https://freight.cargo.site/w/684/i/0254c3886454868e9fe4f53324ea3001dcecacb77bf60924e35042fbe577ad37/Screen-Shot-2019-11-11-at-3.31.50-PM.png" /> <img width="690" height="1390" width_o="690" height_o="1390" data-src="https://freight.cargo.site/t/original/i/f0738d7999d80460d6a68b0c5f0add4e77f993f3032ab1298dd3a28f6bc7536d/Screen-Shot-2019-11-11-at-3.32.12-PM.png" data-mid="54511608" border="0" src="https://freight.cargo.site/w/690/i/f0738d7999d80460d6a68b0c5f0add4e77f993f3032ab1298dd3a28f6bc7536d/Screen-Shot-2019-11-11-at-3.32.12-PM.png" /> Task 3 <img width="684" height="1396" width_o="684" height_o="1396" data-src="https://freight.cargo.site/t/original/i/65cfb4f28c352cb5f7e379531c4a9af7e20e9907cee3ae69f00810c433285dac/Screen-Shot-2019-11-11-at-3.31.16-PM.png" data-mid="54511605" border="0" data-scale="98" src="https://freight.cargo.site/w/684/i/65cfb4f28c352cb5f7e379531c4a9af7e20e9907cee3ae69f00810c433285dac/Screen-Shot-2019-11-11-at-3.31.16-PM.png" /> <img width="688" height="1404" width_o="688" height_o="1404" data-src="https://freight.cargo.site/t/original/i/f1481a4d0716ae59b071dda270408b2a5b017834d9deb88a1a854d40f05fc9ce/Screen-Shot-2019-11-11-at-3.31.27-PM.png" data-mid="54511606" border="0" data-scale="98" src="https://freight.cargo.site/w/688/i/f1481a4d0716ae59b071dda270408b2a5b017834d9deb88a1a854d40f05fc9ce/Screen-Shot-2019-11-11-at-3.31.27-PM.png" /> <img width="702" height="1400" width_o="702" height_o="1400" data-src="https://freight.cargo.site/t/original/i/d534eee7a8ce5d4218573d97e253ccfb8b3ec13de83776245b7f950e8485a4bc/Screen-Shot-2019-11-11-at-4.12.26-PM.png" data-mid="54513605" border="0" data-scale="100" src="https://freight.cargo.site/w/702/i/d534eee7a8ce5d4218573d97e253ccfb8b3ec13de83776245b7f950e8485a4bc/Screen-Shot-2019-11-11-at-4.12.26-PM.png" /> Results &amp; ReflectionsThat’s Great, Now What Does It All Mean? When I first embarked on this design I thought I had a clear idea in my mind of what I wanted MyCarbon Trackr to be, an app that would allow users to plug in directions on a map and then have routes and modes of travel suggested to them based on the least amount of carbon output.&nbsp; What emerged from my user interviews, multiple design iterations and rounds of testing was a product that was ultimately far more exciting and comprehensive. The entire design process provided me with some great learning opportunities:I (re)learned the obvious, to not get overly attached to your first idea, some exciting things may be waiting around the corner! Design, iterate, test and repeat.Keep it simple! No need to overcomplicate things! Next Project︎ <img width="1000" height="552" width_o="1000" height_o="552" data-src="https://freight.cargo.site/t/original/i/207bc05fbbd940311b0f349f2b54a8051cb0c6aeb22f6a5e909b25ca1909e21b/Frame-3-2.png" data-mid="51421318" border="0" src="https://freight.cargo.site/w/1000/i/207bc05fbbd940311b0f349f2b54a8051cb0c6aeb22f6a5e909b25ca1909e21b/Frame-3-2.png" />Latinan Website Redesign https://vsquaredesign.com/City-Lights-On-The-Go-Mobile-App Wed, 05 Jun 2019 16:33:33 +0000 vsquaredesign.com https://vsquaredesign.com/City-Lights-On-The-Go-Mobile-App City Lights On The Go Mobile App Bringing the Best of a Beloved Bookstore to Your Pocket <img width="1600" height="1003" width_o="1600" height_o="1003" data-src="https://freight.cargo.site/t/original/i/0a19f2fa350da5f1cebe201958c2a9cccfa1a4683ae1fbd8e1148a5e61613275/Frame-2.png" data-mid="43814768" border="0" src="https://freight.cargo.site/w/1000/i/0a19f2fa350da5f1cebe201958c2a9cccfa1a4683ae1fbd8e1148a5e61613275/Frame-2.png" /> Project Overview City Lights On The Go is a mobile app that provides customers easy access to their community bookstore. Project Details 2 week duration My Role: UX Designer / ResearcherSolo projectMy Tools &amp; MethodsCompetitive &amp; Comparative AnalysisCard sortingInformation ArchitectureSketching and paper prototypingDigital wireframes using FigmaDigital prototyping Usability testing What’s the Challenge? The current City Lights website is not conducive to a satisfactory online shopping experience.&nbsp; What’s the Solution? In order to create a more engaging online experience the current website needed to be consolidated and brought up to date. The challenge was to bring together the main site, the blog and the podcast; currently all separate, under one roof and present it in an easily navigable and friendly way.&nbsp;How can we help? I designed a mobile app so that users can:Find books and events of interestSave items to buy laterBookmark eventsShare items and events to their social communityHave targeted recommendations<img width="928" height="1758" width_o="928" height_o="1758" data-src="https://freight.cargo.site/t/original/i/250d67694b769aa18cb44663c5f369b3732b8ba103b536f47984cbbf4a762278/Frame-14.png" data-mid="49545944" border="0" src="https://freight.cargo.site/w/928/i/250d67694b769aa18cb44663c5f369b3732b8ba103b536f47984cbbf4a762278/Frame-14.png" /> Rethink. Redefine. Research.Currently the main website, the podcast site and the blog exist as three separate entities.By bringing them all together in one app, our target user has access to the full range of City Lights’ content without having to jump around to multiple websites that aren’t designed for mobile. <img width="1406" height="888" width_o="1406" height_o="888" data-src="https://freight.cargo.site/t/original/i/5682be96624109920a231794221aae533c10582369b17104ffb0f71b250b195b/Frame-5.png" data-mid="43828614" border="0" src="https://freight.cargo.site/w/1000/i/5682be96624109920a231794221aae533c10582369b17104ffb0f71b250b195b/Frame-5.png" />Consolidate three websites into one mobile app Understanding User Needs In order to gain an understanding of what a mobile app for City Lights would begin to look like, I took a look at the common overlap between the business needs of City Lights and the needs of their target users. <img width="2370" height="1288" width_o="2370" height_o="1288" data-src="https://freight.cargo.site/t/original/i/68e70c59746875e4b5edf918d5818bbf8428ff1265af4f7047318470f3da2c99/Frame-13.png" data-mid="49394678" border="0" src="https://freight.cargo.site/w/1000/i/68e70c59746875e4b5edf918d5818bbf8428ff1265af4f7047318470f3da2c99/Frame-13.png" />Goals / Needs: Easy access to range of options What’s new Tailored Content Ability to save &amp; share books &amp; eventsPain Points: Difficult navigationLack of sufficient book descriptionsNot mobile friendly User InsightsResearch showed that our On the Go user cares about quick and easy access to what’s new at City Lights, the ability to customize content and share events as well as add books to their wishlist. Heuristic AnalysisI started with a heuristic analysis of City Lights’ current website. It was clear that there were many common goals a redesign would achieve that would not only help the target users but benefit the business as well. My analysis showed me that there were three areas we could focus on from a heuristic stand point: consistency, visual clarity and user freedom.Current Homepage<img width="3680" height="1462" width_o="3680" height_o="1462" data-src="https://freight.cargo.site/t/original/i/3b68317a93ab93ce07212985dc5b994376307acb6f5d108b05b91a1d17156d4e/Frame-1.jpg" data-mid="49391664" border="0" src="https://freight.cargo.site/w/1000/i/3b68317a93ab93ce07212985dc5b994376307acb6f5d108b05b91a1d17156d4e/Frame-1.jpg" />Book Detail Page <img width="3680" height="1462" width_o="3680" height_o="1462" data-src="https://freight.cargo.site/t/original/i/62f9a3e987fff90865b18a3ea40e69fc030f536b2449ecb2638a6c8351173945/Frame.jpg" data-mid="49391666" border="0" src="https://freight.cargo.site/w/1000/i/62f9a3e987fff90865b18a3ea40e69fc030f536b2449ecb2638a6c8351173945/Frame.jpg" />Competitive / Comparative Data<img width="1005" height="458" width_o="1005" height_o="458" data-src="https://freight.cargo.site/t/original/i/379d850823b3e4096268ca99e90813ddd3b8863407e8d3f9c5e29ffe4361fa27/Frame.png" data-mid="43829715" border="0" src="https://freight.cargo.site/w/1000/i/379d850823b3e4096268ca99e90813ddd3b8863407e8d3f9c5e29ffe4361fa27/Frame.png" /> MVP Focus For City Lights On The Go App <img width="1928" height="1628" width_o="1928" height_o="1628" data-src="https://freight.cargo.site/t/original/i/8c5e34f01bd15ef984dcd3b190e1a3b5f74e57c09c3f7f1bbef3c6233e052635/Frame.png" data-mid="51483377" border="0" src="https://freight.cargo.site/w/1000/i/8c5e34f01bd15ef984dcd3b190e1a3b5f74e57c09c3f7f1bbef3c6233e052635/Frame.png" />The MVP focus for the City Lights on the Go app lies in providing a straightforward process for: Searching for books through the online bookstore&nbsp;The ability to bookmark events and save books&nbsp;Easily accessing the podcast and blog Site Map / Information Architecture In order to start laying out the structure of the app, I began to draw out a sitemap. My initial card sorting findings helped define the categories for a redesigned nav. I wanted to stripdown some of the content from the current website in order to create a clearer layout. I also wanted to create a more straightforward process for a user to view, save and purchase books, as well as bookmark and share events, as the On the Go user has a specific interest keeping up to date with City Lights offerings. Current Site Map Current site map for City Lights Website has a lot of information that confuses the online shopper:&nbsp; <img width="4076" height="1000" width_o="4076" height_o="1000" data-src="https://freight.cargo.site/t/original/i/81a883e2f0e749b775bf6208dfb4342ff390b6a56f89c5f752f21a2dbec5798b/Frame-3.png" data-mid="49389644" border="0" src="https://freight.cargo.site/w/1000/i/81a883e2f0e749b775bf6208dfb4342ff390b6a56f89c5f752f21a2dbec5798b/Frame-3.png" />Proposed Site Map Stripped down site map for City Lights on the Go app maintains core expected features, a simplified navigation schema, and the inclusion of the blog and podcast in the app, not on separate sites or offerings: <img width="2552" height="1000" width_o="2552" height_o="1000" data-src="https://freight.cargo.site/t/original/i/436f4103688f7400fa8da5396f6dd45a8e0f48bf0111fb2f6dcff157d3cd9a2e/Frame-2.png" data-mid="49389642" border="0" src="https://freight.cargo.site/w/1000/i/436f4103688f7400fa8da5396f6dd45a8e0f48bf0111fb2f6dcff157d3cd9a2e/Frame-2.png" /> Ideate and Iterate. Initial Wireframes Low fidelity wireframes helped me organize the flow of how a user would navigate through the app. Selecting a Book<img width="11376" height="6192" width_o="11376" height_o="6192" data-src="https://freight.cargo.site/t/original/i/cb20b7ddc7c21570371ac1fe4b468edb2218b87e735f3a14077cbf3dae7f6860/Group-2.png" data-mid="49543072" border="0" src="https://freight.cargo.site/w/1000/i/cb20b7ddc7c21570371ac1fe4b468edb2218b87e735f3a14077cbf3dae7f6860/Group-2.png" /> The Design SolutionHow Does it All Look? The insights gleaned from research on City Lights, competitive/comparative analysis and MVP focus where applied to create a design solution that would encourage and excite our target users to engage with a mobile app.&nbsp; FInd a BookThe user is able to peruse City Lights large collection of books without feeling overwhelmed. This is accomplished by an intuitive design that divides the online catalog in an easily digestible manner.<img width="242" height="480" width_o="242" height_o="480" data-src="https://freight.cargo.site/t/original/i/12a8ded8a1d4c84d0c8c548d8a7230e8bf6f73ba4c98a5fc45b28494fec238c1/Find-a-book.gif" data-mid="49550002" border="0" src="https://freight.cargo.site/w/242/i/12a8ded8a1d4c84d0c8c548d8a7230e8bf6f73ba4c98a5fc45b28494fec238c1/Find-a-book.gif" /> Bookmark an EventThe bookmark feature is a simple and straightforward way for our target user to quickly&nbsp;find an event from the main page, save it and then view their saved events.<img width="242" height="480" width_o="242" height_o="480" data-src="https://freight.cargo.site/t/original/i/0a3e625be7a9cc7df91df1b6ef46876a6d6c03ad69a0b682d4185f258f85c1da/Bookmark-an-Event.gif" data-mid="49548971" border="0" src="https://freight.cargo.site/w/242/i/0a3e625be7a9cc7df91df1b6ef46876a6d6c03ad69a0b682d4185f258f85c1da/Bookmark-an-Event.gif" /> Setting Book PreferencesThe City Lights On The Go app allows for personalization through the ability to set your book preferences.<img width="248" height="480" width_o="248" height_o="480" data-src="https://freight.cargo.site/t/original/i/811d8577b2dab05a9e90cf2faa3d2d7406f48ca32e8da27d44bbdb2c7b79172a/Book-Preferences.gif" data-mid="49604230" border="0" src="https://freight.cargo.site/w/248/i/811d8577b2dab05a9e90cf2faa3d2d7406f48ca32e8da27d44bbdb2c7b79172a/Book-Preferences.gif" /> Results and Reflections Next Steps...The initial City Lights On the Go app was designed with iOS in mind. A future iteration would apply the lessons learned for an Android version.&nbsp; <img width="5498" height="2638" width_o="5498" height_o="2638" data-src="https://freight.cargo.site/t/original/i/3daca8dfc09f0e36ef81300148a61e9b0aa1378df39a64d21945ffaecbd3140d/Frame-1.jpg" data-mid="52026056" border="0" src="https://freight.cargo.site/w/1000/i/3daca8dfc09f0e36ef81300148a61e9b0aa1378df39a64d21945ffaecbd3140d/Frame-1.jpg" />What I learned I learned that there is a fine balance between providing necessary features and overwhelming the app user with too many options. Conducting usability testing was a very important reminder that a simple and easy to navigate app will always win the day over adding too many ‘bells and whistles’.&nbsp; Next Project︎<img width="3222" height="2240" width_o="3222" height_o="2240" data-src="https://freight.cargo.site/t/original/i/b2ac68c1b2505b3103e78d4edc15281ae05b3ef0e7edc218b5b17a5d9358059a/Group-2.jpg" data-mid="54278592" border="0" src="https://freight.cargo.site/w/1000/i/b2ac68c1b2505b3103e78d4edc15281ae05b3ef0e7edc218b5b17a5d9358059a/Group-2.jpg" /> My Carbon Trackr https://vsquaredesign.com/Latinan-Website-Redesign Sun, 07 Jul 2019 19:17:37 +0000 vsquaredesign.com https://vsquaredesign.com/Latinan-Website-Redesign Latinan Website Redesign Updating a Nonprofit’s website to Reflect the Needs of its User Base&nbsp; <img width="2090" height="1654" width_o="2090" height_o="1654" data-src="https://freight.cargo.site/t/original/i/9b0b2a284deac813c176a6682017086dbb2660daf6a2c69172bd4843b9031100/Splash-Image.png" data-mid="51794162" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/9b0b2a284deac813c176a6682017086dbb2660daf6a2c69172bd4843b9031100/Splash-Image.png" /> Project Overview A complete redesign of the&nbsp;Latin Advocacy Network website to support the organization’s growth. Research insights led to a pivot that informed the direction of the redesign. Project Details 2 week duration My Role: UX Designer / Researcher3 Person Design TeamMy Tools &amp; MethodsInterviewsCompetitive &amp; Comparative AnalysisInformation ArchitectureSketching and paper prototypingDigital wireframes using FigmaDigital prototyping Usability testingWhat’s the Challenge?The current website does not provide clear avenues of engagement for potential volunteers and prospective grant foundations that are seeking information and ways to get involved. A Design Rooted in Research Initial Assumptions - Who Are the Users? <img width="2240" height="604" width_o="2240" height_o="604" data-src="https://freight.cargo.site/t/original/i/9912ffe35ffa9a3aa0784c58660d4941c9b0530383c3cad3bc9fe3faf8ab3aae/Frame-3.1.png" data-mid="48832276" border="0" src="https://freight.cargo.site/w/1000/i/9912ffe35ffa9a3aa0784c58660d4941c9b0530383c3cad3bc9fe3faf8ab3aae/Frame-3.1.png" /> The website needs to cater specifically to Latinan’s clients.Need to drive an increase in clients through the website redesign.Increase donations from individual donors.Latinan’s growth is dependant on diversifying its client base with higher paying clients.Confirming&nbsp; and Debunking - Interview Insights <img width="2240" height="604" width_o="2240" height_o="604" data-src="https://freight.cargo.site/t/original/i/15672988219c10042cc37c4f8ae00b5d2982aa6695cb790d6fc9d8ca15baf120/Frame-3.2.png" data-mid="48832277" border="0" src="https://freight.cargo.site/w/1000/i/15672988219c10042cc37c4f8ae00b5d2982aa6695cb790d6fc9d8ca15baf120/Frame-3.2.png" /> Clients do not use the website.Latinan does not need support in finding new clients.Individual donors are not going to be the main funding source.Latinan’s growth is dependant on gaining funding from grants.What’s the Solution? How can we redesign the Latinan website so that it caters to the needs of potential grant foundations and prospective volunteers? &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img width="974" height="826" width_o="974" height_o="826" data-src="https://freight.cargo.site/t/original/i/b9ee5ade0bcd898c488cfe9d63e2b885e30725999d30cd271d4214513fa30b2d/Latinan-User-Venn.png" data-mid="46150947" border="0" src="https://freight.cargo.site/w/974/i/b9ee5ade0bcd898c488cfe9d63e2b885e30725999d30cd271d4214513fa30b2d/Latinan-User-Venn.png" />&nbsp; Opportunities&nbsp; for ImprovementThe competitive and comparative analysis helped identify specific areas where the Latinan website could improve. Potential grant foundations and volunteers stressed the importance of a website that is rich in photos, infographics and success stories to draw them into the nonprofit’s mission.&nbsp; <img width="888" height="346" width_o="888" height_o="346" data-src="https://freight.cargo.site/t/original/i/a42ad02a5fac71f155558a74ccdc8eee10e9a575ee7f8744c3cb39e6e99b68c9/Latinan-Competitive-Data.png" data-mid="46151164" border="0" data-scale="100" alt="competitive analysis" data-caption="competitive analysis" src="https://freight.cargo.site/w/888/i/a42ad02a5fac71f155558a74ccdc8eee10e9a575ee7f8744c3cb39e6e99b68c9/Latinan-Competitive-Data.png" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;competitive analysis A Streamlined and Simplified Navigation In order to start laying out the new pages of the website redesign, the site map needed reorganizing.&nbsp; The current site map for the Latinan website lacks information that grant foundations and volunteers are looking for.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;The simplified site map for the Latinan website creates consistency amongst the categories between the top navigation and bottom footer and facilitates ease of use across the site for the users. &nbsp;&nbsp;<img width="1920" height="1920" width_o="1920" height_o="1920" data-src="https://freight.cargo.site/t/original/i/a0074ad3a641acb9d6fd4ce415f164c39b4b6bf31f51a3cc69f7ece51380b534/Existing-Site-Map.png" data-mid="48674185" border="0" src="https://freight.cargo.site/w/1000/i/a0074ad3a641acb9d6fd4ce415f164c39b4b6bf31f51a3cc69f7ece51380b534/Existing-Site-Map.png" /> Current Site Map<img width="1920" height="1920" width_o="1920" height_o="1920" data-src="https://freight.cargo.site/t/original/i/befb196cc4ab9ccff62f8f9891137ea95446ed69a4648753c8073bbbbda454d1/Revised-Site-Map.png" data-mid="48674186" border="0" src="https://freight.cargo.site/w/1000/i/befb196cc4ab9ccff62f8f9891137ea95446ed69a4648753c8073bbbbda454d1/Revised-Site-Map.png" /> Revised Site Map Iterate. Test. Repeat. Paper Prototypes <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/7adf18d99d3893ff1915161b0bf908ddbf3b5ba00e080b10d6b353d35ac7fef0/IMG_1528.JPG" data-mid="46317638" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/7adf18d99d3893ff1915161b0bf908ddbf3b5ba00e080b10d6b353d35ac7fef0/IMG_1528.JPG" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/b82151cfa3b81883c6503b888a0b66ce7a6d519614d504048ee24c38b8f32bdb/IMG_6294.JPG" data-mid="46317639" border="0" src="https://freight.cargo.site/w/1000/i/b82151cfa3b81883c6503b888a0b66ce7a6d519614d504048ee24c38b8f32bdb/IMG_6294.JPG" /> Initial WireframesAfter the paper iterations we transferred our design into initial wireframes. Our goal for the wireframing was to insure navigability of the website redesign as well as clarity and consistency of elements across the pages. You can begin to see a common design language across the pages. <img width="2880" height="7680" width_o="2880" height_o="7680" data-src="https://freight.cargo.site/t/original/i/9aa526ba43598760f96dd607595de2888ba14732548acc67e11090d4cd1d01f2/LATINAN-Homepage.png" data-mid="48836797" border="0" alt="Homepage" data-caption="Homepage" src="https://freight.cargo.site/w/1000/i/9aa526ba43598760f96dd607595de2888ba14732548acc67e11090d4cd1d01f2/LATINAN-Homepage.png" /> <img width="2880" height="8330" width_o="2880" height_o="8330" data-src="https://freight.cargo.site/t/original/i/a730bb5e581a935a17364653ed323e852c63ce7abe978f548d6e136624b94ee6/About-Us-Page.png" data-mid="48836845" border="0" alt="About Us " data-caption="About Us " src="https://freight.cargo.site/w/1000/i/a730bb5e581a935a17364653ed323e852c63ce7abe978f548d6e136624b94ee6/About-Us-Page.png" /> <img width="2880" height="7568" width_o="2880" height_o="7568" data-src="https://freight.cargo.site/t/original/i/e663ec3f5fd91e69c8bd90ba8cc5a8d6dcdf9c9a653fd798b779dabd2c95cc49/Get-Involved.png" data-mid="48836796" border="0" alt="Get Involved " data-caption="Get Involved " src="https://freight.cargo.site/w/1000/i/e663ec3f5fd91e69c8bd90ba8cc5a8d6dcdf9c9a653fd798b779dabd2c95cc49/Get-Involved.png" /> <img width="2880" height="7592" width_o="2880" height_o="7592" data-src="https://freight.cargo.site/t/original/i/43b6abc0f33bd1764f5b6e38d299152bc6a4e738aee11fd281f163a0e4dfddf1/Our-Work.png" data-mid="48836798" border="0" alt="Our Work " data-caption="Our Work " src="https://freight.cargo.site/w/1000/i/43b6abc0f33bd1764f5b6e38d299152bc6a4e738aee11fd281f163a0e4dfddf1/Our-Work.png" /> <img width="2880" height="3994" width_o="2880" height_o="3994" data-src="https://freight.cargo.site/t/original/i/dc4874ecb90999e1326b355cccf74b5bad18bfc0218f9fd51e8ee59e2102d3b6/Donate.png" data-mid="48836795" border="0" alt="Donate" data-caption="Donate" src="https://freight.cargo.site/w/1000/i/dc4874ecb90999e1326b355cccf74b5bad18bfc0218f9fd51e8ee59e2102d3b6/Donate.png" /> The Design SolutionHow does it all look?The insights gained from many interviews with Latinan’s volunteers, grant foundations and similar nonprofits were integral in crafting a design solution that satisfies the needs of our two main user groups. <img width="480" height="412" width_o="480" height_o="412" data-src="https://freight.cargo.site/t/original/i/815d40d576ae1fa1453dca4b638d283215e2c9c9c8c97b433c38921af0bbe0e9/Latinan-Homepage.gif" data-mid="46151787" border="0" src="https://freight.cargo.site/w/480/i/815d40d576ae1fa1453dca4b638d283215e2c9c9c8c97b433c38921af0bbe0e9/Latinan-Homepage.gif" /> Hi-Fidelity Design We redesigned the website so that grant foundations and volunteers can easily:Find Latinan’s mission statementFind staff and board membersRead client success storiesRead and apply for volunteer opportunities &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; A Splashier Homepage The new Latinan homepage features a simplified top nav and a prominent hero image to draw the users in.As you scroll down there is easy access to the mission statement, success stories and how to get involved. <img width="1578" height="3144" width_o="1578" height_o="3144" data-src="https://freight.cargo.site/t/original/i/7b115baf5ca6d0ad2b5741a6d64b252d0219cdcf93bdd66a4458217c9fc096e6/Homepage-Redesign.jpg" data-mid="51890089" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/7b115baf5ca6d0ad2b5741a6d64b252d0219cdcf93bdd66a4458217c9fc096e6/Homepage-Redesign.jpg" /> <img width="1578" height="1690" width_o="1578" height_o="1690" data-src="https://freight.cargo.site/t/original/i/3d4a3df13617cc9be55afcd2210f3ab5808747ec0f41a2fd399b2b4854d15589/Homepage-Original.jpg" data-mid="51890088" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/3d4a3df13617cc9be55afcd2210f3ab5808747ec0f41a2fd399b2b4854d15589/Homepage-Original.jpg" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; About Us Page The revised About Us page features Latinan’s mission statement and prominently showcases staff which potential grant foundations value. <img width="1578" height="3158" width_o="1578" height_o="3158" data-src="https://freight.cargo.site/t/original/i/b37fa20b888337069bb185bc07e7c0888ef2223ff91c6a6fa0aebfedca939892/About-Us-Redesign.jpg" data-mid="51890085" border="0" src="https://freight.cargo.site/w/1000/i/b37fa20b888337069bb185bc07e7c0888ef2223ff91c6a6fa0aebfedca939892/About-Us-Redesign.jpg" /> <img width="1578" height="1428" width_o="1578" height_o="1428" data-src="https://freight.cargo.site/t/original/i/f751c5fc02c96da113c88755a92044977b1e56458e9cd042c8aa34020a2bcc9e/About-Us-Original.jpg" data-mid="51890084" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/f751c5fc02c96da113c88755a92044977b1e56458e9cd042c8aa34020a2bcc9e/About-Us-Original.jpg" /> Our Work The new Our Work page highlights the services Latinan provides to its clients. Additionally, success stories are featured prominently so as to foster an emotional connection with Latinan’s mission. <img width="1578" height="2754" width_o="1578" height_o="2754" data-src="https://freight.cargo.site/t/original/i/3d24faab6dadf3de4bf2fdda810f7b91d39e5db04c7d785a1e4eae49f5eccfb4/Our-Work-Redesign.jpg" data-mid="51890091" border="0" src="https://freight.cargo.site/w/1000/i/3d24faab6dadf3de4bf2fdda810f7b91d39e5db04c7d785a1e4eae49f5eccfb4/Our-Work-Redesign.jpg" /> <img width="1578" height="1054" width_o="1578" height_o="1054" data-src="https://freight.cargo.site/t/original/i/f2491ad22f0a594a8813e1a08bd263532e12944ceaf4e2009c4223af4b33368c/Our-Work-Original.jpg" data-mid="51890090" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/f2491ad22f0a594a8813e1a08bd263532e12944ceaf4e2009c4223af4b33368c/Our-Work-Original.jpg" /> Get Involved The Get Involved page creates a clear landing pad for potential volunteers that are looking at how they can contribute and be a part of Latinan.&nbsp; <img width="1578" height="2728" width_o="1578" height_o="2728" data-src="https://freight.cargo.site/t/original/i/ee94dcf564da7eca1cbfe960090da52001809d85b35214186eef59469cc60e25/Get-Involved-Added-Page.jpg" data-mid="51890087" border="0" src="https://freight.cargo.site/w/1000/i/ee94dcf564da7eca1cbfe960090da52001809d85b35214186eef59469cc60e25/Get-Involved-Added-Page.jpg" /> Donate Although individual donors were not identified as our main users in the website redesign we have provided a donate page that is in keeping with the look and feel of the other redesigned pages. <img width="1578" height="1612" width_o="1578" height_o="1612" data-src="https://freight.cargo.site/t/original/i/5bd1770bef49c6ccfad9d4bc631afe4d8c86a316574a8ba3d9afa8917a09ad4d/Donate-Added-Page.jpg" data-mid="51890086" border="0" data-scale="64" src="https://freight.cargo.site/w/1000/i/5bd1770bef49c6ccfad9d4bc631afe4d8c86a316574a8ba3d9afa8917a09ad4d/Donate-Added-Page.jpg" /> Ensuring the new website is accessible I ran tests to see how people dealing with varying degress of color sensitivity would be able to read and navigate through the site and the results were overall positive. There was only one feature that required a slight revision. The color of the link buttons were darkened so that they could contrast against the background and be more prominent and visible. &nbsp; <img width="1500" height="847" width_o="1500" height_o="847" data-src="https://freight.cargo.site/t/original/i/0ed7410d41718170b3f39f3bd5f6fead0ddddd1748398a761c0fbc8e78e816c7/LCS.png" data-mid="48909719" border="0" src="https://freight.cargo.site/w/1000/i/0ed7410d41718170b3f39f3bd5f6fead0ddddd1748398a761c0fbc8e78e816c7/LCS.png" /> Results and ReflectionsNext Steps...There are certain features that didn’t make it into the website redesign because they were not a part of the initial MVP but would be beneficial to incorporate down the line to continue to improve upon the users experience.The creation of detailed bios for staff &amp; board membersForms for potential volunteers to streamline the application processsAllow for donors to donate within the site instead of rerouting to PayPalSocial media presence to expand Latinan’s outreach <img width="442" height="378" width_o="442" height_o="378" data-src="https://freight.cargo.site/t/original/i/6a4e70afb7619ab1d6a9c78fd04da65280673d62d4a9af2f54e8f73f9e35b20f/Our-Work.gif" data-mid="48908874" border="0" src="https://freight.cargo.site/w/442/i/6a4e70afb7619ab1d6a9c78fd04da65280673d62d4a9af2f54e8f73f9e35b20f/Our-Work.gif" /> Here’s What I Learned...The original Latinan website was operating on an outdated and no longer supported Squarespace template. We made the decision to keep the website update within the Squarespace CMS because we understood that it would&nbsp; allow the founder of Latinan to make easy to implement changes to the site down the line as the organization scales up and grows. Working within a tight timeframe was beneficial because it forced the redesign to focus on features that improved site engagement for our key users, the grant foundations and volunteers.&nbsp; My biggest takeway from this project was the importance of user interviews and how it informed a major pivot in our design direction. It was a rewarding feeling to contribute to the redesign of Latinan’s website to support its mission.&nbsp; Click to see the live website redesign! Next Project︎<img width="1000" height="627" width_o="1000" height_o="627" data-src="https://freight.cargo.site/t/original/i/f00ff8e11d6666b5c78576fd373c9cfe1d0b602dbd953f0a258cfd2411790a02/Frame-2.png" data-mid="51420898" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/f00ff8e11d6666b5c78576fd373c9cfe1d0b602dbd953f0a258cfd2411790a02/Frame-2.png" />City Lights On the Go https://vsquaredesign.com/Vision-Blvd-Website-Design Wed, 14 Sep 2022 22:11:57 +0000 vsquaredesign.com https://vsquaredesign.com/Vision-Blvd-Website-Design Vision Blvd. Website design Top to bottom buildout of website for mobile &amp; desktop <img width="2818" height="1696" width_o="2818" height_o="1696" data-src="https://freight.cargo.site/t/original/i/136398f7258a4a976b27268c9de4b533e1a0eb7a7d5ad1d534b77eedbe56a094/Vision-Blvd-Thumbnail.png" data-mid="164424505" border="0" src="https://freight.cargo.site/w/1000/i/136398f7258a4a976b27268c9de4b533e1a0eb7a7d5ad1d534b77eedbe56a094/Vision-Blvd-Thumbnail.png" />Click to see the live page here