https://vijiadesign.com Jia's Art World Sat, 22 Jul 2023 16:11:16 +0000 https://vijiadesign.com en https://vijiadesign.com/Home Sun, 14 Apr 2019 16:30:28 +0000 Jia's Art World https://vijiadesign.com/Home AI: &nbsp; &nbsp; Are you a boy or a girl?User: &nbsp; I don’t know.AI: &nbsp;&nbsp; &nbsp;If you could be ANYTHING what would you be?User: &nbsp; Beautiful.AI: &nbsp; &nbsp; And how can I assist you?. https://vijiadesign.com/Recharge-Behavioral-Health Sat, 22 Jul 2023 16:11:16 +0000 Jia's Art World https://vijiadesign.com/Recharge-Behavioral-Health Behavioral Health - Recharge BackgroundEmployees have been experiencing fatigue with step-based Challenges and crave a stronger connection with their co-workers to support their mental and physical wellbeing. To address this, we embarked on developing non-step challenges in collaboration with the clinic and customer service teams. After 10 months of design and development, we proudly launched "Recharge" – an interactive journey to better behavioral health. This app guides members through evidence-based mindfulness activities to boost mood and reduce stress. Using a fun and team-based approach, Recharge helps members build skills, foster positive thinking, and encourage social connections. The app was successfully launched in March 2023, fulfilling our mission to support employee wellbeing and foster a sense of community.My Role• Brainstorm with PMs, CSMs and clinic team • Create initial concept draft &gt;&gt;&nbsp; • Provide UI/UX mockups and flows • Build prototype • Collaborate with engineers Design ProgressGamification-based wellness challenges aim to instill a sense of development and accomplishment in players. Interactive step-by-step tutorials are deployed, while narrative processes are vital for significance and meaning. Users should feel uniquely chosen for the task. In the picture, we created a theme around jointly building a community garden. Users earn components through activities, fostering connections and mindfulness. The "Chat" and "High five" features encourage engagement and collaboration. By participating in this challenge, users experience personal growth and a stronger bond with colleagues. The gamified approach motivates and empowers users to achieve their wellness goals, fostering a positive and supportive community. • Garden progress flow and specs &gt;&gt;&nbsp;• High five flow &gt;&gt;• Team chat flow &gt;&gt; • End of journey flow &gt;&gt;• Reporting and Configuration &gt;&gt; <img width="1435" height="1261" width_o="1435" height_o="1261" data-src="https://freight.cargo.site/t/original/i/7a9c3ae53abd209670428dc83528b3c55b22f4b8cd9590417d264773359d3118/garden-theme.png" data-mid="185811738" border="0" src="https://freight.cargo.site/w/1000/i/7a9c3ae53abd209670428dc83528b3c55b22f4b8cd9590417d264773359d3118/garden-theme.png" /> Final DesignChanging Mindsets - This experience is centered around helping members build healthy skills and habits, which can lead to better health and productivity. Connecting Colleagues Across the World&nbsp;- Focusing on social support -a proven method of building resilience to stress –this journey has built-in opportunities for positive encouragement and inspiration from one another. Recharge was built on&nbsp;evidence-based science, leveraging research&nbsp;proven to positively affect mental health outcomes. <img width="3536" height="2522" width_o="3536" height_o="2522" data-src="https://freight.cargo.site/t/original/i/d071bcdf78f0fcf31479d7b6946ded7b4ea2d0acc277ffc14165b3e3c2cf9be4/BH.png" data-mid="185852135" border="0" src="https://freight.cargo.site/w/1000/i/d071bcdf78f0fcf31479d7b6946ded7b4ea2d0acc277ffc14165b3e3c2cf9be4/BH.png" /> https://vijiadesign.com/COVID-19-Test-Site-Finder Thu, 09 Apr 2020 17:27:02 +0000 Jia's Art World https://vijiadesign.com/COVID-19-Test-Site-Finder Castlight COVID-19 Test Site Finder BackgroundOn March 25, 2020, Castlight released a tool that can be accessed by anyone in the U.S. who is looking to find the closest Coronavirus testing site to their home. This tool contains guidelines on facility requirements on how to receive a COVID-19 test. The tool is crowd-sourced so that those who want to contribute can fill out a form about a new location or update information on a current testing site.&nbsp;Click here to the live website ProjectShortly after the COVID-19 Test Site Finder was released, I got an urgent task to enhance the User Interface of the COVID-19 Test Site Finder in preparing for a potential collaboration with Google and Apple. The following screenshots can give you a high level idea of how the user interface has transformed from the first release (on the left) to the upgraded release (on the right) that is designed by me. <img width="3859" height="2080" width_o="3859" height_o="2080" data-src="https://freight.cargo.site/t/original/i/c831830b46bf50b0643c3140e2e20a951dc9d2be7bfa2fa9103c5f12a595adb5/Vi_testfinder-01.png" data-mid="70346658" border="0" src="https://freight.cargo.site/w/1000/i/c831830b46bf50b0643c3140e2e20a951dc9d2be7bfa2fa9103c5f12a595adb5/Vi_testfinder-01.png" />ProcessUpdate color themeSince the release of the pink theme, there have been many controversies. After synthesizing many opinions, we decided to choose a yellow gradient theme. Yellow has the meaning of early warning. Castlight brand colors are purple and blue, and the complementary color of purple is yellow. This combination will make the website look natural and coordinated.Bring illustrations into UX design Illustration is something I often use in my design work as it can be a useful tool to solve design problems. Since the content of guidelines on health facility requirements can not be removed or reduced any more, I can only optimize from the layout and visual. Illustration is an efficient way to convey a piece of information or a concept at just a glance, so it can provide a nice solution to this problem.Integrate new feature&nbsp;As part of the redesign, we introduced a new feature which allows users to enter their address in the search bar to search for the closest COVID-19 test site location to their address in addition to the drop-down filtering by state, county and zip code.My initial idea was to create two separate tabs for the two search modes that users can switch between as illustrated by the screenshots below. While this design makes the layout appear simple and clean, it may require users to take additional steps by switching between the tabs before they can find the content they need. Even worse, the search functionality in the inactive tab may be completely ignored by first time users who haven’t comprehended the product. In the end, I landed with the design of displaying both search modes on the same page. <img width="3859" height="2080" width_o="3859" height_o="2080" data-src="https://freight.cargo.site/t/original/i/350d4338de47e587665a4349a9611fa4d0f402fd2d70aff760b80e407ad17df8/Vi_testfinder-02.png" data-mid="70346659" border="0" src="https://freight.cargo.site/w/1000/i/350d4338de47e587665a4349a9611fa4d0f402fd2d70aff760b80e407ad17df8/Vi_testfinder-02.png" />Add more data in the facility view We collected a large amount of data related to the COVID-19 test site, including business hours, facility type (hospital, community center, drive-thru, etc.), requirement type (appointments required or physician order required) and test type (assessment, specimen collection, home test, etc). As you can see in the screenshot at the bottom left, we did not display this data in the first version. We believe that this data is indeed very important and helpful to users, so bringing this data into the facility view is a feature we hope to include in the next release. The challenge of this task is how to add all the data in a limited space that doesn’t overwhelm users. The screenshot at the bottom right is the version we released on May 2 that is based on the upgraded design I made where we managed to add important data related to the health facility in the user interface. <img width="3859" height="2455" width_o="3859" height_o="2455" data-src="https://freight.cargo.site/t/original/i/cb4250363bafc7c3fd8869bf7d6bda535e7db2346570f59bf5dc4a7045f06364/Vi_testfinder-04.png" data-mid="70353616" border="0" src="https://freight.cargo.site/w/1000/i/cb4250363bafc7c3fd8869bf7d6bda535e7db2346570f59bf5dc4a7045f06364/Vi_testfinder-04.png" /> Work with developers step by step to fix all issues we had for ADA (Americans with Disabilities Act) complianceThe Michigan Department of Health requested that the Castlight COVID-19 tester be embedded on its official website. Website needs ADA accessible to users across the U.S. We updated based on it including button color, font size, icon size, etc.<img width="3859" height="2080" width_o="3859" height_o="2080" data-src="https://freight.cargo.site/t/original/i/b384ba9a857a2745123ea8ffe77381961077ebecac3f85b2ecda23620bd59fbf/Vi_testfinder-03.png" data-mid="70346660" border="0" src="https://freight.cargo.site/w/1000/i/b384ba9a857a2745123ea8ffe77381961077ebecac3f85b2ecda23620bd59fbf/Vi_testfinder-03.png" />Results To summarize, I redesigned the user interface of our COVID-19 Test Finder by adding a new mode of search-by-address, enhancing the health facility view with more facility data, and improving some features in an internal tool for facility collection. The new feature like facility filter, antibody testing that I’m working on is to launch soon. Click here to the live website As of April 24th, we had 275k total unique users on our website, launched 17+ partnerships including some of the most prominent in the industry such as Google, New York State, Anthem, Michigan Department of Health, DaVita, Teladoc, 98point6 etc which has significantly improved our branding in the healthcare industry.<img width="3859" height="1935" width_o="3859" height_o="1935" data-src="https://freight.cargo.site/t/original/i/a9b38520d231294588121375f09220d5ebb593b3f05f9d3163a9377a36143594/Vi_testfinder-06.png" data-mid="70917861" border="0" src="https://freight.cargo.site/w/1000/i/a9b38520d231294588121375f09220d5ebb593b3f05f9d3163a9377a36143594/Vi_testfinder-06.png" /> <img width="3859" height="1935" width_o="3859" height_o="1935" data-src="https://freight.cargo.site/t/original/i/080ca916c8a780e2aa7bfa528fa475ba82e9458b3bd6d75be6c695471e076c0f/Vi_testfinder-07.png" data-mid="71403096" border="0" src="https://freight.cargo.site/w/1000/i/080ca916c8a780e2aa7bfa528fa475ba82e9458b3bd6d75be6c695471e076c0f/Vi_testfinder-07.png" />Test Site Finder - One Year <img width="1268" height="786" width_o="1268" height_o="786" data-src="https://freight.cargo.site/t/original/i/32b5af62c8d8137d06daf5b766e6905c845653e8f6be5653b4dbd0906b6189a5/Screenshot-2023-07-24-at-8.30.31-PM.png" data-mid="185993591" border="0" src="https://freight.cargo.site/w/1000/i/32b5af62c8d8137d06daf5b766e6905c845653e8f6be5653b4dbd0906b6189a5/Screenshot-2023-07-24-at-8.30.31-PM.png" /> https://vijiadesign.com/Healthy-Habits-Wellbeing Tue, 21 Jun 2022 00:52:41 +0000 Jia's Art World https://vijiadesign.com/Healthy-Habits-Wellbeing Healthy Habits - Breathe&nbsp; <img width="376" height="666" width_o="376" height_o="666" data-src="https://freight.cargo.site/t/original/i/250108f8127241d4c827c5beb3c1cd5ebd26022e0233d19786bde5b1430dc793/Personal_Challenge_Card-58.jpg" data-mid="145939940" border="0" src="https://freight.cargo.site/w/376/i/250108f8127241d4c827c5beb3c1cd5ebd26022e0233d19786bde5b1430dc793/Personal_Challenge_Card-58.jpg" /> <img width="84" height="150" width_o="84" height_o="150" data-src="https://freight.cargo.site/t/original/i/fad501c1cfb389c986a26ca72455f23438d705e797fc6552278b3fe27a6fdf72/PC_animation-with-screen.svg" data-mid="145939942" border="0" src="https://freight.cargo.site/w/84/i/fad501c1cfb389c986a26ca72455f23438d705e797fc6552278b3fe27a6fdf72/PC_animation-with-screen.svg" /> <img width="84" height="150" width_o="84" height_o="150" data-src="https://freight.cargo.site/t/original/i/d1845e1590265549f747c6593f283a505bfa49766789c0c2488e86875219508b/Breathe_bg.svg" data-mid="145939959" border="0" src="https://freight.cargo.site/w/84/i/d1845e1590265549f747c6593f283a505bfa49766789c0c2488e86875219508b/Breathe_bg.svg" /> BackgroundHealthy Habits (Personal Challenges) is an app designed to tailor each user’s own interests. Users could join one of the Healthy Habits based on their own interests by setting a goal and pursuing the habits they joined. Breathe is one of Healthy Habits. The idea of Breathe is to encourage users to practice healthy breathing exercises on a daily basis. Users will get a virtual reward when they keep practicing every day. It is a 4-week challenge during which each week contains a different Meditation Practice from easy to hard. This app was launched in 2020. My Role • Provide UI/UX mockups and flows&nbsp; • Build prototype• Create visual concept and animations • Collaborate with PMs and engineersA few quotes from customers“Loved the insight from the experts, and that is offered low-stress/easy solutions to make changes vs. a complete wellness overhauls.”“It had a lot of good information on things to do to stay motivated to reach your goals as well as identify blocking forces that get in the way. Very helpful” “Helpful tips on createing healthy practices. Learning to day “I choose” opposed to “I have to” and how to anchor new habits.” ProgressUser researchThe ultimate goal is to remind and incentivize users to practice breathing every day, whether at home or in the office. Firstly, we need to design an interface that will send daily reminders for breathing practice. Secondly, as users engage in daily practice, we aim to reward them with virtual incentives. I took charge of designing these virtual rewards and conducted extensive research. I found that most apps commonly use badges and points for winning streaks, like Fitbit's badges and iWatch Activity's awards. I shared screenshots of these examples with the team. While we acknowledged their beauty and elegance, we also felt they lacked a sense of uniqueness or special significance. <img width="1808" height="1149" width_o="1808" height_o="1149" data-src="https://freight.cargo.site/t/original/i/9f6372b034d5260264aa55125aaf6ddb53340cbd80e03a01fce214dfb7091960/streak_research.png" data-mid="145939950" border="0" src="https://freight.cargo.site/w/1000/i/9f6372b034d5260264aa55125aaf6ddb53340cbd80e03a01fce214dfb7091960/streak_research.png" />Define concept<img width="1728" height="862" width_o="1728" height_o="862" data-src="https://freight.cargo.site/t/original/i/70eddbf7a5f2d8739185166b06baccba6893ef7e45f14a6b9608de6f780e8495/Screen-Shot-2019-10-12-at-10.35.09-PM.png" data-mid="145939945" border="0" src="https://freight.cargo.site/w/1000/i/70eddbf7a5f2d8739185166b06baccba6893ef7e45f14a6b9608de6f780e8495/Screen-Shot-2019-10-12-at-10.35.09-PM.png" />After several rounds of in-depth discussions, we agreed that the key to success is to get users interested in the app. We know that developing good/healthy habits is challenging and requires time and effort. As healthy habit formation is like a personal journey, we decided to implement something that users need to take care of daily in a storytelling way, encouraging them to stick to their habits. To provide more incentive, we offer a virtual reward streak to users for logging into the app every day. For added fun and increased user curiosity, I designed a growing plant as the virtual reward. The plant starts as a seed and grows and changes as users practice breathing exercises daily. To enhance visual effects, I animated streak messages. For instance, the app will push a message with a dynamic fallen leaf if the user hasn't logged in for several days. For users practicing daily, they'll receive a thumb up, a bolt, or a fire based on the number of consecutive days. <img width="234" height="150" width_o="234" height_o="150" data-src="https://freight.cargo.site/t/original/i/7ad8e3c254178ff731313defebd8b6c3e0449470726939241d16912be55ba181/thumbsup_new.svg" data-mid="145947392" border="0" src="https://freight.cargo.site/w/234/i/7ad8e3c254178ff731313defebd8b6c3e0449470726939241d16912be55ba181/thumbsup_new.svg" /><img width="234" height="150" width_o="234" height_o="150" data-src="https://freight.cargo.site/t/original/i/f84a5c36a7601810bf99056cc8084f22d8d4fbf22cdad415d942f3dc79685787/bolt-new.svg" data-mid="145942973" border="0" src="https://freight.cargo.site/w/234/i/f84a5c36a7601810bf99056cc8084f22d8d4fbf22cdad415d942f3dc79685787/bolt-new.svg" /><img width="234" height="150" width_o="234" height_o="150" data-src="https://freight.cargo.site/t/original/i/f334c11433bcf8403fb0555bc39f0b15360bf9b2e88dce9cb0a6c31e587711e0/fire-new.svg" data-mid="145942830" border="0" data-scale="100" src="https://freight.cargo.site/w/234/i/f334c11433bcf8403fb0555bc39f0b15360bf9b2e88dce9cb0a6c31e587711e0/fire-new.svg" /> UI design for Virtual Rewards We decided to maintain one theme throughout the entire habit, which meant I needed to create a longer story to support the theme for 9 weeks. This was the most challenging part of the project. The first theme of Healthy Habits is "Grow," and I crafted a story centered around daffodils. It starts with preparations for planting daffodils, setting up the environment, containers, and planting the seeds. As the user logs in daily, the seeds will slowly change, subtly making the user accustomed to observing the growth and changes of the daffodils. I designed different perspectives to observe the growth process, including long-range and close-up views. I also introduced new elements to the story, such as a glass of water, a cup of coffee, and a book, related to other healthy habits: Drink H2O, Make Coffee, and Reading. These additions complemented the theme and provided a comprehensive narrative for the 9-week journey. Here are some of animations I made for other Healthy Habits. <img width="150" height="150" width_o="150" height_o="150" data-src="https://freight.cargo.site/t/original/i/a659f260181307feb7f92413367e851e16bfbd1b16a374ec55690586a418c9fc/breathe-girls-new.svg" data-mid="145946303" border="0" src="https://freight.cargo.site/w/150/i/a659f260181307feb7f92413367e851e16bfbd1b16a374ec55690586a418c9fc/breathe-girls-new.svg" />&nbsp; &nbsp;<img width="161" height="150" width_o="161" height_o="150" data-src="https://freight.cargo.site/t/original/i/5461e117dd6b19065d15b8bf3265c9a5f419633270c23311dac597f451a9bfc9/meditation.svg" data-mid="146159957" border="0" src="https://freight.cargo.site/w/161/i/5461e117dd6b19065d15b8bf3265c9a5f419633270c23311dac597f451a9bfc9/meditation.svg" /> &nbsp; <img width="161" height="150" width_o="161" height_o="150" data-src="https://freight.cargo.site/t/original/i/d02fcf97269ada97d6ab58c8c01b1d5b04ae9b2370a4a0cd9ecd4b343cb3b1bf/power-down.svg" data-mid="146159958" border="0" src="https://freight.cargo.site/w/161/i/d02fcf97269ada97d6ab58c8c01b1d5b04ae9b2370a4a0cd9ecd4b343cb3b1bf/power-down.svg" />&nbsp; &nbsp;<img width="161" height="150" width_o="161" height_o="150" data-src="https://freight.cargo.site/t/original/i/cc2aafd0a34969a963a3100c047325ab681e5ba4902d000e2e4ce34a2ba50ed5/drinkh2o-new.svg" data-mid="146160079" border="0" src="https://freight.cargo.site/w/161/i/cc2aafd0a34969a963a3100c047325ab681e5ba4902d000e2e4ce34a2ba50ed5/drinkh2o-new.svg" />&nbsp; &nbsp;<img width="161" height="150" width_o="161" height_o="150" data-src="https://freight.cargo.site/t/original/i/3011c1b406049ba1fd64ca9d8d636650ed208a722dc47e53750fbc9cef61ddab/eat-veggies-new.svg" data-mid="146160081" border="0" src="https://freight.cargo.site/w/161/i/3011c1b406049ba1fd64ca9d8d636650ed208a722dc47e53750fbc9cef61ddab/eat-veggies-new.svg" /> &nbsp; <img width="161" height="150" width_o="161" height_o="150" data-src="https://freight.cargo.site/t/original/i/b82f6cdbf53e844e2185690a0a420c9da414b61bac50f8fe155e1f1ca7052eb6/makecoffee-new.svg" data-mid="146160082" border="0" src="https://freight.cargo.site/w/161/i/b82f6cdbf53e844e2185690a0a420c9da414b61bac50f8fe155e1f1ca7052eb6/makecoffee-new.svg" /> The screenshot below depicts the last two weeks, where the daffodils bloom and the book is finished. Users can probably infer that the story is coming to an end. With the appearance of a lovely card, users may understand the purpose of planting daffodils. The final scene shows Grandma receiving the blooming daffodils and the card, bringing the story to a perfect end.When a user is willing to try one of the habits, it marks a good start. I hope that the visual and emotional illustrations, with a strong sense of storytelling, can encourage users to persist in developing a healthy habit. This is also the original intention behind the development of our project. <img width="3230" height="729" width_o="3230" height_o="729" data-src="https://freight.cargo.site/t/original/i/3eadac034395b38ca044d9887232986dad6cda54976d57278061a8e9d014aaf6/VR-last-day.png" data-mid="185799088" border="0" src="https://freight.cargo.site/w/1000/i/3eadac034395b38ca044d9887232986dad6cda54976d57278061a8e9d014aaf6/VR-last-day.png" /> Wireframe +&nbsp; Flows + InterfaceOnboarding experience: <img width="4103" height="1980" width_o="4103" height_o="1980" data-src="https://freight.cargo.site/t/original/i/df12ab3c5227557088b31ee00b81fcc26b0c7ff4e5325a06479c5c935e01a20e/HH-Onboarding.png" data-mid="185803323" border="0" src="https://freight.cargo.site/w/1000/i/df12ab3c5227557088b31ee00b81fcc26b0c7ff4e5325a06479c5c935e01a20e/HH-Onboarding.png" />&nbsp;Getting a streak experience <img width="3094" height="2102" width_o="3094" height_o="2102" data-src="https://freight.cargo.site/t/original/i/c14716c5a5796b9bb36ae24740f45e5b46045c7031f057e9b79e3edbc2c6319a/Get-a-streak.png" data-mid="185805052" border="0" src="https://freight.cargo.site/w/1000/i/c14716c5a5796b9bb36ae24740f45e5b46045c7031f057e9b79e3edbc2c6319a/Get-a-streak.png" /> Reminder setting experience <img width="4356" height="1186" width_o="4356" height_o="1186" data-src="https://freight.cargo.site/t/original/i/27ec1657d61db7225b4ecc8d201044d1367be420865fca4595d1a1d67e36c724/Reminder-setting.png" data-mid="185805585" border="0" src="https://freight.cargo.site/w/1000/i/27ec1657d61db7225b4ecc8d201044d1367be420865fca4595d1a1d67e36c724/Reminder-setting.png" /> https://vijiadesign.com/Jiff-Healthcare-1 Sun, 14 Apr 2019 21:24:06 +0000 Jia's Art World https://vijiadesign.com/Jiff-Healthcare-1 JiffJiff is an enterprise health benefits platform that saves employers money by organizing their health benefits and personalizing them for each individual. As the Sr. visual designer in the creative squad, I am in charge of client customization design with 20+ clients launched in past 3 years, including CVS, Nestle, Johnson and Johnson, Akamai, Red Bull, and Qualcomm etc.Click here to watch the customized intro videos <img width="4167" height="11082" width_o="4167" height_o="11082" data-src="https://freight.cargo.site/t/original/i/b8598d12095491dab0643d2907d4ad7c8e69c2c401ebc0278166fa2a5ce6cef0/J4-01.png" data-mid="40024885" border="0" src="https://freight.cargo.site/w/1000/i/b8598d12095491dab0643d2907d4ad7c8e69c2c401ebc0278166fa2a5ce6cef0/J4-01.png" /> Click below if you’d like to know more details on the process of customization Case1&nbsp; Case2 https://vijiadesign.com/Fantasy-Island-Challenge Thu, 02 Aug 2018 16:43:20 +0000 Jia's Art World https://vijiadesign.com/Fantasy-Island-Challenge Fantasy Island Challenge <img width="1000" height="908" width_o="1000" height_o="908" data-src="https://freight.cargo.site/t/original/i/d3d1f703f7f8b43ee4e302c1d5b96df763b323c56c4f6abb67c5045424520c51/Artboard-1.png" data-mid="21602550" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/d3d1f703f7f8b43ee4e302c1d5b96df763b323c56c4f6abb67c5045424520c51/Artboard-1.png" /> <img width="1000" height="908" width_o="1000" height_o="908" data-src="https://freight.cargo.site/t/original/i/c190ddf08ac9feaf47c20b47f74c8062c0edf3922fb2f4aeb3802b0eea594140/Artboard-2.png" data-mid="21608574" border="0" src="https://freight.cargo.site/w/1000/i/c190ddf08ac9feaf47c20b47f74c8062c0edf3922fb2f4aeb3802b0eea594140/Artboard-2.png" /> SummaryFantasy Island Challenge is a narrative-driven, social steps challenge focused on individual achievements. It aims to promote healthy habits and reinforce a positive, healthy workplace culture for employees. Conquering the 20 levels in the Challenge unlocks rewards. This project has been one of the most interesting and challenging endeavors I've undertaken. I was deeply involved in every aspect of the project, from brainstorming ideas with the product team, creating mockups with product designers, designing the 20th-level fantasy islands with visual designers, to crafting animations and testing with the engineering team. The feature was fully launched in Q4 2018 and has since become a significant driver of user engagement in our app. My role My team is responsible for designing these 20-level fantasy islands. I personally designed four of them and created animations for ten of them. ProcessDraft Sketch&nbsp; &gt;&nbsp; Illustration Design&nbsp; &nbsp;&gt;&nbsp; Design Critique&nbsp; &gt;&nbsp; Defining Theme&nbsp; &gt;&nbsp; Finalization Draft Sketch&nbsp;We began with hand drawings, encouraging every designer to generate their unique ideas through sketches, without any restrictions on styles. The picture below displays my sketch of Peach Blossom Island, which drew inspiration from the movie "Eternal Love." Finally, we shared all of our drafts within the team. <img width="1001" height="643" width_o="1001" height_o="643" data-src="https://freight.cargo.site/t/original/i/90b93b14e62a4ff92be7369e1e0f897dc9c6aea2dbde08d5880cdc1241d3e29b/Artboard-8.png" data-mid="21609875" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/90b93b14e62a4ff92be7369e1e0f897dc9c6aea2dbde08d5880cdc1241d3e29b/Artboard-8.png" /><img width="1252" height="700" width_o="1252" height_o="700" data-src="https://freight.cargo.site/t/original/i/5b2058d13b7b4470c6a90bc11d2c1749119e9c0e5e39dcb3c3477cde53cc61f9/Screen-Shot-2018-03-22-at-1.29.41-PM.png" data-mid="51898161" border="0" src="https://freight.cargo.site/w/1000/i/5b2058d13b7b4470c6a90bc11d2c1749119e9c0e5e39dcb3c3477cde53cc61f9/Screen-Shot-2018-03-22-at-1.29.41-PM.png" />Illustration Design We transformed the hand drawing into an illustration. I chose the sea island as the starting point because I had some creative ideas during the drafting process. I proposed two designs. The first design aims to evoke a mysterious feeling, featuring an unmanned boat floating on the sea with a bright oil lamp. The second design expresses a sense of the future, depicting a geometric-shaped dolphin leaping out of the sea. <img width="1250" height="834" width_o="1250" height_o="834" data-src="https://freight.cargo.site/t/original/i/793d73ad486386ee26cd5ee38d625667e84e4b35eca35b79ed5f373423ba75e6/Sea_Island_V1.png" data-mid="51896173" border="0" src="https://freight.cargo.site/w/1000/i/793d73ad486386ee26cd5ee38d625667e84e4b35eca35b79ed5f373423ba75e6/Sea_Island_V1.png" /> <img width="1250" height="834" width_o="1250" height_o="834" data-src="https://freight.cargo.site/t/original/i/cfe3c327faec952edf5a48b73d520d62ee57446cacff8f92c69e703a01f14d3f/level_Island_V2_wheal-03.jpg" data-mid="51898446" border="0" src="https://freight.cargo.site/w/1000/i/cfe3c327faec952edf5a48b73d520d62ee57446cacff8f92c69e703a01f14d3f/level_Island_V2_wheal-03.jpg" /> Design critique When the first version of Fantasy Island was created, we organized a project review with related cross-functional teams. Our goal was to give a visual experience of our design to teams like engineering and product, confirming that our design aligns with our product vision and is well-thought-out and achievable. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/ff7aec4a653cde0a98d7268d47e2b30a2e860ac744a74c52b786af4d702b34a2/workshop_wwf.jpg" data-mid="51898160" border="0" data-scale="49" src="https://freight.cargo.site/w/1000/i/ff7aec4a653cde0a98d7268d47e2b30a2e860ac744a74c52b786af4d702b34a2/workshop_wwf.jpg" /><img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/b0d9432604853f8fbcd3bdbf5be45396e52e01d46a6b5be41683bcf53919a4b3/Image-uploaded-from-iOS.jpg" data-mid="21612767" border="0" data-scale="49" src="https://freight.cargo.site/w/1000/i/b0d9432604853f8fbcd3bdbf5be45396e52e01d46a6b5be41683bcf53919a4b3/Image-uploaded-from-iOS.jpg" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/f77f0fa6a298115f051ce18f77ec1692969c0a6f32d2849e7827aa9f2885002f/Image-uploaded-from-iOS-1.jpg" data-mid="51898146" border="0" data-scale="32" src="https://freight.cargo.site/w/1000/i/f77f0fa6a298115f051ce18f77ec1692969c0a6f32d2849e7827aa9f2885002f/Image-uploaded-from-iOS-1.jpg" /><img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/2c573502b2056e6cf8c49058d69c50bcbaf0ba35a8d08f0b8196466d3c225db2/Image-uploaded-from-iOS-2.jpg" data-mid="51898145" border="0" data-scale="32" src="https://freight.cargo.site/w/1000/i/2c573502b2056e6cf8c49058d69c50bcbaf0ba35a8d08f0b8196466d3c225db2/Image-uploaded-from-iOS-2.jpg" /><img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/bd140b8fb6837e32c1e27da457f8b1a4555aecd0bbd03ca5ecae1dc94d3e7331/Image-uploaded-from-iOS-3.jpg" data-mid="51898144" border="0" data-scale="32" src="https://freight.cargo.site/w/1000/i/bd140b8fb6837e32c1e27da457f8b1a4555aecd0bbd03ca5ecae1dc94d3e7331/Image-uploaded-from-iOS-3.jpg" />Define theme Afterward, we shared our designs with all internal employees by posting them on a board. This approach garnered tons of valuable feedback, including comments like "Can there be more colors?", "Is it a bit too realistic?", "Too many cool tones!", "The styles are not consistent.", "Some emphasize too much detail, while others are too simple," and so on. We also received positive feedback like "They truly deserve to be called Fantasy Islands because at first sight, I can't pinpoint their location; some remind me of the Canyonlands, while others evoke a sense of the future world." <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/04662095b118c2284f3e9ff43b539f7aca125e56b365d6814c753017c65c2696/IMG_9908.jpg" data-mid="21612684" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/04662095b118c2284f3e9ff43b539f7aca125e56b365d6814c753017c65c2696/IMG_9908.jpg" /><img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/e307abf30612ba4cb94f92110d1e1e00f31ee7fcffa97dc017aec277a6d7c9c7/Image-from-iOS.jpg" data-mid="51898147" border="0" data-scale="35" src="https://freight.cargo.site/w/1000/i/e307abf30612ba4cb94f92110d1e1e00f31ee7fcffa97dc017aec277a6d7c9c7/Image-from-iOS.jpg" />Results The picture below shows the entire process from the second round to the finalization. <img width="1843" height="1729" width_o="1843" height_o="1729" data-src="https://freight.cargo.site/t/original/i/b50e95f04ad2b678a32e3588b7348dec8c5b0c2ba90503f6d50c4431f96f092e/Artboard-9.png" data-mid="21615757" border="0" src="https://freight.cargo.site/w/1000/i/b50e95f04ad2b678a32e3588b7348dec8c5b0c2ba90503f6d50c4431f96f092e/Artboard-9.png" />Animation Implementation Issues Most designers in our team get used to make animations using After effect and export to MOV format. As we know, not all media players, devices, online file storage services and websites support the MOV format. Also the file size of MOV is usually bigger than other formats. Even if we support the MOV format, when 20 islands are animated together, It will dramatically slow down the loading process, resulting in a bad user experience.&nbsp; SolutionAnalyze CSS animation and SVG animation CSS. Animating a small graphic like a logo, an icon, button transitions, sliding panels, expanding divs, loading bars, rotating graphics etc.SVG. Animating an illustration, which is scalable vector graphics.After discussing with the developers, we came to the conclusion that SVG animation is a better choice, and the most consistent way to animate SVG is through Javascript, just as our web/mobile app is built with Javascript.&nbsp; Find a tool to create SVG animationSVGator: It’s not as powerful as Adobe After Effects, but it’s a lot more adaptive. It really speeds up the process when making simple SVG animations and exports everything in code, ready to use on the web. I created 10 island animations through SVGator with significant processing time speed up.Click here to see the High-Resolution SVG Animations <img width="640" height="640" width_o="640" height_o="640" data-src="https://freight.cargo.site/t/original/i/85532fd5bb1e45cfb221c3920790ff04ea42a0b9297ca0c7479c3c8253a231d1/Untitled-4.gif" data-mid="21670635" border="0" src="https://freight.cargo.site/w/640/i/85532fd5bb1e45cfb221c3920790ff04ea42a0b9297ca0c7479c3c8253a231d1/Untitled-4.gif" /> Fantasy Island Challenge Enhancement During a company hackathon, by collaborating with three developers, I designed a new feature, “Daily Bonus”, and integrated into Fantasy Island Challenge in order to increase daily login, boost time spent in app and encourage peers.&nbsp;Click here to see the complete proposal <img width="3685" height="4992" width_o="3685" height_o="4992" data-src="https://freight.cargo.site/t/original/i/89b28a9b8f36963f4889f271c986e6b767b8766c675a6522d1d76fbda9fad846/Artboard-10.png" data-mid="21804384" border="0" src="https://freight.cargo.site/w/1000/i/89b28a9b8f36963f4889f271c986e6b767b8766c675a6522d1d76fbda9fad846/Artboard-10.png" /> https://vijiadesign.com/Fantasy-Island-Daily-Bonus Mon, 22 Jul 2019 23:07:06 +0000 Jia's Art World https://vijiadesign.com/Fantasy-Island-Daily-Bonus Fantasy Island - Project Enhancement Introduce Daily Bonus to Fantasy Island ChallengeBackgroundFantasy Island challenge is a 30-day social step challenge app. There are 20 levels to conquer in the Challenge before you can get the rewards. Employees could earn gems by completing daily activities like reaching 5k steps, tagging colleagues and sending a boost to help colleagues to level up. The more gems they earn, the more their avatar will progress along the path and unlock new levels. IssuesDuring the first week of the product launch, the enrollment and participation rates were very high. However, the participation rate turned down sharply starting from the second week.&nbsp;In this regard, we also asked colleagues who participated in this challenge. Ask questions such as the following： do you reach the daily goal of 5,000 steps? How often do you open this app? Do you know how many gems you can earn per day? Do you know what your gems can do? Do you know that you can tag your colleagues to get gems? Do you know that you can have a boost as long as you double your daily goal? In the end, we found one of the most prominent reasons is&nbsp;the lack of activities.&nbsp;In addition, the majority of the information pushed to users is through&nbsp;notification, such as reaching the daily goal of 5k steps, being tagged from coworkers, and so on. As a result, users get gems without the need to open the app. There seems to be no motivation to spend more time in the app. ProcessTo start off, I created a provisional persona of a Fantasy Island Challenge user, based on my understanding of coworkers who joined the challenge, including myself. This persona was developed with assumptions, but I referred back to it throughout the project to guide my design decisions and priorities. The Fantasy Island Challenge typically runs for one time period, usually 30 days. I divided this time into three periods and made assumptions based on each of these segments. I listed all the activities Ana could engage in throughout the entire challenge. <img width="4604" height="5017" width_o="4604" height_o="5017" data-src="https://freight.cargo.site/t/original/i/f0c7caa642a82017663081350d5495d274b61ea6d1a222f7e1885c76ab394361/Issues.jpg" data-mid="52512231" border="0" src="https://freight.cargo.site/w/1000/i/f0c7caa642a82017663081350d5495d274b61ea6d1a222f7e1885c76ab394361/Issues.jpg" />Solution Through the analysis of the Ana's daily activities, I found that the interaction between her and her coworkers are only tagging and giving a boost. In addition, Ana was able to earn gems by just being tagged and given a boost by others instead of tagging others or giving a boost to others. There seems to be no motivation for Ana to log into the app, let alone to spend more time in the app. We introduced “Daily Bonus” into Fantasy Island Challenge in order to increase daily login, boost time spent in app and encourage peers.&nbsp; <img width="2630" height="941" width_o="2630" height_o="941" data-src="https://freight.cargo.site/t/original/i/f74683810d0c9e777f5ce8b0a680e13d5b830293271e5b8c70c4aee7ca693ec2/Gold.jpg" data-mid="52512591" border="0" src="https://freight.cargo.site/w/1000/i/f74683810d0c9e777f5ce8b0a680e13d5b830293271e5b8c70c4aee7ca693ec2/Gold.jpg" />Our VP of Design really liked our idea and asked us to provide more details after we presented our proposal in Hackthon. I spent a couple of weeks creating the flow including visual elements. and discussing the feasibility with the developers. In the end, we completed the design of the new feature “Daily Bonus” and the integration with the existing app. Please see more details below. The Overview of Daily Bonus Flow It includes the flows of how to earn daily bonus, how to redeem daily bonus, and how to socialize with peers. <img width="7344" height="5604" width_o="7344" height_o="5604" data-src="https://freight.cargo.site/t/original/i/dd1e1d9b92bd856f8569f1533696b91819f86ff7b19b283476b5bdfcaa1d938c/WWF_Daily-Bonus-Flow.jpg" data-mid="47137207" border="0" src="https://freight.cargo.site/w/1000/i/dd1e1d9b92bd856f8569f1533696b91819f86ff7b19b283476b5bdfcaa1d938c/WWF_Daily-Bonus-Flow.jpg" />Details on each feature The Rules of Earning Daily Bonus The user could earn daily bonus as long as she/he opens the challenge app daily. To make it more fun, the amount of Daily Bonus a user could earn each day varies. Also a user will get a surprising bonus when she/he logs in the app for seven consecutive days. Screen Transition: Pop (a modal over the home screen of the challenge) Action: Tap “Close” enter home screen of the challenge; Tap “Ok” button enter user profile modal to check the total of gold she/he has earned so far. <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/421ec8411dcf75243b5c400018687a96e81472a305cac7b6a0c4e6c1830c0763/day1.png" data-mid="51958588" border="0" data-scale="100" src="https://freight.cargo.site/w/375/i/421ec8411dcf75243b5c400018687a96e81472a305cac7b6a0c4e6c1830c0763/day1.png" />&nbsp; <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/02fd1e06ed09f7adedb2a054e60971b2a69024a5074a02207415fe6cb11c51cd/day5.png" data-mid="51958614" border="0" src="https://freight.cargo.site/w/375/i/02fd1e06ed09f7adedb2a054e60971b2a69024a5074a02207415fe6cb11c51cd/day5.png" />&nbsp;&nbsp;<img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/7da4a88d046e0ff13f41795a031bd174436d03ed9f246778377f278398550976/day7.png" data-mid="51958615" border="0" data-scale="57" src="https://freight.cargo.site/w/375/i/7da4a88d046e0ff13f41795a031bd174436d03ed9f246778377f278398550976/day7.png" />Avatar Decoration in Sticker Shop What can a user do with the daily bonus? A user could redeem stickers with the bonus to decorate her/his avatar. The entrance of Sticker shop is in the user profile modal, which is easy for user to access. The maximum number of stickers a user could redeem at any point of time is three. Each sticker will disappear in 48 hours after redemption, which encourages users to earn more bonus. The content of the dialog box is based on the stickers the avatar has, which could bring a real feeling of interaction with avatar. <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/8f0b60a4962458cc4fc6f6b1b140f459f6b9dc0a5164d430d758068a6a7a8ec2/6.png" data-mid="51960371" border="0" data-scale="97" src="https://freight.cargo.site/w/375/i/8f0b60a4962458cc4fc6f6b1b140f459f6b9dc0a5164d430d758068a6a7a8ec2/6.png" />&nbsp; <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/5404575b802bf7d24ff7d89cf2e1c14ec0bf8815a40aeba4eaaa387bad24e5c8/8.png" data-mid="51960373" border="0" data-scale="93" src="https://freight.cargo.site/w/375/i/5404575b802bf7d24ff7d89cf2e1c14ec0bf8815a40aeba4eaaa387bad24e5c8/8.png" />&nbsp;&nbsp;<img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/06b8937d961f5610b97e79cacc17f22dd59a0160f50b59ccfd1598a7efa60f53/10.png" data-mid="51960375" border="0" data-scale="58" src="https://freight.cargo.site/w/375/i/06b8937d961f5610b97e79cacc17f22dd59a0160f50b59ccfd1598a7efa60f53/10.png" /> <img width="2635" height="1867" width_o="2635" height_o="1867" data-src="https://freight.cargo.site/t/original/i/baf8474384866bddd9e1e48e1a941430a0ef942904111fd685e4f4b82f3bbe40/More-examples.png" data-mid="47137979" border="0" src="https://freight.cargo.site/w/1000/i/baf8474384866bddd9e1e48e1a941430a0ef942904111fd685e4f4b82f3bbe40/More-examples.png" />Social Feature If a user’s profile photo is glowing, it means this user has new stickers on his/her avatar. You tap “View avatar” to see the new stickers of her/his avatar. <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/69cf6fd1704fd1b5ca5da87bad236372c29f16c4cf3b9c4e2ec32a1e5cc25972/21.png" data-mid="51960936" border="0" src="https://freight.cargo.site/w/375/i/69cf6fd1704fd1b5ca5da87bad236372c29f16c4cf3b9c4e2ec32a1e5cc25972/21.png" />&nbsp;&nbsp;<img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/648e8380adf505161d0aa63c7b6b9148c198039902e09f3374ed4c1fa9d8bd9e/22.png" data-mid="51960904" border="0" src="https://freight.cargo.site/w/375/i/648e8380adf505161d0aa63c7b6b9148c198039902e09f3374ed4c1fa9d8bd9e/22.png" />&nbsp;&nbsp;<img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/6f81bb8c8730dc9de55c447b1ba0427125bd9000e63374ee20bf13f640eb4a0e/23.png" data-mid="51960910" border="0" src="https://freight.cargo.site/w/375/i/6f81bb8c8730dc9de55c447b1ba0427125bd9000e63374ee20bf13f640eb4a0e/23.png" />A like icon will display on the challenge home screen when a user receives a “Like” from other players. You tap the “Like” icon to see who liked your avatar. <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/3a1078e9b45c1d4aa8ffd80e690170f9427db87bf15ebb3600cb47cf9b5a005f/24.png" data-mid="51960794" border="0" src="https://freight.cargo.site/w/375/i/3a1078e9b45c1d4aa8ffd80e690170f9427db87bf15ebb3600cb47cf9b5a005f/24.png" />&nbsp; <img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/933919de03b55a0ca3b5189145d950f1467b585cd5339ad7e77f4bb27bc91f43/profile_liked-list.png" data-mid="51961351" border="0" src="https://freight.cargo.site/w/375/i/933919de03b55a0ca3b5189145d950f1467b585cd5339ad7e77f4bb27bc91f43/profile_liked-list.png" />&nbsp;&nbsp;<img width="375" height="667" width_o="375" height_o="667" data-src="https://freight.cargo.site/t/original/i/792f1d07b941db3b30884bd1cbbce78dbbafb2fd0a1a2ddf51fd41eafbc963dd/people_list_liked.png" data-mid="51961646" border="0" src="https://freight.cargo.site/w/375/i/792f1d07b941db3b30884bd1cbbce78dbbafb2fd0a1a2ddf51fd41eafbc963dd/people_list_liked.png" />Prototype:&nbsp; <img width="420" height="852" width_o="420" height_o="852" data-src="https://freight.cargo.site/t/original/i/6444c2301a605f803d68c938c30b89ff99b41928680e36012421096a44624aef/Prototype_Fantasy_Island.png" data-mid="52211796" border="0" src="https://freight.cargo.site/w/420/i/6444c2301a605f803d68c938c30b89ff99b41928680e36012421096a44624aef/Prototype_Fantasy_Island.png" />ImplementationThe following diagram illustrates the process how I worked with the web engineers to define the positions of stickers via css. <img width="10681" height="14903" width_o="10681" height_o="14903" data-src="https://freight.cargo.site/t/original/i/be60a47666fe9f533ca42040556dd8446a32762932175b2e176c78bec0253e4c/WWF_Ziggy_Settings.png" data-mid="47137980" border="0" src="https://freight.cargo.site/w/1000/i/be60a47666fe9f533ca42040556dd8446a32762932175b2e176c78bec0253e4c/WWF_Ziggy_Settings.png" /> https://vijiadesign.com/Plastic-Surgery-on-Apps Sun, 14 Apr 2019 08:00:55 +0000 Jia's Art World https://vijiadesign.com/Plastic-Surgery-on-Apps Plastic Surgery on APPsIs there any mobile application you use everyday that drives you crazy on certain features? I listed mine and made improvements based on my own experience.<img width="250" height="250" width_o="250" height_o="250" data-src="https://freight.cargo.site/t/original/i/7e5582342dbbd09bf1c6700ac71f189ee7c03d2168daa8d43bf2df1d990ec6ec/mindbody-app-icon.png" data-mid="40855410" border="0" data-scale="20" src="https://freight.cargo.site/w/250/i/7e5582342dbbd09bf1c6700ac71f189ee7c03d2168daa8d43bf2df1d990ec6ec/mindbody-app-icon.png" /> Background:Mindbody business management software serves gyms, spas and salons worldwide, and helps people find and book with them. For business owners, Mindbody could grow their client base, manage schedules &amp; accept payment. For users, Mindbody could find and book fitness classes near them with thousands of deals and studios to choose from.IssuesI use Mindbody a lot to explore new workouts. and have signed memberships with three different fitness centers via Mindbody. However, it is really hard to navigate through different memberships within the app because all activities are mingled together. For example, I had to manually count how many classes I have taken and how many classes left with each membership each month.&nbsp;EnhancementI want to add more details of per-membership information in Mindbody's calendar, such as the duration of the membership pass, the number of classes I have taken, and the number of classes available for booking. Process 1, Sketch storyboard <img width="3034" height="2041" width_o="3034" height_o="2041" data-src="https://freight.cargo.site/t/original/i/b52af9813e434c2fbfde409864de70e95cf5a65c368aa2c4dde5d8bfa86ea890/Image-from-iOS-4.jpg" data-mid="52541240" border="0" src="https://freight.cargo.site/w/1000/i/b52af9813e434c2fbfde409864de70e95cf5a65c368aa2c4dde5d8bfa86ea890/Image-from-iOS-4.jpg" /> 2, Sketch the flow of setting a pass on calender <img width="3044" height="2185" width_o="3044" height_o="2185" data-src="https://freight.cargo.site/t/original/i/c26104e6e315ea5b9e562a719e617a1a5b86b9042bcfb0be272117e0eec33b72/Image-from-iOS-4.jpg" data-mid="41981866" border="0" src="https://freight.cargo.site/w/1000/i/c26104e6e315ea5b9e562a719e617a1a5b86b9042bcfb0be272117e0eec33b72/Image-from-iOS-4.jpg" /> 3, Analyze the existing application There is a calendar on the home page of each fitness center for users to click on the date and book the classes. Calendar has only a weekly view. You can tap the calendar and swipe left/right to find the class you want to book. There is no other information displayed in the calendar.&nbsp; If I want to know if my membership is still valid before I book a class, I must go to the Pass screen from the user profile page to check the expiration date of the membership of the fitness center. If I forget how many classes I have already taken, I have to go to the history page to count on my own and then return to the homepage of the fitness center to book classes. <img width="3858" height="1246" width_o="3858" height_o="1246" data-src="https://freight.cargo.site/t/original/i/f15d2879d8f8c94c190b42dc12c221cb11c9a078cdc0d9257643af40293c0276/existing-app-analyze.jpg" data-mid="52441159" border="0" src="https://freight.cargo.site/w/1000/i/f15d2879d8f8c94c190b42dc12c221cb11c9a078cdc0d9257643af40293c0276/existing-app-analyze.jpg" />4, Define features The feature I need is to help users view membership information while scheduling a class without having to jump to another page. The information includes the duration of the membership pass, the number of classes I have checked in, and the number of classes available for booking. I think the best solution is to display the above information directly in the calendar. Expandable calendar: tap on calendar and swipe down to expand the calendar. Display the details of the pass on the calendar: duration of pass, checked-in classes and available classes for booking. Fast access to the history page by tapping checked-in dates in the calendar. Tap the calendar and swipe up from the month view of the calendar to the weekly view. 5, UI design The essential issues to consider about UI design, going to improve the convenient and functional visual presentation of the information in the Calendar screen, were color palette and icons. As you can see, I chose reddish as the color of background for the duration of pass, which not only echoes the theme color, but also creates contrast with the bright orange active icons and black dates. Instead, the main operating area of the app uses white background which looks natural for the calendar and serves several important goals: it supports high level of readability and quick perception of digitalr-based content.it provides the great area of creating prominent contrast for key interaction elements, such as icons and clickable dates;it adds the space and white space to the screen, helping to avoid the feeling of the screen overloaded with information. <img width="2299" height="1448" width_o="2299" height_o="1448" data-src="https://freight.cargo.site/t/original/i/57f00a6b1362e67fdf1d72947a6e43d3eaa417d072596447174994758522cb82/after.jpg" data-mid="52539229" border="0" src="https://freight.cargo.site/w/1000/i/57f00a6b1362e67fdf1d72947a6e43d3eaa417d072596447174994758522cb82/after.jpg" />6, UX design The most critical part of implementing such a calendar with interactive information is the detailed setup process where we need to consider various factors. For example, for the duration of membership, some are calculated on a daily basis, some are calculated on a monthly basis, and some are calculated on an annual basis. Besides, the starting dates of memberships are different. All these factors need to be taken into account. I ended up referencing the setting of “Recurrence” on Outlook meeting schedule. <img width="3858" height="1246" width_o="3858" height_o="1246" data-src="https://freight.cargo.site/t/original/i/44284606879b00ef08adaf7ed9480d821fa8f4fd5a26d614c224e8b6e38b04a8/Reference_outlook.jpg" data-mid="52449602" border="0" src="https://freight.cargo.site/w/1000/i/44284606879b00ef08adaf7ed9480d821fa8f4fd5a26d614c224e8b6e38b04a8/Reference_outlook.jpg" />The flow below is an example of how to set up a membership pass that is calculated on a daily basis. <img width="2618" height="1803" width_o="2618" height_o="1803" data-src="https://freight.cargo.site/t/original/i/00dfa28562fa309246331d219844f3d9e8da4f21e7da34dcbd364dbd4ed688fd/Setting-Pass-Flow.jpg" data-mid="52451831" border="0" src="https://freight.cargo.site/w/1000/i/00dfa28562fa309246331d219844f3d9e8da4f21e7da34dcbd364dbd4ed688fd/Setting-Pass-Flow.jpg" />7, User Journey The flow of setting up a membership pass The flow of booking a class&nbsp; <img width="5196" height="4697" width_o="5196" height_o="4697" data-src="https://freight.cargo.site/t/original/i/e0dbb53e65f62a1443c81f8aa80a15497a9a76e70cb728a92d2fbc29a26e256d/Work-Flow.jpg" data-mid="52451830" border="0" src="https://freight.cargo.site/w/1000/i/e0dbb53e65f62a1443c81f8aa80a15497a9a76e70cb728a92d2fbc29a26e256d/Work-Flow.jpg" />PrototypeThis prototype shows the first experience of setting up a membership pass in a calendar.&nbsp; https://vijiadesign.com/App-Firewall Tue, 09 Jul 2019 22:31:55 +0000 Jia's Art World https://vijiadesign.com/App-Firewall APP Firewall As a UI/UX designer at Trustlook, I was in charge of all UI/UX design of mobile and web. I designed a few mobile applications that are based on mobile data analytics. One example is the App Firewall, a mobile app designed to remind users not to indulge in certain mobile apps by analyzing the behavior users have on mobile apps. The challenge is&nbsp;data visualization. which is to visualize application usage in category and application level. I create "Addiction Temperature" to express levels of usage, which means once usage of an application exceeds a certain level, It expresses addiction with the degree of fever. About App Firewall • Monitor and classified 1 million+ mobile application. • Control game, social, adult and other applications by creation and enforcement of safe application category policy• Application monitor report in the category, usage time and frequency. <img width="1500" height="1451" width_o="1500" height_o="1451" data-src="https://freight.cargo.site/t/original/i/0cd106147c3a14b4110c1c84df2d218873d699ec4e9509f62a1e7747ab0317c5/show1_o_1500.png" data-mid="46298649" border="0" src="https://freight.cargo.site/w/1000/i/0cd106147c3a14b4110c1c84df2d218873d699ec4e9509f62a1e7747ab0317c5/show1_o_1500.png" /><img width="1500" height="1050" width_o="1500" height_o="1050" data-src="https://freight.cargo.site/t/original/i/7c2226e570cc8ef2754018d064588ffcdf55236f3e21a0db0d470bf1659cd461/show2_o_1500.png" data-mid="46298388" border="0" src="https://freight.cargo.site/w/1000/i/7c2226e570cc8ef2754018d064588ffcdf55236f3e21a0db0d470bf1659cd461/show2_o_1500.png" /> <img width="1500" height="1059" width_o="1500" height_o="1059" data-src="https://freight.cargo.site/t/original/i/9ab13eb14209f5f60afc95cce8828aecbd9f26eea049dee0244a5b0578c41437/show3_o_1500.png" data-mid="46298889" border="0" src="https://freight.cargo.site/w/1000/i/9ab13eb14209f5f60afc95cce8828aecbd9f26eea049dee0244a5b0578c41437/show3_o_1500.png" /> <img width="1000" height="497" width_o="1000" height_o="497" data-src="https://freight.cargo.site/t/original/i/0d70ce210c1104c68ec1133103cd64c879253bdbbe137b3f4b8936d4954addff/googleplay_appfirewall_o_1000.jpg" data-mid="46298890" border="0" src="https://freight.cargo.site/w/1000/i/0d70ce210c1104c68ec1133103cd64c879253bdbbe137b3f4b8936d4954addff/googleplay_appfirewall_o_1000.jpg" /> https://vijiadesign.com/Find-My-Phone-1 Tue, 09 Jul 2019 23:05:38 +0000 Jia's Art World https://vijiadesign.com/Find-My-Phone-1 Find My PhoneAs a UI designer at Trustlook, I was in charge of all user interface design of mobile and web. Find My Phone is one of the projects.Find My Phone is one of the important security applications that Locate &amp; Track your misplaced phone, lost phone or stolen phone. <img width="1500" height="2159" width_o="1500" height_o="2159" data-src="https://freight.cargo.site/t/original/i/4a658e79f67eb1a4931c02322cfbd7fc1bd5a454d3f31fa8a8616abce984de66/show2_1500.png" data-mid="46310953" border="0" src="https://freight.cargo.site/w/1000/i/4a658e79f67eb1a4931c02322cfbd7fc1bd5a454d3f31fa8a8616abce984de66/show2_1500.png" /> <img width="1000" height="700" width_o="1000" height_o="700" data-src="https://freight.cargo.site/t/original/i/01fa536ba300c9c533d9ec68db87b108db81716d539f9f951b43b8bbfcaf426e/show1.png" data-mid="46310952" border="0" src="https://freight.cargo.site/w/1000/i/01fa536ba300c9c533d9ec68db87b108db81716d539f9f951b43b8bbfcaf426e/show1.png" /> <img width="670" height="503" width_o="670" height_o="503" data-src="https://freight.cargo.site/t/original/i/c67d92c3dff379b97dfdc4240dec2878eb3b371d9c8152ffe51975f1433024bd/show3.png" data-mid="46310954" border="0" src="https://freight.cargo.site/w/670/i/c67d92c3dff379b97dfdc4240dec2878eb3b371d9c8152ffe51975f1433024bd/show3.png" /> <img width="1000" height="501" width_o="1000" height_o="501" data-src="https://freight.cargo.site/t/original/i/802c34c8e99555ce5c20b806ddcc91195b8f5740d3f4658edb2db90423e64313/googleplay_findmyphone_o-1.jpg" data-mid="46371399" border="0" src="https://freight.cargo.site/w/1000/i/802c34c8e99555ce5c20b806ddcc91195b8f5740d3f4658edb2db90423e64313/googleplay_findmyphone_o-1.jpg" />