https://shouvick.design Shouvick Koley Tue, 12 Sep 2023 01:36:30 +0000 https://shouvick.design en https://shouvick.design/Home Tue, 03 Mar 2020 03:46:24 +0000 Shouvick Koley https://shouvick.design/Home Shouvick Koley is a Experience Designer&nbsp; 9 years of Design. New York City based. As a citizen of Earth first and a cultural producer second, I’m interested in a practice that reflects equality for all. LinkedIn&nbsp;– Github <img width="708" height="702" width_o="708" height_o="702" data-src="https://freight.cargo.site/t/original/i/104910e7a306d311071ee98998cd67f82d6053ba955376ef8e993a990f91c713/SK-portfolio-illustration.png" data-mid="95126543" border="0" data-scale="91" data-no-zoom src="https://freight.cargo.site/w/708/i/104910e7a306d311071ee98998cd67f82d6053ba955376ef8e993a990f91c713/SK-portfolio-illustration.png" /> https://shouvick.design/Work-1 Tue, 12 Jan 2021 21:34:14 +0000 Shouvick Koley https://shouvick.design/Work-1 https://shouvick.design/Immersive-audio-Soundscape Tue, 12 Sep 2023 01:17:10 +0000 Shouvick Koley https://shouvick.design/Immersive-audio-Soundscape https://shouvick.design/Virtual-Leap-UX-Case-Study Mon, 11 Jan 2021 21:33:56 +0000 Shouvick Koley https://shouvick.design/Virtual-Leap-UX-Case-Study <img width="3595" height="1911" width_o="3595" height_o="1911" data-src="https://freight.cargo.site/t/original/i/ad1a484b9a93c9cb8096c1e89ebc4d5ee8c9a88d12b48677e44bfec4ab0e02e4/virtual-leap-hero-mock2.png" data-mid="95108195" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/ad1a484b9a93c9cb8096c1e89ebc4d5ee8c9a88d12b48677e44bfec4ab0e02e4/virtual-leap-hero-mock2.png" /> ︎ Virtual Leap Prototype PROJECT DETAILS Capstone Project l 14 Weeks The goal of the project was to create a Virtual meetup web application for Designers and Developers. The scope of the project covered UX branding for the web application and the concept of a VR meetup through an enhancement of Zoom video settings DeliverablesUser Journey &amp; Empathy MapUI Style guideWebsite site map, red routesWebsite User FlowResponsive High-Fi Prototype About virtual leap During a time when social distancing is part of everyday life, people look for new ways to connect and find the answers they need. ’Virtual Leap’ is a virtual meet up web service that provides Design and Development topics/resources for college students and those transitioning into a new career. Design unlike development is scarce when it comes to free open source online resources and access to free mentors for students. This service looks to provide peer led meet ups where knowledge exchanges can occur. Challenge Ideate an look to create a VR communitcation prototypeDesign a platform to house VR communication surrounding Design and Development topics. Approach Identifying potential users, and interviewing them. Define specific use cases for VR communication. Defining usability and accessibility principles, prototyping UI elements Design Toolkit <img width="2156" height="428" width_o="2156" height_o="428" data-src="https://freight.cargo.site/t/original/i/8d640483db39eda1769726d8adc73024756b03b367b6524db19f7b58b43b7505/vl-toolkit-.png" data-mid="95020683" border="0" src="https://freight.cargo.site/w/1000/i/8d640483db39eda1769726d8adc73024756b03b367b6524db19f7b58b43b7505/vl-toolkit-.png" /> Design Process <img width="799" height="302" width_o="799" height_o="302" data-src="https://freight.cargo.site/t/original/i/8910f753944a1c91fb5d9dc529f7f6d9848f443c3d7ee8045ee6dabe27ebc83a/Design-thinking-diagram-.svg" data-mid="95433699" border="0" src="https://freight.cargo.site/w/799/i/8910f753944a1c91fb5d9dc529f7f6d9848f443c3d7ee8045ee6dabe27ebc83a/Design-thinking-diagram-.svg" /> The first step of the design process involved, identifying a need, discoviering users, user interviews and desk research to understand how competitors and users behave. I believe it’s important to get this information early on in the process, before having an idea or prototyping. After analyzing these insights, I began to conceptualize the solution, focusing on the , &nbsp;user flows and wireframe to give me a way to iterate faster through ideas. From this, I went into&nbsp; production mode, designing the interface, considering design principles such as contrast, hierarchy and feedback; brand attributes; user interactions, and the imagistic universe presented as briefing by the case. Once the interface was ready, I took feedback from UX mentors and Design professors in order to understand the experience gaps. Validation,&nbsp; came through three rounds of research with the discovery phase, LoFi Prototype and HiFi Prototype. Define I created an anonymous survey which helped define the problem: How might we connect Design and Development students with other student who are interested in the same topics? I was able to to find 5 participants for the Research study. I asked: What is your current level of college experience?Please share with us the story of the best thing that's happene since you've been in college.What is something you had to figure out on your own, while in college? How did you do it?In what specific ways has the current global pandemic affected your college experience? <img width="1934" height="1282" width_o="1934" height_o="1282" data-src="https://freight.cargo.site/t/original/i/20fc4e8055993d0f794ee5716ba2d679ea0adc2215896ae83e380aa2f098373a/vl-survey.png" data-mid="94905895" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/20fc4e8055993d0f794ee5716ba2d679ea0adc2215896ae83e380aa2f098373a/vl-survey.png" /> Disovery Research Interviews User interviews are a core user experience method. That’s why I chose to approach 5 people to interview, taking into account the recommendation from Donald Norman’s article, “Why You Only Need to Test with 5 Users,”&nbsp; to generate concepts and hypothesis. After the conceptualization phase, however, I’d take the prototype out to test with other users in order to gather more feedbacks and validation. The interview sample took into account men and women aged from 22 to 34, within New York city The interviews took between 30-40 minutes and included topics to get to the core of what users looking for in a Design and Development niche VR Meetup and their problems are. So I asked: What tools do you use to communicate when doing remote meetups?How do you feel about those tools?Do you prefer to use video or just voice when communicating?Could you share with me, if you can recall, how transitioning into virtual environments&nbsp; went for you? Were there any significant obstacles that you had to overcome?Can you tell me about how you feel about your current remote virtual environments? <img width="5100" height="1365" width_o="5100" height_o="1365" data-src="https://freight.cargo.site/t/original/i/cfb0971232c4d43fb59ce64533cf584d844f1c1b36efddd1813022337c145aaa/Discovery-interview.png" data-mid="94733284" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/cfb0971232c4d43fb59ce64533cf584d844f1c1b36efddd1813022337c145aaa/Discovery-interview.png" /> Research After analysing&nbsp; all the interviews, I organized all the findings into the Affinity map and Empathy maps. <img width="1656" height="984" width_o="1656" height_o="984" data-src="https://freight.cargo.site/t/original/i/3b3f9f62cafc422be18519a2f963351e4b1afd89cf514d7a10e430842ef8bf86/Affinity-map.png" data-mid="94739825" border="0" src="https://freight.cargo.site/w/1000/i/3b3f9f62cafc422be18519a2f963351e4b1afd89cf514d7a10e430842ef8bf86/Affinity-map.png" /> <img width="1904" height="770" width_o="1904" height_o="770" data-src="https://freight.cargo.site/t/original/i/6bf0caed29082c4261543144d32afdcdc476cbc947246773f96f2628f36f30d6/Emapthy-maps.png" data-mid="94740609" border="0" src="https://freight.cargo.site/w/1000/i/6bf0caed29082c4261543144d32afdcdc476cbc947246773f96f2628f36f30d6/Emapthy-maps.png" /> Research Key Insights <img width="5027" height="2584" width_o="5027" height_o="2584" data-src="https://freight.cargo.site/t/original/i/bb37bf486a3e3877840d328845fcd81668460c615dc625a292cf172bfecd2c81/virtual-leap-research-insights.png" data-mid="94998999" border="0" src="https://freight.cargo.site/w/1000/i/bb37bf486a3e3877840d328845fcd81668460c615dc625a292cf172bfecd2c81/virtual-leap-research-insights.png" /> Most impactful aspect of communication is: The feeling of a real person being present (4 out of 5 participants) Level of comfort needed to communicate (3 out of 5 participants) Connectivity and performance (2 out of 5 participants) “I think if somehow you had the feeling of a real person being with you virtually, it would make the worlds difference” - Amy Soukele, 22, Design Student “I think there's a level of comfort that's needed, you know, for you to actually be able to contribute freely.” - Vipul Paruthi, 28, Designer and Actor How Might We POV: I am a Design student who is finding it difficult to find other students that I can study with and improvesome of my skill with. How might we create a tool for Designers to improve existing skills? How might we connect students with other student who are interested in the same topics? How might we might create an online forum for Design students How might we create virtual study sessions for Design students in XR? How might we create a website that houses virtual study meet ups? Desk Research With the SARS-CoV-2 pandemic stopping in-person meetings and conferences, video conferences are the new norm. But video calls are old technology. Soon, conferences and meetings will be held in 3D, using VR headsets. <img width="1588" height="890" width_o="1588" height_o="890" data-src="https://freight.cargo.site/t/original/i/872b662b210519fb07dfa04eaeb8628eda6781845d97de8818341e8dcd9855fd/Screen-Shot-2021-01-12-at-5.02.18-PM.png" data-mid="94862405" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/872b662b210519fb07dfa04eaeb8628eda6781845d97de8818341e8dcd9855fd/Screen-Shot-2021-01-12-at-5.02.18-PM.png" /> “A key fact about XR is that it is much more immersive than previous generations of gaming tools, or existing business communication tools like video calls, therefore much more emotionally engaging.” –Ferhan Ozkan, co-founder of VR First Source: Nils Zimmermann. 16.04.2020. “Your next business meeting could be inside a VR headset”.https://www.dw.com/ Market Insights By integrating users’ pain points and market insights, I understand that it’s possible to create a VR meet up web app that isn’t based solely on virtual communication, but which adds value to a user’s daily life. Thus, the value proposition hypothesis is based on helping users to create a healthy connection with their peers — since 80% of them claim to struggle with that — and provide them a space for free open source resources through the virtual leap web app. Users The users are Design and Development students or career changers, and they are not experts in their field. They believe that they aren’t getting the enough stimulation from conventional virtual meetups. They are looking for a deeper connection with their peers and are open to trying VR style meetups. Scope To solve this problem, I’ll need an ecosystem. The homepage is only one of the many touch points, but it provides a persistent home base. It is highly discoverable and easily manageable. Success Metric The percentage of users who start trying recommendations from the homepage. Design Before I started the project, I created three design principles that guided the design decisions Simple and efficient. Design should help users understand what the recommendations are in a short span of time. Relevant and useful. Users shouldn’t see anything they have already set up or irrelevant to their needs. Delightful. Design should not be tedious or overwhelming. I brainstormed and narrowed down the directions to one concept. Ideate Virtual Classroom Experience – an interactive, avatar-guided tour of a virtual classroom that allowed users to explore and meet other Designers in a fully immersive setting. Implement various simple and complex mechanics for remote collaboration in VR, in order to test them on the target audience. Create prototype of users having access to spaces that combine real-world imagery with completely artificial environments Solution Ideas In VR application users could create meeting rooms and invite others into those rooms. One user could be added to multiple rooms. Inside the rooms, users were presented as 3D avatars. Each of the users could teleport or move, move his hands or head, and other users could see all the movements. Users could take objects in the room, pass objects to each other, and interact this way, play games, etc. Users could draw on the board with chalk. When all the users left the room – the room state was persisted so that no information on the board or anywhere else could be lost. Users could collaborate on creating diagrams by taking 3D objects, placing them on the table and connecting them with lines, arrows, etc. Users could see their PC screens in VR and interact with their own computer without taking off their headset. Users could share their PC screen to others in the chat room. This way they could show others presentations in PowerPoint, or work with documents together, etc. A special separate room was created to show a separate case on making presentations where not only slides change but also 3D models in the virtual environment. Storyboard <img width="1578" height="1130" width_o="1578" height_o="1130" data-src="https://freight.cargo.site/t/original/i/991de9c71c5b070e2698822aade215075d5acfedf50a64cf242cd5fbf92ddad1/Screen-Shot-2021-01-12-at-4.59.09-PM.png" data-mid="94862068" border="0" src="https://freight.cargo.site/w/1000/i/991de9c71c5b070e2698822aade215075d5acfedf50a64cf242cd5fbf92ddad1/Screen-Shot-2021-01-12-at-4.59.09-PM.png" /> From Paper to Pixels <img width="1262" height="910" width_o="1262" height_o="910" data-src="https://freight.cargo.site/t/original/i/d7b1073620ef9bfd0685f4ba36868de5e7d4b123f8093f32c45d0772ad3915ab/pencil-wireframe.png" data-mid="94743532" border="0" alt="Paper wireframe" data-caption="Paper wireframe" src="https://freight.cargo.site/w/1000/i/d7b1073620ef9bfd0685f4ba36868de5e7d4b123f8093f32c45d0772ad3915ab/pencil-wireframe.png" /> Sitemap <img width="3200" height="2048" width_o="3200" height_o="2048" data-src="https://freight.cargo.site/t/original/i/a8f75c046178bfc53c1be9743aea3a270d6c29d2b58d6c907bacb225a7947bd6/SK-Virtual-leap_Sitemap.png" data-mid="94905215" border="0" src="https://freight.cargo.site/w/1000/i/a8f75c046178bfc53c1be9743aea3a270d6c29d2b58d6c907bacb225a7947bd6/SK-Virtual-leap_Sitemap.png" /> Personas <img width="1156" height="847" width_o="1156" height_o="847" data-src="https://freight.cargo.site/t/original/i/5ba867eae79a58ac91082446c037d1e52f581cdc82309c3cd20441af54e6355c/ll-vl.png" data-mid="94905393" border="0" src="https://freight.cargo.site/w/1000/i/5ba867eae79a58ac91082446c037d1e52f581cdc82309c3cd20441af54e6355c/ll-vl.png" /> <img width="1156" height="842" width_o="1156" height_o="842" data-src="https://freight.cargo.site/t/original/i/350eace46843a02f3cacd746816de095b7c12a14307151f234dc6aa688d1894c/dd-vl.png" data-mid="94905394" border="0" src="https://freight.cargo.site/w/1000/i/350eace46843a02f3cacd746816de095b7c12a14307151f234dc6aa688d1894c/dd-vl.png" /> User Journey Map <img width="2484" height="1574" width_o="2484" height_o="1574" data-src="https://freight.cargo.site/t/original/i/a569b7d25854e4e33cd348a512e5541832d3a480520dc2a85cbe87e5bfc3724e/vl-user-journey-map.png" data-mid="94904726" border="0" src="https://freight.cargo.site/w/1000/i/a569b7d25854e4e33cd348a512e5541832d3a480520dc2a85cbe87e5bfc3724e/vl-user-journey-map.png" /> Userflows <img width="1662" height="1168" width_o="1662" height_o="1168" data-src="https://freight.cargo.site/t/original/i/d3723c78886a35367095ab622e1148836eca55f8c53b8b1a9a3d75ea18706ded/SK-Virtual-leap-Userflow-Copy-2.png" data-mid="95432944" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/d3723c78886a35367095ab622e1148836eca55f8c53b8b1a9a3d75ea18706ded/SK-Virtual-leap-Userflow-Copy-2.png" /> <img width="1662" height="1168" width_o="1662" height_o="1168" data-src="https://freight.cargo.site/t/original/i/081390d7c5ef845e86efed26a52e75a0314b76467582b5b76beadba13d52a5d7/SK-Virtual-leap-Userflow.png" data-mid="95432943" border="0" src="https://freight.cargo.site/w/1000/i/081390d7c5ef845e86efed26a52e75a0314b76467582b5b76beadba13d52a5d7/SK-Virtual-leap-Userflow.png" /> Based on new user persona, ‘Doubtful Diane’ and return user persona, ‘Learning Leanna’ which were compiled from User research of&nbsp; the five participants, I constructed&nbsp; a flow that best represented the user’s experience. Mapping out the all of flows is essential for understanding each design decision in context and taking everything into consideration. LoFi Wireframes ︎ XD prototype <img width="3012" height="1320" width_o="3012" height_o="1320" data-src="https://freight.cargo.site/t/original/i/6005c70c6c97fd9c0aa989e8cb4990f3958d212187e1cd944cd63864bfe65f28/Scenario_-New-User.svg" data-mid="95428701" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/6005c70c6c97fd9c0aa989e8cb4990f3958d212187e1cd944cd63864bfe65f28/Scenario_-New-User.svg" /> <img width="3017" height="1321" width_o="3017" height_o="1321" data-src="https://freight.cargo.site/t/original/i/728d8ee10e1421dce5380e761900ed0548173b16f6ef4cc1eddb42d9096af2fe/Scenario_-New-User2.svg" data-mid="95428702" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/728d8ee10e1421dce5380e761900ed0548173b16f6ef4cc1eddb42d9096af2fe/Scenario_-New-User2.svg" /> <img width="3017" height="1321" width_o="3017" height_o="1321" data-src="https://freight.cargo.site/t/original/i/8320502bf61d39a16cc96d535fac97f436087025e79606b8825416ea8f50f14e/Scenario_-New-User2-1.svg" data-mid="95428703" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/8320502bf61d39a16cc96d535fac97f436087025e79606b8825416ea8f50f14e/Scenario_-New-User2-1.svg" /> <img width="3017" height="1321" width_o="3017" height_o="1321" data-src="https://freight.cargo.site/t/original/i/627f9aae5b88b7f81dce500628fd451c3dce67343de3f7d8c9e347536c534478/Scenario_-New-User3.svg" data-mid="95428704" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/627f9aae5b88b7f81dce500628fd451c3dce67343de3f7d8c9e347536c534478/Scenario_-New-User3.svg" /> <img width="3017" height="1324" width_o="3017" height_o="1324" data-src="https://freight.cargo.site/t/original/i/99f505515f285ee1644a0df0d6ee4fdb8d01f34717868ecaa2c8bad8151e7b46/Scenario_-New4.svg" data-mid="95428705" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/99f505515f285ee1644a0df0d6ee4fdb8d01f34717868ecaa2c8bad8151e7b46/Scenario_-New4.svg" /> Step 1 In order to see UnityCam in web apps, Users have to manually activate the UnityCamService. Step 2 Startup the Zoom App and go to Settings. Select the Video tab and you should see options to change your video settings. In Camera, make sure UnityCam is selected in the dropdown menu. If you use virtual background on Zoom, you will need to turn it off for other participates to&nbsp; see you in a&nbsp; virtual leap meetup. The logic of building a scene Set the environment first, put your character in the scene next so you can determine the relationship between the environment and the user. Set up your objects in the scene after this based on your character and eventually determine your UI assets based on the objects. When all the assets are properly placed in the scene, set a viewing point to lock the view angle and proportion. <img width="997" height="709" width_o="997" height_o="709" data-src="https://freight.cargo.site/t/original/i/83ed6041395913c3887abde2018048ba9a1488fd0d54bd822ea6758a9b1b5877/virtual-leap-vr-diagram.svg" data-mid="95330280" border="0" data-scale="85" data-no-zoom src="https://freight.cargo.site/w/997/i/83ed6041395913c3887abde2018048ba9a1488fd0d54bd822ea6758a9b1b5877/virtual-leap-vr-diagram.svg" /> Iterate: Wireframes ︎ Figma prototype After rapid testing with a few of my collogues I updated my wireframes based on some reccomendations and created another LoFi prototype. <img width="1684" height="1709" width_o="1684" height_o="1709" data-src="https://freight.cargo.site/t/original/i/dd7db14ed8e8367bc3177854aa34ba4a840fa55b35aa310f70d992394f11975c/Shouvick-Koley-virtual-leap-wire-flow.svg" data-mid="95433233" border="0" src="https://freight.cargo.site/w/1000/i/dd7db14ed8e8367bc3177854aa34ba4a840fa55b35aa310f70d992394f11975c/Shouvick-Koley-virtual-leap-wire-flow.svg" /> Styleguide <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/6273d2ae540e53b2dfd4e9004c6078a54d54cc60dbec1b5ea0807c54484fe8c5/Shouvck_Koley-virtual-leap-Color-Palette.png" data-mid="95434430" border="0" src="https://freight.cargo.site/w/842/i/6273d2ae540e53b2dfd4e9004c6078a54d54cc60dbec1b5ea0807c54484fe8c5/Shouvck_Koley-virtual-leap-Color-Palette.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/7f64f16044e187f30f0b0af57b73a6127cafe12e7f2e3a3297e92b4fff9a3928/Shouvick_Koley-virtual-leap-moodboard.png" data-mid="95434438" border="0" src="https://freight.cargo.site/w/842/i/7f64f16044e187f30f0b0af57b73a6127cafe12e7f2e3a3297e92b4fff9a3928/Shouvick_Koley-virtual-leap-moodboard.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/978a77c1154f5b7c6937a5795e84b967233ab4bc2b3632bad7486db2ced9ae39/Shouvck_Koley-virtual-leap-Logo.png" data-mid="95434432" border="0" src="https://freight.cargo.site/w/842/i/978a77c1154f5b7c6937a5795e84b967233ab4bc2b3632bad7486db2ced9ae39/Shouvck_Koley-virtual-leap-Logo.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/2e3e52c19bcf10f33687baa8740af1fa53e7d81d2f4481ed395ec369e7734f86/Shouvck_Koley-virtual-leap-Imagery.png" data-mid="95434436" border="0" src="https://freight.cargo.site/w/842/i/2e3e52c19bcf10f33687baa8740af1fa53e7d81d2f4481ed395ec369e7734f86/Shouvck_Koley-virtual-leap-Imagery.png" /> <img width="842" height="620" width_o="842" height_o="620" data-src="https://freight.cargo.site/t/original/i/dc9a1fee91c2c00b43eeb29526fb5e7d023f50f39e40a7d33143651cda03fed4/Shouvck_Koley-virtual-leap-Grids.png" data-mid="95434437" border="0" src="https://freight.cargo.site/w/842/i/dc9a1fee91c2c00b43eeb29526fb5e7d023f50f39e40a7d33143651cda03fed4/Shouvck_Koley-virtual-leap-Grids.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/e6ca1a4e4fd6288a646c96a4c0228bed8937adf7af81821155f44ffae2309ccb/Shouvck_Koley-virtual-leap-Iconography.png" data-mid="95434433" border="0" src="https://freight.cargo.site/w/842/i/e6ca1a4e4fd6288a646c96a4c0228bed8937adf7af81821155f44ffae2309ccb/Shouvck_Koley-virtual-leap-Iconography.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/c6889cb116ed3e9557451a3375344f51a7f0518fc680e39bb7982641df11500c/Shouvck_Koley-virtual-leap-UI-elements.png" data-mid="95434434" border="0" src="https://freight.cargo.site/w/842/i/c6889cb116ed3e9557451a3375344f51a7f0518fc680e39bb7982641df11500c/Shouvck_Koley-virtual-leap-UI-elements.png" /> <img width="842" height="595" width_o="842" height_o="595" data-src="https://freight.cargo.site/t/original/i/7113233f1b62ff9b917f744004e17082d30b2f48914821f2ba2b083a34b40564/Shouvck_Koley-virtual-leap-Fonts.png" data-mid="95434435" border="0" src="https://freight.cargo.site/w/842/i/7113233f1b62ff9b917f744004e17082d30b2f48914821f2ba2b083a34b40564/Shouvck_Koley-virtual-leap-Fonts.png" /> HiFi Designs <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/bd8455fa3a8133b297311942f5608745bde67a4fd3ee53e683a08d586e208ade/virtual-leap-homepage.png" data-mid="94998188" border="0" src="https://freight.cargo.site/w/1000/i/bd8455fa3a8133b297311942f5608745bde67a4fd3ee53e683a08d586e208ade/virtual-leap-homepage.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/fde8501124c3f8af4859c8717134ba9bf4df04ee6e633d106876e1d101da942a/virtual-leap-nav.png" data-mid="94998189" border="0" src="https://freight.cargo.site/w/1000/i/fde8501124c3f8af4859c8717134ba9bf4df04ee6e633d106876e1d101da942a/virtual-leap-nav.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/dd91ebcfc3a867fb8a57889b9124306b6e101eecafcc5e4d5180c5f2f6a48dd7/virtual-leap-resources.png" data-mid="94998192" border="0" src="https://freight.cargo.site/w/1000/i/dd91ebcfc3a867fb8a57889b9124306b6e101eecafcc5e4d5180c5f2f6a48dd7/virtual-leap-resources.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/f0f041bf83c2ab592e493fd013204679cc89eebe131723df73918b43c737ad6c/virtual-leap-vr-meetup.png" data-mid="94998191" border="0" src="https://freight.cargo.site/w/1000/i/f0f041bf83c2ab592e493fd013204679cc89eebe131723df73918b43c737ad6c/virtual-leap-vr-meetup.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/0413b2ca50f026487dae6ae11ebd959937fa31b1a0104d7fe79d0c568a795830/virtual-leap-vr-zoom.png" data-mid="94998194" border="0" src="https://freight.cargo.site/w/1000/i/0413b2ca50f026487dae6ae11ebd959937fa31b1a0104d7fe79d0c568a795830/virtual-leap-vr-zoom.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/1169048f55e87e5844924d192338d106111a2405fcecf54afa098ae50929c72a/virtual-leap-ux-ui.png" data-mid="94998190" border="0" src="https://freight.cargo.site/w/1000/i/1169048f55e87e5844924d192338d106111a2405fcecf54afa098ae50929c72a/virtual-leap-ux-ui.png" /> <img width="1224" height="792" width_o="1224" height_o="792" data-src="https://freight.cargo.site/t/original/i/098c1939a5d9501a86b060f0f2cb89ccce5bcd47fe92547eea0ae7f5e88d6440/virtual-leap-Helpguide.png" data-mid="94998193" border="0" src="https://freight.cargo.site/w/1000/i/098c1939a5d9501a86b060f0f2cb89ccce5bcd47fe92547eea0ae7f5e88d6440/virtual-leap-Helpguide.png" /> VR Meetup Concept <img width="2160" height="1234" width_o="2160" height_o="1234" data-src="https://freight.cargo.site/t/original/i/596427451b4edb4a944053d4d3d593fba7779eaa3cb27cbd35b04f9f479e9060/VR-concept2.png" data-mid="94999651" border="0" src="https://freight.cargo.site/w/1000/i/596427451b4edb4a944053d4d3d593fba7779eaa3cb27cbd35b04f9f479e9060/VR-concept2.png" /> <img width="2244" height="1264" width_o="2244" height_o="1264" data-src="https://freight.cargo.site/t/original/i/a9edb838f5eb067fa0859b6eacf852e6612e3aeb5d3e3a2fa5299fd297b93660/VR-concept1.png" data-mid="94999371" border="0" src="https://freight.cargo.site/w/1000/i/a9edb838f5eb067fa0859b6eacf852e6612e3aeb5d3e3a2fa5299fd297b93660/VR-concept1.png" /> &nbsp;&nbsp; The Virtual Leap website and VR experience provides students and professionals access to a real time environment that simulates face to face meet ups with their fellow peers and mentors. HiFi Designs The results showed that the Users love the brand. However, they didn't recall the contents very well. On the other side, the trimmed-down simple design had the best content recall rate and users loved the simplicity. In the end, I decided to simplify the approach to achieve good content recall and emotional resonance. Some rationales behind the decisions: Users love the brand. I wanted to build an emotional connection with users using the minimal brand assets. I wanted to prioritize the recommendations that had the highest value and lowest effort to set up. I wanted to make the design very simple, easy to understand and actionable. Thanks! A big thanks to the people who participated in the interviews and gave me feedback to improve the idea. https://shouvick.design/Volume-Portal Tue, 12 Sep 2023 01:36:30 +0000 Shouvick Koley https://shouvick.design/Volume-Portal Process slides https://shouvick.design/Anifie-UX-UI-Case-Study Thu, 14 Jan 2021 20:18:07 +0000 Shouvick Koley https://shouvick.design/Anifie-UX-UI-Case-Study <img width="3601" height="2000" width_o="3601" height_o="2000" data-src="https://freight.cargo.site/t/original/i/78359fa96f08459b6d42f870fd72bb80476f2be58df3d2ee09d04710b41d76f4/anifie-hero-mock.png" data-mid="95119510" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/78359fa96f08459b6d42f870fd72bb80476f2be58df3d2ee09d04710b41d76f4/anifie-hero-mock.png" /> ︎Anifie Prototype PROJECT DETAILS Client Project l 4 Weeks This is an Client project spanning four weeks. The goal of the project was to redesign the Anifie interactive virtual concert mobile app. The scope of the project covered User Research, applying a new UI style guide and creating a new Onboarding process. RoleLead UX/UI DesignerTeamSarah &amp; Bonnie DeliverablesUX ResearchUser Journey &amp; Empathy MapUI Style guideMobile site map, red routesMobile User FlowResponsive High-Fi Prototype About Anifie Anifie allows fans to support their favorite artists by attending interactive virtual concerts, volunteering, streaming and creating new friendships. Stakeholder Interviews Interviewing the stakeholder has helped us to identify the right audience for the product and characteristics about the study of participants. As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Why Redesign? Context Fortnite virtual concerts attracted &gt;10 million concurrent users. They are for gamers who enjoy PvP shooting games. Anifie is for: Female mobile users of about 21 years old who are searching for a sense of belonging and escape from the struggles of their everyday lives &amp; loneliness, and looking for a safe place to pursue their passion for music &amp; build friendships.
 Comparable companies Fortnite virtual concerts, WaveXR, IMVU, Sky: Children of the Light. Business model Ticket sales and virtual goods sales. Goals and Motivations for Redesign To deliver a personalized experience and intuitive user interface. Propose a more engaging and seamless UI experience so that users are comfortable accessing the Virtual concert, Shop, Chat and Community features. Design Toolkit <img width="826" height="214" width_o="826" height_o="214" data-src="https://freight.cargo.site/t/original/i/37aaaf346ecd7f35210926bcdefac317ceb793b8e9cc023d3bdbf03ac8f7522d/toolkit-5.svg" data-mid="95467419" border="0" data-scale="83" src="https://freight.cargo.site/w/826/i/37aaaf346ecd7f35210926bcdefac317ceb793b8e9cc023d3bdbf03ac8f7522d/toolkit-5.svg" /> Design Process <img width="799" height="302" width_o="799" height_o="302" data-src="https://freight.cargo.site/t/original/i/387c45c3d027968267ab692b028cd929f3570d50977551f6b49871deb147c556/Design-thinking-diagram-.svg" data-mid="95443191" border="0" src="https://freight.cargo.site/w/799/i/387c45c3d027968267ab692b028cd929f3570d50977551f6b49871deb147c556/Design-thinking-diagram-.svg" /> Behind the Scenes Now we’re going to talk about our persona, user journey map, sitemap, Style guide, wireframes and user research. We’re going to dive right into the visuals and explain our reasoning along the way. <img width="1800" height="800" width_o="1800" height_o="800" data-src="https://freight.cargo.site/t/original/i/2689b1312a8509271194d86a0e6e5e6f4aa1d54b452f043acf20a08b180ad222/scenes.png" data-mid="95114546" border="0" src="https://freight.cargo.site/w/1000/i/2689b1312a8509271194d86a0e6e5e6f4aa1d54b452f043acf20a08b180ad222/scenes.png" /> Current Onboarding While Anifie’s opening screen is not very visually interesting, it also does not position the app’s central use case. We aimed to create a new onboarding process that would inform the user what the app was about and also drive interest towards creating a custom avatar at the very start so that the rest of the apps features can be explored <img width="647" height="221" width_o="647" height_o="221" data-src="https://freight.cargo.site/t/original/i/8cf952521651cfcc1540e5bc5f93daaf4f54b1648991592c9909001b2d4a01fa/anifie-analytics.svg" data-mid="95116648" border="0" data-scale="55" data-no-zoom src="https://freight.cargo.site/w/647/i/8cf952521651cfcc1540e5bc5f93daaf4f54b1648991592c9909001b2d4a01fa/anifie-analytics.svg" /> Onboarding Assuming that the new design would be implemented and shipped to the world, how would the app onboard the users? Here is a quick visual difference between the old and new screens. <img width="1800" height="753" width_o="1800" height_o="753" data-src="https://freight.cargo.site/t/original/i/cf376d55f57d53afa3b7a10f7674c94cb9a7c782b2f5a76f143d27ed62261407/anifie-onboarding.png" data-mid="95117437" border="0" src="https://freight.cargo.site/w/1000/i/cf376d55f57d53afa3b7a10f7674c94cb9a7c782b2f5a76f143d27ed62261407/anifie-onboarding.png" /> Define Using the target user we generated a User Persona and User Journey Map. <img width="465px;" height="329px;" src="https://lh4.googleusercontent.com/AEZwBzTPqxQ11jglWFjAPNR2UpViANp6uVwXMxMA6qzxkUkPAN_QBMjuR81q5PflHnHm8wljk85kdJLx5imMwXYQJrhiY9lo_fc9QEJaf8wQ57AWEBHKJY66WdxrABsLwbEqVjrsQpM" style="width: 465px; height: 329px;" data-scale="100"> <img width="1196" height="1548" width_o="1196" height_o="1548" data-src="https://freight.cargo.site/t/original/i/4a85542a85f448667e7c4ab333db4473710eecf7344d21bb2c5092f299178178/user-journey.png" data-mid="95468169" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/4a85542a85f448667e7c4ab333db4473710eecf7344d21bb2c5092f299178178/user-journey.png" /> Discover In this stage, we decided to make a sitemap so that we could better understand the user’s paths and the platform’s structure. <img width="341px;" height="326px;" src="https://lh3.googleusercontent.com/SIDxfeTixbjVe8w-Yp3YDwPhwhONawAR4kkZqNnRP4SLIahD1cIh1bYzW31N2XpPWM6PMDnqmge5SS7Ww4v3wAKtVgOJigTO9kxVmbKRaervfFRW2OCCXgLLRwxbjHfJmy1nYU2iHTY" style="width: 341px; height: 326px;"> Ideate: LoFi Wireframes We started with LoFi designs to really test the UI with the&nbsp; target user group. <img width="6441" height="3662" width_o="6441" height_o="3662" data-src="https://freight.cargo.site/t/original/i/0e773d293a58b902debaa76d747f086ff771eebec30236243571487389b168a2/anifie-wireframes-onboarding.svg" data-mid="95443765" border="0" src="https://freight.cargo.site/w/1000/i/0e773d293a58b902debaa76d747f086ff771eebec30236243571487389b168a2/anifie-wireframes-onboarding.svg" /> <img width="3968" height="2687" width_o="3968" height_o="2687" data-src="https://freight.cargo.site/t/original/i/35acb3bdcdb36504dfda7e017b79a2f715aa3a52e920a48ca6494c4bd774062d/anifie-wireframes-home.svg" data-mid="95443757" border="0" src="https://freight.cargo.site/w/1000/i/35acb3bdcdb36504dfda7e017b79a2f715aa3a52e920a48ca6494c4bd774062d/anifie-wireframes-home.svg" /> <img width="5144" height="3679" width_o="5144" height_o="3679" data-src="https://freight.cargo.site/t/original/i/a6b0e5ed2ae3ef5cb71529572e855a2579a0a3d4255d8461c0f495230b601f35/anifie_wireframes_my-avatar.svg" data-mid="95443760" border="0" src="https://freight.cargo.site/w/1000/i/a6b0e5ed2ae3ef5cb71529572e855a2579a0a3d4255d8461c0f495230b601f35/anifie_wireframes_my-avatar.svg" /> <img width="4357" height="3700" width_o="4357" height_o="3700" data-src="https://freight.cargo.site/t/original/i/5fa6ed31533bc26fdb5ebab8e7ce45d26de0fb0dfc50bd81068acb15c48f9eec/anifie-wireframes-concert.svg" data-mid="95443758" border="0" src="https://freight.cargo.site/w/1000/i/5fa6ed31533bc26fdb5ebab8e7ce45d26de0fb0dfc50bd81068acb15c48f9eec/anifie-wireframes-concert.svg" /> <img width="3709" height="3565" width_o="3709" height_o="3565" data-src="https://freight.cargo.site/t/original/i/9c4e06f3979e03e4bf7006d7d2e2c8a723bbb9bb33d604efa91015617f5da0cc/anifie_wireframes_community.svg" data-mid="95443759" border="0" src="https://freight.cargo.site/w/1000/i/9c4e06f3979e03e4bf7006d7d2e2c8a723bbb9bb33d604efa91015617f5da0cc/anifie_wireframes_community.svg" /> <img width="4036" height="3753" width_o="4036" height_o="3753" data-src="https://freight.cargo.site/t/original/i/9bbd3cf7cb5059eb0d2a7934e1ab66bb182eedb74a35542b5800fa4dbfd8d891/anifie-wireframes-account.svg" data-mid="95443768" border="0" src="https://freight.cargo.site/w/1000/i/9bbd3cf7cb5059eb0d2a7934e1ab66bb182eedb74a35542b5800fa4dbfd8d891/anifie-wireframes-account.svg" /> <img width="5104" height="2882" width_o="5104" height_o="2882" data-src="https://freight.cargo.site/t/original/i/c9b3c5732841bf7495adb7e5c9c7790c50e81fd423f397d0dda9cd0527561d0b/anifie-wireframes-shop.svg" data-mid="95443766" border="0" src="https://freight.cargo.site/w/1000/i/c9b3c5732841bf7495adb7e5c9c7790c50e81fd423f397d0dda9cd0527561d0b/anifie-wireframes-shop.svg" /> <img width="4213" height="3679" width_o="4213" height_o="3679" data-src="https://freight.cargo.site/t/original/i/5c063111c59f453cce9bdeae49f50cd46eb16f9e1a94c34497223ecd1bb15ebf/anifie_wireframes_my-tickets.svg" data-mid="95443762" border="0" src="https://freight.cargo.site/w/1000/i/5c063111c59f453cce9bdeae49f50cd46eb16f9e1a94c34497223ecd1bb15ebf/anifie_wireframes_my-tickets.svg" /> <img width="8342" height="2387" width_o="8342" height_o="2387" data-src="https://freight.cargo.site/t/original/i/5fe9e344dc018eee7241c9c9d03c6d406c9cd64e47bb5f20fd772852e8cdf7c8/anifie_wireframes_checkout.svg" data-mid="95443761" border="0" src="https://freight.cargo.site/w/1000/i/5fe9e344dc018eee7241c9c9d03c6d406c9cd64e47bb5f20fd772852e8cdf7c8/anifie_wireframes_checkout.svg" /> Test: LoFi Prototype The Lofi prototype helped us evaluate whether users understand what the app is about and to Identify barriers while participants are doing the main tasks. LoFi Prototype→ <img width="1184" height="2340" width_o="1184" height_o="2340" data-src="https://freight.cargo.site/t/original/i/665c15fe35f8bad9dd14a391c389740769370de609a892d7d04d3b10b1c5c689/lofi-anifie.png" data-mid="95445589" border="0" data-scale="25" src="https://freight.cargo.site/w/1000/i/665c15fe35f8bad9dd14a391c389740769370de609a892d7d04d3b10b1c5c689/lofi-anifie.png" />The Stakeholder wanted to validate whether or not the user preferred vertical UI or horizontal UI so we created a horizontal LoFi prototype to test alongside the vertical LoFi prototype. Horizontal LoFi Prototype→<img width="1194" height="603" width_o="1194" height_o="603" data-src="https://freight.cargo.site/t/original/i/e38e063edafc3dc5370f2a788d624a8a13181347c12222b5f2d82b3215b33eb9/LoFi-horizontal-wifi.png" data-mid="95446344" border="0" data-scale="50" src="https://freight.cargo.site/w/1000/i/e38e063edafc3dc5370f2a788d624a8a13181347c12222b5f2d82b3215b33eb9/LoFi-horizontal-wifi.png" /> Research: LoFi Prototype GOALS
The purpose of the LoFi usability testing is to comprehend the overall impact of the environment and how all this assimilates for the user in the virtual environment. We want to answer our prototype questions and validate or invalidate our assumptions with real users. From this user testing, we will have gathered insights from users and validated our ideas.

 HYPOTHESIS It is easy to understand what this app is. Users will find all the resources easily.Users will prefer Vertical display, for main interactions and Horizontal for In-concert view.METHOD
The method for the usability testing was a full day of moderated 1:1 user interviews. We used Figma for the prototype and recorded our interviews. 
PARTICIPANTS
Five participants were interviewed for the usability test. All of the participants were found by contacting people from each of the team members networks between the ages of 20-30 years old. <img width="717" height="635" width_o="717" height_o="635" data-src="https://freight.cargo.site/t/original/i/ff7e4c68b95df81b3a9b371d6b9c7858f31032f80532d47fc09bc7d8bd16d116/trello.png" data-mid="95446712" border="0" data-scale="73" src="https://freight.cargo.site/w/717/i/ff7e4c68b95df81b3a9b371d6b9c7858f31032f80532d47fc09bc7d8bd16d116/trello.png" /> We were able to synthesize our Usability results on Trello in order to derive the user pain points and recommendations. We then created the Empathy map and Affinity map to visualize the qualitative data and key findings. Research: Quotes "It's very appealing! I think what attracts you and the fact that it says find a virtual concert, which attracts me and makes me interested to know what's next." –P3 "I prefer and expect horizontal when it is for video, but when chatting and talking I like to use my thumbs (thumbs don’t stretch on horizontal, don’t like that), so for everything else I expect vertical" –P1 Research: Affinity Map &amp; Empathy Map <img width="1542" height="1180" width_o="1542" height_o="1180" data-src="https://freight.cargo.site/t/original/i/1a7bd15fbbd3cefb2718044ad0bfb38a70e86b85ca4d50b937d9771e2c0c6d13/Screen-Shot-2021-01-17-at-9.18.12-PM.png" data-mid="95454113" border="0" src="https://freight.cargo.site/w/1000/i/1a7bd15fbbd3cefb2718044ad0bfb38a70e86b85ca4d50b937d9771e2c0c6d13/Screen-Shot-2021-01-17-at-9.18.12-PM.png" /> <img width="1470" height="1382" width_o="1470" height_o="1382" data-src="https://freight.cargo.site/t/original/i/f426a8285d9c24cc1b8e59f70e2cfe2d1650aa4278f371c5b9004136ca90b3ba/Screen-Shot-2021-01-17-at-9.17.51-PM.png" data-mid="95454112" border="0" src="https://freight.cargo.site/w/1000/i/f426a8285d9c24cc1b8e59f70e2cfe2d1650aa4278f371c5b9004136ca90b3ba/Screen-Shot-2021-01-17-at-9.17.51-PM.png" /> KEY INSIGHTS Refunding Tickets was not intuitive.Participants preferred vertical screens for main user interactions and horizontal for the concert view.Participants wanted purchased tickets to be visible on Home screen&nbsp; Styleguide&nbsp; Main choices made in the Style guide: Use similar colors from the original platform so that it would be easy for existing users to identify the elements;In all fields, we added labels for better accessibility;We defined the primary and secondary action buttons to facilitate the user’s understanding of the platform;We selected Baloo as our only typography and used it’s variation to organize the information;We used Pegasus Design System to easily complement our design. <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/510bf6aedeb7f352fe25b969d337bddfd969e292c623c4b0917a77bc430a0454/Brand-Platform.png" data-mid="95455804" border="0" src="https://freight.cargo.site/w/792/i/510bf6aedeb7f352fe25b969d337bddfd969e292c623c4b0917a77bc430a0454/Brand-Platform.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/e0f1ffca5d14d3685422c3cc80e7fe82a79bed6983c5c5443721e6d2ee57e5da/Cover.png" data-mid="95455802" border="0" src="https://freight.cargo.site/w/792/i/e0f1ffca5d14d3685422c3cc80e7fe82a79bed6983c5c5443721e6d2ee57e5da/Cover.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/f3ba49322762d35cbd3c3c64a877051455023068e52c58517c4d3967891f38a8/Brand-Platform-2.png" data-mid="95455806" border="0" src="https://freight.cargo.site/w/792/i/f3ba49322762d35cbd3c3c64a877051455023068e52c58517c4d3967891f38a8/Brand-Platform-2.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/c6d3258598b9819df8532ddce93a4c15c1fd4d5df35a6bd552ae6873a9f86145/Logo.png" data-mid="95455808" border="0" src="https://freight.cargo.site/w/792/i/c6d3258598b9819df8532ddce93a4c15c1fd4d5df35a6bd552ae6873a9f86145/Logo.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/31bb4595e61417283cf4e018409bf934f637ba4ae7d8e2648f6e1182a86a07e4/Colors.png" data-mid="95455810" border="0" src="https://freight.cargo.site/w/792/i/31bb4595e61417283cf4e018409bf934f637ba4ae7d8e2648f6e1182a86a07e4/Colors.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/66f63a4043781ee98685360eb21122468709bbbf151cce61e35e1b32e34cfd28/Type.1.png" data-mid="95455811" border="0" src="https://freight.cargo.site/w/792/i/66f63a4043781ee98685360eb21122468709bbbf151cce61e35e1b32e34cfd28/Type.1.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/e468807a76f8602542ff1604bc909b954aa50d4e66812bdc8c2a7092513375d4/Type-.2.png" data-mid="95455815" border="0" src="https://freight.cargo.site/w/792/i/e468807a76f8602542ff1604bc909b954aa50d4e66812bdc8c2a7092513375d4/Type-.2.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/7903a197559d42e1309d8f3cc5c1b257131376f1fe3feb35d6b3d4636173771a/Type.3.png" data-mid="95455818" border="0" src="https://freight.cargo.site/w/792/i/7903a197559d42e1309d8f3cc5c1b257131376f1fe3feb35d6b3d4636173771a/Type.3.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/2b02f5296e87c7428a7c49df9857cbe7be2882944dac98b9b2236c37b6922d44/Grids.png" data-mid="95455820" border="0" src="https://freight.cargo.site/w/792/i/2b02f5296e87c7428a7c49df9857cbe7be2882944dac98b9b2236c37b6922d44/Grids.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/f60eefc03768f1dcd1ac624d99a50b5d66e31d8679d0fb9986fef494abb71ddc/UI-Elements.1.png" data-mid="95455822" border="0" src="https://freight.cargo.site/w/792/i/f60eefc03768f1dcd1ac624d99a50b5d66e31d8679d0fb9986fef494abb71ddc/UI-Elements.1.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/11b45c09ca88f7d632f1c9d29c0463ab760084ecab45cd7635af40dd62aadfb6/UI-Elements.2.png" data-mid="95455824" border="0" src="https://freight.cargo.site/w/792/i/11b45c09ca88f7d632f1c9d29c0463ab760084ecab45cd7635af40dd62aadfb6/UI-Elements.2.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/e1398366c9cbc3e3e8e15a24f33a571a498b5c872d96ce388cd547b609a79d6c/UI-Elements.3.png" data-mid="95455825" border="0" src="https://freight.cargo.site/w/792/i/e1398366c9cbc3e3e8e15a24f33a571a498b5c872d96ce388cd547b609a79d6c/UI-Elements.3.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/f7def2bb50a367b4de920efb3f712eb5d51ad7db707599a1730927ecd546d4ed/UI-Elements.4.png" data-mid="95455826" border="0" src="https://freight.cargo.site/w/792/i/f7def2bb50a367b4de920efb3f712eb5d51ad7db707599a1730927ecd546d4ed/UI-Elements.4.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/577926b31aa4a7fc88e70f0fbc9985c46e328fa390c344bc752622a67e2fa95d/UI-Elements.5.png" data-mid="95455827" border="0" src="https://freight.cargo.site/w/792/i/577926b31aa4a7fc88e70f0fbc9985c46e328fa390c344bc752622a67e2fa95d/UI-Elements.5.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/71728393dae58c880f0024a7e757e8e25aee0957c95f0f2bb29ccac6f5638abb/UI-Elements.6.png" data-mid="95455829" border="0" src="https://freight.cargo.site/w/792/i/71728393dae58c880f0024a7e757e8e25aee0957c95f0f2bb29ccac6f5638abb/UI-Elements.6.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/7d01f6bd4e41d8e8b03d93980a0a5a57b8e9e3b970b196a966b596eeb109cf90/Imagery.png" data-mid="95455830" border="0" src="https://freight.cargo.site/w/792/i/7d01f6bd4e41d8e8b03d93980a0a5a57b8e9e3b970b196a966b596eeb109cf90/Imagery.png" /> <img width="792" height="612" width_o="792" height_o="612" data-src="https://freight.cargo.site/t/original/i/15c6479e538356eeadfd7d3957985fa185273d86d9f2e8393cfe6b5db41cfa37/Icons.png" data-mid="95455831" border="0" src="https://freight.cargo.site/w/792/i/15c6479e538356eeadfd7d3957985fa185273d86d9f2e8393cfe6b5db41cfa37/Icons.png" /> Iterate: HiFi Designs V1 <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/907945a8dcfe769c3389c52eaf111d9063de191811dc8ab58ab09ca35f8e43b8/Hifi-onboarding.png" data-mid="95457855" border="0" src="https://freight.cargo.site/w/1000/i/907945a8dcfe769c3389c52eaf111d9063de191811dc8ab58ab09ca35f8e43b8/Hifi-onboarding.png" /> <img width="4235" height="2465" width_o="4235" height_o="2465" data-src="https://freight.cargo.site/t/original/i/dbcd2c9af78c70c7178f81c5b90ea33f7aa73ae1933a25fd08beba32a8c04b87/anifie-hifi-home.png" data-mid="95457852" border="0" src="https://freight.cargo.site/w/1000/i/dbcd2c9af78c70c7178f81c5b90ea33f7aa73ae1933a25fd08beba32a8c04b87/anifie-hifi-home.png" /> <img width="4239" height="2471" width_o="4239" height_o="2471" data-src="https://freight.cargo.site/t/original/i/e25fe285fe2a7735bfae11d3068628b5f34393635a2b14776ed4f5bad636c89c/anifie-hifi-chat.png" data-mid="95457853" border="0" src="https://freight.cargo.site/w/1000/i/e25fe285fe2a7735bfae11d3068628b5f34393635a2b14776ed4f5bad636c89c/anifie-hifi-chat.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/b0de4c7d83657bac3684345a7ee2d5cce3681da8b6d3be338189246f3f51bf37/HIFI-anifie_wireframes_community.png" data-mid="95457860" border="0" src="https://freight.cargo.site/w/1000/i/b0de4c7d83657bac3684345a7ee2d5cce3681da8b6d3be338189246f3f51bf37/HIFI-anifie_wireframes_community.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/afb79fba3ac633c22392d5489bc54c1f439ee77042b209d16af3ec9e4714de0c/anifie-hifi-shop.png" data-mid="95457854" border="0" src="https://freight.cargo.site/w/1000/i/afb79fba3ac633c22392d5489bc54c1f439ee77042b209d16af3ec9e4714de0c/anifie-hifi-shop.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/aaa74cec132ed7501efe851c80938087e0b243605becd240e9ae5c211d523166/Hifi-Account.png" data-mid="95457856" border="0" src="https://freight.cargo.site/w/1000/i/aaa74cec132ed7501efe851c80938087e0b243605becd240e9ae5c211d523166/Hifi-Account.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/78dc89c701a0fae8664e87a5629f99cf6e98bb00526515010bc97da70a639404/HIFI-anifie_wireframes_my-avatar.png" data-mid="95457858" border="0" src="https://freight.cargo.site/w/1000/i/78dc89c701a0fae8664e87a5629f99cf6e98bb00526515010bc97da70a639404/HIFI-anifie_wireframes_my-avatar.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/87842981ec6cc3fb4c9b1e782884999cb227758cbca945ad04cec3ee3497c990/anifie_wireframes_checkout.png" data-mid="95457857" border="0" src="https://freight.cargo.site/w/1000/i/87842981ec6cc3fb4c9b1e782884999cb227758cbca945ad04cec3ee3497c990/anifie_wireframes_checkout.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/daaff66411255ae8778ae396f04bee8f15069b32be36c843a9cf9fe48fc8f64f/HIFI-anifie_wireframes_my-tickets.png" data-mid="95457859" border="0" src="https://freight.cargo.site/w/1000/i/daaff66411255ae8778ae396f04bee8f15069b32be36c843a9cf9fe48fc8f64f/HIFI-anifie_wireframes_my-tickets.png" /> <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/5b08d5dce8c2b960f54b81efbc8493721dc7d58985bd6b133a6c30aea6a93fc0/HIFI-anifie-wireframes-concert.png" data-mid="95457861" border="0" src="https://freight.cargo.site/w/1000/i/5b08d5dce8c2b960f54b81efbc8493721dc7d58985bd6b133a6c30aea6a93fc0/HIFI-anifie-wireframes-concert.png" /> We made adjustments to the home screen and the refund ticket interactions based on the LoFi research results.&nbsp; <img width="4239" height="2465" width_o="4239" height_o="2465" data-src="https://freight.cargo.site/t/original/i/ab8142209a51fd480baea93db5bf6bff8225f64d4efd9ade627fc2a5010e50ff/Iterate_-HiFi-Designs.png" data-mid="95458443" border="0" src="https://freight.cargo.site/w/1000/i/ab8142209a51fd480baea93db5bf6bff8225f64d4efd9ade627fc2a5010e50ff/Iterate_-HiFi-Designs.png" /> Test: HiFi Prototype We collected great feedback from the LoFi Prototype and started the development of the high fidelity prototype. The HiFi prototype helped us evaluate the second round of research and testing for our final iteration. This whole step was made in Figma.HiFi Prototype→ <img width="1184" height="2340" width_o="1184" height_o="2340" data-src="https://freight.cargo.site/t/original/i/1685c937b4cac2776bcccde7ff7e64abe201432ba85881a834aa5920f22c1629/anifie-hifi.png" data-mid="95458903" border="0" data-scale="30" src="https://freight.cargo.site/w/1000/i/1685c937b4cac2776bcccde7ff7e64abe201432ba85881a834aa5920f22c1629/anifie-hifi.png" /> Research: HiFi PrototypeGOALS
The purpose of the HiFi usability testing is to validate or invalidate updates made to the environment based on the first round of testing. HYPOTHESIS With an up to date onboarding process users will find the experience exciting and easy to login/sign up.Target users will find the navigation simple and intuitive. METHOD
The method for the usability testing was a full week of moderated 1:1 user interviews. We used Figma for the prototype and recorded our interviews. 
PARTICIPANTS
Eight participants were interviewed for the usability test. All of the participants were found by contacting people from Anifie and each of the team members networks. Research: HiFi Prototype Quotes "This is super straightforward" (in ref to onboarding process) –P1 "Colors feel familiar and good, it seems very minimalistic, doesn’t seem complex" –P3 "It’s all self-explanatory, and user friendly" –P4 Research: HiFi Prototype Affinity Map <img width="1504" height="1380" width_o="1504" height_o="1380" data-src="https://freight.cargo.site/t/original/i/d0375a9a22effe668051988c4f356ef1ce032e964cac2b4efa8c9192e86eff03/Screen-Shot-2021-01-17-at-11.15.55-PM.png" data-mid="95463228" border="0" src="https://freight.cargo.site/w/1000/i/d0375a9a22effe668051988c4f356ef1ce032e964cac2b4efa8c9192e86eff03/Screen-Shot-2021-01-17-at-11.15.55-PM.png" /> KEY INSIGHTS Knowing their friends' active status is important.User would like to unify the payment option (coins vs. money).Private chat with friend is essential.The compensation for Volunteering wasn't clear enough.The ability to visually see the process of Avatar customization is important. Stakeholder Asks Along with the HiFi Prototype research key insights, the stakeholder had additional feedback for us to consider. Volunteer Opportunities are not shown (is replaced by "follow us" feed)Getting a phone address book is a No.1 growth hack for mobile app user acquisitions. Clarify where users can purchase ‘Coins’. Final Iteration After rapid testing with a few of my collogues I updated my wireframes based on some reccomendations and created another LoFi prototype. <img width="4818" height="2207" width_o="4818" height_o="2207" data-src="https://freight.cargo.site/t/original/i/7ffc5033eba047eb401b3b1e94c0ef53fe546ce326c79ecad2bbc11643d2eaaf/Volunteering.png" data-mid="95466479" border="0" src="https://freight.cargo.site/w/1000/i/7ffc5033eba047eb401b3b1e94c0ef53fe546ce326c79ecad2bbc11643d2eaaf/Volunteering.png" /> <img width="4818" height="2207" width_o="4818" height_o="2207" data-src="https://freight.cargo.site/t/original/i/7fb5b294b0ec5601d9704757beb06ff2c19767f2fce76afb95c30dea0cd978d9/Onboarding.png" data-mid="95466478" border="0" src="https://freight.cargo.site/w/1000/i/7fb5b294b0ec5601d9704757beb06ff2c19767f2fce76afb95c30dea0cd978d9/Onboarding.png" /> <img width="4818" height="2207" width_o="4818" height_o="2207" data-src="https://freight.cargo.site/t/original/i/9feb6109da3d9a85751fea38b589f4f6fb3f4394ab8d47a7a8157827c2f6e4a9/shop-coin.png" data-mid="95466480" border="0" src="https://freight.cargo.site/w/1000/i/9feb6109da3d9a85751fea38b589f4f6fb3f4394ab8d47a7a8157827c2f6e4a9/shop-coin.png" /> <img width="4818" height="2207" width_o="4818" height_o="2207" data-src="https://freight.cargo.site/t/original/i/b631f2bcf2fe4fca87d31f42b9ad8a132fc9f885abb0acaa2e1e3efee0a1757c/in-concert-chat.png" data-mid="95466481" border="0" src="https://freight.cargo.site/w/1000/i/b631f2bcf2fe4fca87d31f42b9ad8a132fc9f885abb0acaa2e1e3efee0a1757c/in-concert-chat.png" /> Final PrototypeWith all the final iterations incorporated, the final prototype was created. Click the link to have a look! Prototype→ <img width="1184" height="2340" width_o="1184" height_o="2340" data-src="https://freight.cargo.site/t/original/i/1685c937b4cac2776bcccde7ff7e64abe201432ba85881a834aa5920f22c1629/anifie-hifi.png" data-mid="95458903" border="0" data-scale="32" src="https://freight.cargo.site/w/1000/i/1685c937b4cac2776bcccde7ff7e64abe201432ba85881a834aa5920f22c1629/anifie-hifi.png" /> &nbsp;&nbsp; Next Steps Why settle for usable when we can make interfaces both usable and pleasurable? With high competition and a constantly growing number of mobile apps devoted to interactive virtual environments, the first impression cannot be just nice and clean. The successful app, in this case, should instantly appeal to the emotional and aesthetic sides of user perception, be simple to use to engage the user from the first seconds and let them interact according to their personal preferences. That’s the balance our team strived for in the case of Anifie mobile app.Anifie can move to use our UI template and modify copy as they see fit. It is advisable to conduct more research with A/B testing and also to test further when it comes to the in-concert experience. Thanks A big thanks to my team, Bonnie and Sarah. https://shouvick.design/HAP-VR-Tour-UX-UI-Case-Study Tue, 02 Mar 2021 15:42:29 +0000 Shouvick Koley https://shouvick.design/HAP-VR-Tour-UX-UI-Case-Study <img width="3601" height="2000" width_o="3601" height_o="2000" data-src="https://freight.cargo.site/t/original/i/4656d063df82b317877a7fde3f42c639c695be526d934e8e9941792304c6f4c9/HAP-hero-mock.png" data-mid="100670026" border="0" src="https://freight.cargo.site/w/1000/i/4656d063df82b317877a7fde3f42c639c695be526d934e8e9941792304c6f4c9/HAP-hero-mock.png" /> ︎HAP VR Tour Prototype PROJECT DETAILS Client Project l 14 Weeks Across the world, many non-profit institutions remain closed. Their challenge is to encourage their audience to remain engaged with offerings of digital content. It almost seems like a losing proposition from the get-go but it’s vital to get back to normal levels.&nbsp; Museums around the world have set up their exhibits in an online environment due to the pandemic. This shows the change that HAP will more or less have to undergo to continue serving the public. Currently all exhibits have either been closed or moved into an online format.&nbsp; During this time, it is both difficult to host in a physical place and get funding since HAP is not well known to Millenials. RoleLead UX/UI DesignerTeamFrancesco Tamay DeliverablesUX ResearchUser Journey &amp; PersonaWebsite site Landing PageWebsite User FlowResponsive High-Fi VR Prototype About HAP The Hellenic American Project is a multipurpose cultural center focusing on the development and diversity of Greek American people through oral history and the Arts. Located in Queens Hall at Queens College, they offer lectures, symposia, films, digital display and online catalogues complied with a modern eye. Stakeholder Interview After the interview with Nicholas, we clearly understood the problems that HAP was facing and from there we were able to synthesize opportunities that they could benefit them.Design Toolkit <img width="2106" height="428" width_o="2106" height_o="428" data-src="https://freight.cargo.site/t/original/i/4866ba8c74f68608b41804778ea3ce920e71494fa955717f13af95c14c954090/HAP-toolkit-.png" data-mid="100665277" border="0" src="https://freight.cargo.site/w/1000/i/4866ba8c74f68608b41804778ea3ce920e71494fa955717f13af95c14c954090/HAP-toolkit-.png" /> Design Process <img width="799" height="302" width_o="799" height_o="302" data-src="https://freight.cargo.site/t/original/i/387c45c3d027968267ab692b028cd929f3570d50977551f6b49871deb147c556/Design-thinking-diagram-.svg" data-mid="100642939" border="0" src="https://freight.cargo.site/w/799/i/387c45c3d027968267ab692b028cd929f3570d50977551f6b49871deb147c556/Design-thinking-diagram-.svg" /> Our POV After rapid testing with a few of my collogues I updated my wireframes based on some reccomendations and created another LoFi prototype. <img width="1420" height="552" width_o="1420" height_o="552" data-src="https://freight.cargo.site/t/original/i/f4438b23dc5627a82f7ce588b347f37b9b5b6226fa5b0ca7b0cc1ffdd9d74c2a/HAP-POV.png" data-mid="100647260" border="0" src="https://freight.cargo.site/w/1000/i/f4438b23dc5627a82f7ce588b347f37b9b5b6226fa5b0ca7b0cc1ffdd9d74c2a/HAP-POV.png" /> Solution“The virtual museum experience responds in a multidimensional way to different needs that can be simultaneously educational, exceptional, social, leisure oriented or many others.” –Tiina Roppola, Designing for the Museum Visitor Experience We aimed to use the HAP museum as a launching point for our Virtual Tour.&nbsp; On virtual tours, visitors often rejoice in autonomy. They can move freely in space through functionality (should work), reliability (should work well), usability (should be easy to use), proficiency (should enable people to do something better),&nbsp; and creativity (should enable people to envision something new). Persona <img width="1998" height="1540" width_o="1998" height_o="1540" data-src="https://freight.cargo.site/t/original/i/69373525598128dbf4d6934c9a4d356fc3436b3fefd6fa5b78728159a4265250/HAP-persona.png" data-mid="100659884" border="0" src="https://freight.cargo.site/w/1000/i/69373525598128dbf4d6934c9a4d356fc3436b3fefd6fa5b78728159a4265250/HAP-persona.png" /> &nbsp;&nbsp; Userflow The user would receive the link to the virtual tour via email or simply by going on the HAP website. The tour would consist of exhibits that can be found on the HAP museum. One of the key features we included was a donation pay wall which presented itself at the start of the VR tour. <img width="7244" height="2158" width_o="7244" height_o="2158" data-src="https://freight.cargo.site/t/original/i/9964a9ef935a624a9e9a035e1ea1f82646b4152c45c6be245cc0f035b3774ba7/HAP-user_flow.png" data-mid="100648866" border="0" src="https://freight.cargo.site/w/1000/i/9964a9ef935a624a9e9a035e1ea1f82646b4152c45c6be245cc0f035b3774ba7/HAP-user_flow.png" /> Concept/Wireframes <img width="1512" height="715" width_o="1512" height_o="715" data-src="https://freight.cargo.site/t/original/i/8c605bc3297c92177fe2095ef5fd8f9e92d0d9190285298ec15e3d1201d372f4/HAP-concept.png" data-mid="100650035" border="0" src="https://freight.cargo.site/w/1000/i/8c605bc3297c92177fe2095ef5fd8f9e92d0d9190285298ec15e3d1201d372f4/HAP-concept.png" /> HiFi Design First Iteration <img width="1512" height="715" width_o="1512" height_o="715" data-src="https://freight.cargo.site/t/original/i/30398d5548ca3408db6accc91c7afcac84bd9db02f785994b89c4681249b5bbd/HAP-Hifi1.png" data-mid="100650407" border="0" src="https://freight.cargo.site/w/1000/i/30398d5548ca3408db6accc91c7afcac84bd9db02f785994b89c4681249b5bbd/HAP-Hifi1.png" />ResearchGOALSThe purpose of the usability testing was to comprehend the overall impact of the environment and how all this assimilates for the user in the virtual environment METHODThe method for the usability testing was a full day of moderated 1:1 user interviews. We used InVision for the prototype and recorded our interviews. PARTICIPANTSFive participants were interviewed for the usability test. All of the participants were found by contacting people from&nbsp; each of the team members networks between the ages of 20 -30 years old. 1-on-1 Interview Findings <img width="2357" height="1326" width_o="2357" height_o="1326" data-src="https://freight.cargo.site/t/original/i/29e32fc204dfe9a82145b8912dba410ef2a374d4c438bd807eb8ec4208506cb0/HAP-research.svg" data-mid="100651075" border="0" src="https://freight.cargo.site/w/1000/i/29e32fc204dfe9a82145b8912dba410ef2a374d4c438bd807eb8ec4208506cb0/HAP-research.svg" />Research Quotes “It was really nice to get, essentially a gallery experience with the convenience or comfort of my own home, or the location I choose.” —Participant 1 “It looks really nice, I like it. I didn’t know you could do something like this” —Participant 3This is really cool. It is nice to have this museum environment digitally, in front of me”—Participant 4 “It was very smooth, very self explanatory and I really love the gallery experience”—Participant 5 HiFi Design Second Iteration <img width="960" height="401" width_o="960" height_o="401" data-src="https://freight.cargo.site/t/original/i/fe9afdc547a58bde9ee294655255be1ab33cc3ac9149aeadc57538af2ca64f9e/HAP-HiFi2.png" data-mid="100653239" border="0" src="https://freight.cargo.site/w/960/i/fe9afdc547a58bde9ee294655255be1ab33cc3ac9149aeadc57538af2ca64f9e/HAP-HiFi2.png" /> Improvements&nbsp; <img width="960" height="368" width_o="960" height_o="368" data-src="https://freight.cargo.site/t/original/i/de7e1694e817e79fd5497558cdd0b140dd0f46f3aa8f143cfcaca249cfb58e68/HAP-improvements.png" data-mid="100654555" border="0" src="https://freight.cargo.site/w/960/i/de7e1694e817e79fd5497558cdd0b140dd0f46f3aa8f143cfcaca249cfb58e68/HAP-improvements.png" /> Protoype Overview <img width="789" height="408" width_o="789" height_o="408" data-src="https://freight.cargo.site/t/original/i/e90249ad30ba2c4dc8e67ad0d2620f3781f36ffa6c6ca346cf0bcb7359fccb91/HAP-prototype-overview.png" data-mid="100654949" border="0" src="https://freight.cargo.site/w/789/i/e90249ad30ba2c4dc8e67ad0d2620f3781f36ffa6c6ca346cf0bcb7359fccb91/HAP-prototype-overview.png" /> TakeawaysOf course, many considerations are still open. Human needs are the same whether the means of delivery are live or online, but on the contrary people may not always be the same, as they may experience the same visit more than once and perceive (and behave) differently each time. Other key issues to consider certainly remain: how to solicit social interactions between visitors, themselves or their friends, how to build long-term relationships between the museum and visitors and above all how to expand research on this investigation. https://shouvick.design/Doonya-UX-Case-Study Tue, 03 Mar 2020 03:46:24 +0000 Shouvick Koley https://shouvick.design/Doonya-UX-Case-Study Doonya&nbsp;Case Study ︎ doonya.com <img width="2500" height="2245" width_o="2500" height_o="2245" data-src="https://freight.cargo.site/t/original/i/3ddb03c4adac350dee247e2ea8f30f883e1f4e155c8db87364e4d8dc3e3bb725/Doonya-ds-Mockup.png" data-mid="63238200" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/3ddb03c4adac350dee247e2ea8f30f883e1f4e155c8db87364e4d8dc3e3bb725/Doonya-ds-Mockup.png" /> PROJECT DETAILSClient Project l 8.5 Weeks DeliverablesCustomer PersonaUser Journey &amp; Empathy MapStylescapePoster DesignBusiness Card DesignZineWebsite User FlowResponsive High-Fi Prototype About DOONYA Doonya a Bollywood workout, is a dance based high-intensity interval training fitness program that feeds the body and mind. Challenge Create a poster and zine ad campaign.Generate retention through meaningful incentivesRedesign the branding and the client facing website. Approach Identifying potential users, and interviewing them.Define specific use cases for print materials and future websitesDefining usability and accessibility principles, prototyping UI elements&nbsp; Design Toolkit <img width="2702" height="428" width_o="2702" height_o="428" data-src="https://freight.cargo.site/t/original/i/dd151bcc31f609f9a890e2e00e160d9fbde0e49b15bdb8053ad30918ac681fc2/toolkit.png" data-mid="95019191" border="0" src="https://freight.cargo.site/w/1000/i/dd151bcc31f609f9a890e2e00e160d9fbde0e49b15bdb8053ad30918ac681fc2/toolkit.png" /> Design Process The first step of the design process involved user interviews and desk research to understand how competitors and users behave. I believe it’s important to get this information early on in the process, before having an idea or prototyping. After analyzing these insights, I began to conceptualize the solution, focusing on the stylescape, poster, &nbsp;user flows and wireframe to give me a way to iterate faster through ideas. From this, I went into&nbsp; production mode, designing the interface, considering design principles such as contrast, hierarchy and feedback; brand attributes; user interactions, and the imagistic universe presented as briefing by the case. Once the interface was ready, I took feedback from other fellow designers in order to understand the experience gaps. Validation, although part of my usual design process, would be a post-conceptualization and interface step and won’t be discussed in depth in this case. <img width="2362" height="286" width_o="2362" height_o="286" data-src="https://freight.cargo.site/t/original/i/70f835ae715da3c8306701b7d866d8b4f0cfdbb1df1d86798e5839fad41aaf12/Design-Process.png" data-mid="63530894" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/70f835ae715da3c8306701b7d866d8b4f0cfdbb1df1d86798e5839fad41aaf12/Design-Process.png" /> User Interviews User interviews are a core user experience method. That’s why I chose to approach 10 people to interview, taking into account the recommendation from Donald Norman’s article, “Why You Only Need to Test with 5 Users,” noting that it is possible to learn about 80% of the errors, problems, and behavior from the first 6 users that would bring enough data and inputs to generate concepts and hypothesis. After the conceptualization phase, however, I’d take the prototype out to test with other users in order to gather more feedbacks and validation. The interview sample took into account men and women aged from 22 to 34, within the cities of New York and New Haven. The interview took between 15-30 minutes and included topics to get to the core of what users looking for in a HIIT fitnesses dance class and what their problems are. So I asked: •&nbsp; What are your exercise habits? •&nbsp; Where do you go to exercise? •&nbsp; What are you trying to get out of a dance fitness class? •&nbsp; What kinds of incentives would make you attend classes more often? Customer Insights After analysing&nbsp; all the interviews, and despite the amount of generated data, this was the most relevant information for the decision-making towards creating a solution. <img width="1868" height="414" width_o="1868" height_o="414" data-src="https://freight.cargo.site/t/original/i/2037084e225ae25643da100b09405e295fbf9ea15faa67118b492990fa425fd0/Customer-insights.png" data-mid="63531974" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/2037084e225ae25643da100b09405e295fbf9ea15faa67118b492990fa425fd0/Customer-insights.png" /> What we see is that although 90% of users believes that dance helps with their mental health, 70% of them say they struggle to build sustainable excersise habits. User Research <img width="1190" height="1684" width_o="1190" height_o="1684" data-src="https://freight.cargo.site/t/original/i/32f7562ba47701d57f88282591b23070070cc9cecc381c79aaaa28a3fdf5f639/Design-2.png" data-mid="62534809" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/32f7562ba47701d57f88282591b23070070cc9cecc381c79aaaa28a3fdf5f639/Design-2.png" /> Stylescape <img width="2448" height="432" width_o="2448" height_o="432" data-src="https://freight.cargo.site/t/original/i/dc6a314150a430cf2acd3f56ae7f5e12c664fb911c557edb351dbc3a2e815fd6/Stylescape-12x.png" data-mid="62535174" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/dc6a314150a430cf2acd3f56ae7f5e12c664fb911c557edb351dbc3a2e815fd6/Stylescape-12x.png" /> Colors The brand’s guidelines led me to pick a playful and inviting tone, so I chose purple and green to make the brand youthful and bold. Yellow was added as well to give the interface a warmer look. For text, a lighter variation of black was brought in to ensure reading and contrast, thus reaching appropriate levels of accessibility. <img width="2044" height="168" width_o="2044" height_o="168" data-src="https://freight.cargo.site/t/original/i/faed4d1736efff0c96c3ebdd7e528ab16b955a376cd99dcf3b67b51a92315a3a/Colors.png" data-mid="63001951" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/faed4d1736efff0c96c3ebdd7e528ab16b955a376cd99dcf3b67b51a92315a3a/Colors.png" /> Typography Since the 70% of the users interviewed were single young professional women, I understood this as an opportunity to apply bold typfaces that reflected their strength and individuallity.&nbsp; Therefore, I used the combination of Proxima Nova sans serif typography with a serif, Vesterbro.&nbsp; <img width="1562" height="1302" width_o="1562" height_o="1302" data-src="https://freight.cargo.site/t/original/i/211d71421df90646ccae82e8ba82dece86fdb7724d5b206af85e0757838c4136/typograpghy.png" data-mid="63001893" border="0" data-scale="99" src="https://freight.cargo.site/w/1000/i/211d71421df90646ccae82e8ba82dece86fdb7724d5b206af85e0757838c4136/typograpghy.png" /> Poster Design <img width="5100" height="6600" width_o="5100" height_o="6600" data-src="https://freight.cargo.site/t/original/i/149010a6d28545999a1ee95375bf8ff033fb45f263a0c2294d1fedef18b98cbc/DoonyaFlierDesign2SK0814192x.png" data-mid="62535230" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/149010a6d28545999a1ee95375bf8ff033fb45f263a0c2294d1fedef18b98cbc/DoonyaFlierDesign2SK0814192x.png" /> Business Card Design <img width="5100" height="4281" width_o="5100" height_o="4281" data-src="https://freight.cargo.site/t/original/i/0619a93b619591da5f860537832d7cbcebd3003f5867613cf75efaa081dab225/DoonyaBCDesign2SK0814192x.png" data-mid="62536041" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/0619a93b619591da5f860537832d7cbcebd3003f5867613cf75efaa081dab225/DoonyaBCDesign2SK0814192x.png" /> Zine <img width="2400" height="1500" width_o="2400" height_o="1500" data-src="https://freight.cargo.site/t/original/i/39aa31bc1719101a729bc70c08400a337532c7164fdd705bd3e88e0f199a9214/Doonya-zine-gif.gif" data-mid="62640601" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/39aa31bc1719101a729bc70c08400a337532c7164fdd705bd3e88e0f199a9214/Doonya-zine-gif.gif" /> Doonya Website User Flow The main point of the flow is to ensure that the functionality is always visible to the user, but not in an obstructive way. So I decided to create a simple experience for the user to find and book a class. <img width="2000" height="2629" width_o="2000" height_o="2629" data-src="https://freight.cargo.site/t/original/i/a6d04ab8895f5b84d22398d38a2821c843bebf2f7dbf9750f0640aa7f794b31c/Doonya-sitemap.png" data-mid="95017935" border="0" src="https://freight.cargo.site/w/1000/i/a6d04ab8895f5b84d22398d38a2821c843bebf2f7dbf9750f0640aa7f794b31c/Doonya-sitemap.png" /> Website Wireframes <img width="1024" height="722" width_o="1024" height_o="722" data-src="https://freight.cargo.site/t/original/i/d3a6541236a140810e4736d1fb1b80c17f9aa4d250d2369c0ff604e23e09e98a/about-Page.png" data-mid="62976420" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/d3a6541236a140810e4736d1fb1b80c17f9aa4d250d2369c0ff604e23e09e98a/about-Page.png" /> <img width="1024" height="722" width_o="1024" height_o="722" data-src="https://freight.cargo.site/t/original/i/a30659e50815108919a2ec409fcb7b64981a76da90939adb774bfb300632d375/Find-a-class.png" data-mid="62976419" border="0" src="https://freight.cargo.site/w/1000/i/a30659e50815108919a2ec409fcb7b64981a76da90939adb774bfb300632d375/Find-a-class.png" /> <img width="1024" height="722" width_o="1024" height_o="722" data-src="https://freight.cargo.site/t/original/i/65072818c2f4a192a9981492ef104a5a8f20c915c62acbb45da0c9e9a5dceea6/Home.png" data-mid="62976418" border="0" src="https://freight.cargo.site/w/1000/i/65072818c2f4a192a9981492ef104a5a8f20c915c62acbb45da0c9e9a5dceea6/Home.png" /> Hi-Fideliy Mock Ups ︎ invision prototype <img width="1024" height="658" width_o="1024" height_o="658" data-src="https://freight.cargo.site/t/original/i/5a6a900fa5d6b832d484c8190fca444928f6fbb334bf6a5bdfa4bc6600d2aada/05-Find-a-class-hi.png" data-mid="62976557" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/5a6a900fa5d6b832d484c8190fca444928f6fbb334bf6a5bdfa4bc6600d2aada/05-Find-a-class-hi.png" /> <img width="1024" height="824" width_o="1024" height_o="824" data-src="https://freight.cargo.site/t/original/i/656d31f9030a1e31e97897700a6e0ee9057c4ca52c6b43eb0ccf540745652228/01-Home-hi.png" data-mid="62976552" border="0" src="https://freight.cargo.site/w/1000/i/656d31f9030a1e31e97897700a6e0ee9057c4ca52c6b43eb0ccf540745652228/01-Home-hi.png" /> <img width="1024" height="1153" width_o="1024" height_o="1153" data-src="https://freight.cargo.site/t/original/i/adaccdc2ebc1f907221bc3c559fabaffb02188e000cba1068ef10e4a850643fa/08-Become-an-instructor.png" data-mid="62976559" border="0" src="https://freight.cargo.site/w/1000/i/adaccdc2ebc1f907221bc3c559fabaffb02188e000cba1068ef10e4a850643fa/08-Become-an-instructor.png" /> <img width="1024" height="824" width_o="1024" height_o="824" data-src="https://freight.cargo.site/t/original/i/0549941cd51ee164b58a2344b3b07a38a7c9d1c54638acd2be418bc4afca8c6d/04-Home-find-a-class-dropdown.png" data-mid="62976554" border="0" src="https://freight.cargo.site/w/1000/i/0549941cd51ee164b58a2344b3b07a38a7c9d1c54638acd2be418bc4afca8c6d/04-Home-find-a-class-dropdown.png" /> Takeaways This was a great experience for me as a designer to work on a project of my own, collaborate with engineers, interact with different categories of stakeholders, and see real results at the end. Thanks! A big thanks to the people who participated in the interviews and gave me feedback to improve the idea.