This is my first Medium post about a personal experience. While editing it, I almost wanted to throw it out and design a Ly’s journey mapping instead. However, designer Ly would say ‘done is better than perfect’; so you will get to read my average writing because it’s for me anyway.

The circumstances of my trip back home

As a citizen, there have been only two ways to fly to Vietnam during the pandemic. Either you get onto an approved charter flight that costs about CAD $5600 one-way, or you need a reason to get onto the list for a government-arranged citizen repatriation flight (that happens once/month). No regular commercial flights are allowed to enter Vietnam right now until we get this COVID thing under control.

I woke up one day to the news that my grandma had passed away. I found that out a day late as I had been off social media. I wasn’t able to attend her funeral. There was nothing else I can do, but it left me really wanting to spend more quality time with my family, especially my dad. He’s been fighting liver-bile duct cancer for 5 years through various medical treatments. His cancer has moved to a more advanced stage this year. COVID sucks. What’s worse is how it impacts vulnerable individuals like my dad. He wasn’t able to visit the hospital to seek treatment as easily. No one dares to say when we will put this pandemic behind in Vietnam, so I immediately signed up for a chance to go home with my family circumstances.

A few days later, I got the news that I made the list for the next citizen repatriation flight. Now I entered my decision-making process which is well-known to be full of indecisiveness (even though it wasn’t an easy one). It cost $2460 one-way and I already paid for it (they gave me a 24-hour deadline to commit to it). Luckily, my boss said yes to my remote work request right away. However, I haven’t been vaccinated at all and the quarantine time would be 1.5 months in total from both ends (including 21 days of communal quarantine at the military camp). As an overthinker as I am, I made a whole excel sheet for a cost-benefit analysis to help with the decision (including weighted probabilities). In the end, it was my last-minute intuition that pushed me to go just 2 hours before the boarding time (whattt). I rushed to close my suitcases and jumped into a car with my partner to get to the airport. Here goes a new chapter.

It was 3 months of adventures with a split of 1.5 months in quarantine and 1.5 months of ‘pandemic-appropriate freedom’. I was in for a ride, starting from the moment I realized that I was sharing a full plane with 300 other individuals during a pandemic…

Quarantine life

The 21-day quarantine at the military camp

“It will be fun” — said no one.

• The first day was rough. I was jetlagged and couldn’t really get in touch with my family. The facility was so barebone and different from the comfort of home. I was really contemplating my life choices...

• I shared a room with 4 others. However, the next room was just separated from our room by a hard tarp. So I essentially had communal living with 9 roommates. What’s personal space?
• We had a communal shower/toilet space with the whole floor of about 50 females. For the record, I cleaned the communal toilets 3 times just to make sure that someone cleaned them.

• We were fed 3 times/day by the military soldiers. The food wasn’t mom-cooked quality but pretty decent. Things repeated often, like boiled course morning glory (a typical vegetable in Vietnam) a few times/week. Still, all good.

• The military soldiers supplied food and other necessities, cleaned, and managed quarantine facility work like security. They also helped us buy personal items from the outside, but we didn’t succeed at begging them to get us yummy cooked snacks. I became besties with guys that wore blue PPE overalls in the 37-degree humid heat, they rock!
• We were not allowed to leave our room except for using the washroom/shower, picking up food, and going to the small yard for a bit of exercise. Also no mingling with other rooms. There were barbwires around the facilities. Did I sign up to cast a new season of Orange Is the New Black?

• I was lucky to be able to work remotely full-time during my quarantine period and during this trip. It made the time fly by much quicker — I don’t know what others did to pass 21 days. Except for some meetings (at 11 pm almost every day), I was working 9–5 in the Hanoi timezone. My daily 11 pm meeting spot was the outdoor hallway (as everyone had gone to bed at 9 pm), where all the bugs and I hung out because there were piles of trash and lights. I told you I made friends. But not with the senior neighbours because they woke me up at 5 am every day. How did I manage all of those daily 10-person Zoom calls and working full-time for 21 days? 100GB of data baby (there was no stable wifi to use)!

• My family sent a care package twice with way more stuff than I asked for. Just like camping essentials, military quarantine essentials filled the bottom of my Maslow’s Hierarchy of Needs. A pair of scissors and extra toilet paper meant so much. Of course, I wouldn’t hoard all the supplies for myself; so I started a side hustle to earn extra cash from the roommates. Jk, it was more like being at Burning Man where I shared the goodies with my comrades.
• I have been avoiding Vietnamese summer for 10 years for obvious reasons. Remember that heatwave that everyone was complaining about in Vancouver? Yup, that for 21 days. Every afternoon, we would be surviving through the non-AC-37-degree humid heat by getting as much contact to the floor and wearing as minimal as possible (what a privileged Viet bunch to complain about this — many Vietnamese don’t even have AC). Ice was the second hottest commodity I’d say, besides toilet paper.
• I made some good friends who were my roommates. We played Sushi Go, watched Viet dramas, did pushups, and had countless rants about our sufferings together.

• Aside from filling my time with work and rants, I embraced the introvert in me and finished 4.5 books (Sprint, Sapiens comic version, an audible version of How To Win Friends and Influence Others, Journey to the East, and started reading the Obstacle Is The Way). Yay quarantine!
• I had calls with friends around the world to show them my new life. A special call was with my friend Nitin, who was stuck in India with difficult circumstances. We shared our experiences and gave each other support. I started reading “Obstacle Is The Way” by Ryan Holiday because of Nitin. It made me stop ranting and start cleaning our communal toilets instead.
• I got to vote for a national election while in quarantine, something that I haven’t done since 18 because I have been living in Canada. Wowza!

• We had to take a COVID test (PCR) on day 1, 14, and 20. It was like Hunger Games’ selection of tributes, as you either go straight into the hospital (if you’re tested positive) or restart your quarantine (if you’re in close contact with a COVID-positive person in the camp). Luckily, all of my 9 COVID tests for this trip came back negative.

With a fragile healthcare system, a 90-million population with a limited personal safety net, and a united mindset in tough times, I understood what we did to keep COVID out the door. Individual sacrifices for the greater collective. Not sure how I feel about communal quarantine — it was a strategy that worked for a while but recently has backfired.

Going home

Finally, the 21-day quarantine was over! Everyone was super excited to go home…for another week of at-home quarantine. We all dressed up (to go home) like it was Milan Fashion Week.

Transitioning from a communal shower to a private one was like being upgraded to first class. I Instagrammed my food more than ever. I even managed to teach my niece Sushi Go and Harry Potter Codenames through our sealed glass window.

The actual fun times

After the 7-day at-home quarantine, my mom took me to the hospital for a final COVID test. I was so used to quarantine at that point that having freedom was a strange concept.

Family

After hugging my family, I went plant shopping with my sister. I got reminded about the crazy consumption rate we have in a developing country. My sister bought 40+ plants at once because the plants at her house all died in the heat and ‘it’s good for the economy.’

It was the longest that I have spent with my family in a long time. Except for seeing my friend Mini, I didn’t see anyone else aside from family. I got to visit my grandparents’ graves and some relatives.

It took me some time to get used to a bigger family living setting. I got a cultural shock in my own country. Eventually, I learnt to manage it better and appreciated the upside of it. I miss the dinner conversations when we talked about family memories, the daily morning juice from mom (and her unconditional love), and family time on the trips. I also got to learn a lot from my ‘aunty’ sister through spending time with her.

My niece got a toy poodle puppy for her 11th birthday and we named him Simba. He was a freaking handsome cutie pie. I felt like I have always been prepared mentally to become a dog mom, so I acted like one naturally.

Dad

When I was reflecting on this trip, the difficulties I went through was all worth it because of the precious time I got with my family, and especially my dad. It’s been a while that I spent this much-needed time with him. *Sappy things alert*. He is a very important figure in my life and I can’t thank him enough for everything he has given me and the family. Hardworking, modesty, integrity, talking less and listening more are all the things that I have learnt from him. As I’m writing this blog post, he’s in another fight for his health in the hospital. COVID really made it difficult for my family to bring him there. Guess what, I already looked into the next citizen retrieval flight and am somewhat prepared to do this all over again.

The travels

Vietnam is beautiful. I have had the opportunity to travel to 21 countries but I probably explored Vietnam the most. It is still the most beautiful and interesting place that I’m proud to call home. Oceans, mountains, adventures, culture, arts & crafts, food, hospitable and warm-hearted people. It has all the good things for everyone. Hospitality services in Vietnam and South East Asia, in general, are incredible (for the price you pay).

There were many things that I couldn’t do and many friends that I couldn’t see because of COVID restrictions. So rock climbing and deep water soloing will have to wait until the next trip, but hey they’re not going anywhere. With my sister’s quick thinking and acting, it was amazing what we could do that was within the restrictions. We managed to visit Ha Long Bay twice, Yen Tu, and Trang An in the North. We had to take a fast COVID test to enter some provinces, and played it very safe by spending time outdoors and not meeting outsiders. Of my time here, I spent the most time in Ha Long Bay as our family has a small place there. Did you know that it’s a UNESCO World Heritage? Cause I forgot and holy moly I was just jaw-dropped by its beauty.

Arts, crafts, fashion, music

Since I couldn’t be a climbing crag dirtbag, I cleaned up to be a ‘bánh bèo’ instead (the term for girly girls). I got more into fashion here just to fit in with the locals.

My sister started a decor shop with all the eye-candy stuff that I couldn’t resist. We also live next to a well-known pottery village that’s apparently a factory for many brands internationally (EQ3 for example). The designer in me was in love with Vietnamese/Asian aesthetics and patterns. We’re a big country of textile and crafts production after all.

I actually enjoy our evolving music scene a lot. Vietnamese raps and hip hop have been in trend. If it weren’t for the pandemic, there would be so many amazing music concerts to attend. My niece has been very into rap music. If it weren’t for her new puppy, it would have been some Viet rappers that made the appearance on her birthday cake this year.

The food

I ATE EVERYTHING THAT WAS IN FRONT OF ME. My belly fat grew as I gradually crossed through the long list of food that I craved, especially mountains of seafood while in Ha Long Bay. Yet I have no regrets for being out of shape and blame the heat for my lack of exercise. Everything tastes even better because of the amazing services you can get at the restaurants. If I could just pick 1 type of cuisine for the rest of my life, it will defo be Vietnamese.

The economy

Vietnam changed so much every time I went back. Writing these notes makes me feel like a tourist in my own country, but I have been spending very little time there in the past 10 years.

“Vietnam’s development over the past 30 years has been remarkable. Economic and political reforms under Đổi Mới, launched in 1986, have spurred rapid economic growth, transforming what was then one of the world’s poorest nations into a lower middle-income country. Between 2002 and 2018, GDP per capita increased by 2.7 times, reaching over US$2,700 in 2019, and more than 45 million people were lifted out of poverty. Poverty rates declined sharply from over 70 percent to below 6 percent (US$3.2/day PPP). The vast majority of Vietnam’s remaining poor — 86 percent –are ethnic minorities.” — World Bank

While some public systems are still under-developed, such as healthcare, education, safety, and welfare etc., a few others such as transportation and IT infrastructure have improved significantly. The private sector still provides higher quality services/products/infrastructure in some big areas (e.g. medical, education, housing). This coupled with our flying development speed has given the people a strong drive to work hard and earn money for better access. The wealth gap is closing with the rise of the middle class. Vietnam is the leading startup hub in South East Asia — many can take a chance to hustle, be their own boss and rise up in social mobility. The entrepreneurial spirit here is inspirational to me. It is also a very competitive market as innovations are born at a rapid rate. However, Vietnam’s rapid growth and industrialization have had detrimental impacts on the environment and natural assets. We are starting to pay the price as much of Vietnam’s population and economy are highly vulnerable to climate impacts. There are pockets of sustainable development, yet, we might be doing too little too late.

Travelling back to Canada

It was finally time to get back to Canada. I was excited to get vaccinated, get back to climbing and the ‘normal life’ here.

This is what travelling to Canada looks like when you’re not fully vaccinated: A COVID test within 72 hours of departure, a 3-day hotel for quarantine (this is gone soon), 14 days of at-home quarantine, and two more COVID tests after landing. In contrast with the 21-day quarantine camp experience, I sipped wine and had decent French cuisine at my balcony for the at-home quarantine.

I got vaccinated the morning I got out of quarantine. Now that I’m all out and about with the normal living in Vancouver, sometimes it feels like this trip never happened. So this blog post is for me to read when memories all get blurry.

Final thoughts

Regrets? None. Brutal? A little. A waste of time? Nope. Growth and appreciation? Yeah. A full heart? VERY. Let just say that Vietnam has taught me to be more resilient and nothing was more worthy than seeing family. My sacrifices were nothing compared to what the country and my family have gone through. I am very lucky and privileged.

If this post somehow makes you feel intrigued…

As of today, several cities in Vietnam are in lockdown and we’re at a 1% full vaccination rate. Friends in Canada often say ‘COVID is over here!’ Well, it’s not the case in Vietnam and many other developing countries. We’re in a big fight right now.

If you live in Canada, I hope you know how lucky we are :)

If you’d like to support vaccination access to low-income countries, please donate to the UNICEF vaccine fund (it will be matched by the Government of Canada)!

Donate COVID-19 Vaccines Now | UNICEF Canada

A UX Design Case Study

// Project Overview

Artemon allows users to have a compelling experience of art that may be otherwise inaccessible due to distance, mobility issues, time, or other accessibility issues.

Timeline: 2.5 weeks
Role: UX Designer
UX Process: Research > Plan > Design > Build > Test > Iterate
UX Tools: Pen & paper, GoPro VR Player, Sketch, Illustrator, Invision

— Understanding the Problem —

There are certain constraints with the current physical gallery exhibition experience. Even if you’re an avid gallery-goer, it’s easy to miss so many exhibitions out there due to the lack of display space and showtime constraints. If you have accessibility needs such as vision impairment support or wanting to look at artwork at an eye-level while sitting in a wheelchair, they are not accommodated right now at most art galleries.

That’s how Artemon was born, a product of Banging Rocks and the Federation of Canadian Artists (FCA). The mission of the FCA is to advance the knowledge and appreciation of art and culture to all Canadians, offering education, exhibition and communication in the Visual Arts, and to support and promote emerging art to professional artists.

— VR Space and The HTC Vive —

VR has been around for not too long but it’s been leaving marks with many useful applications. This is a paradigm of immersive 3D content with sound, touch, depth, and emotion, making even the most novel 2D screen experiences boring and dated.

Before this project, our team members have only designed for 2D web and mobile screens. If we were to have experience in game design or architecture, we would have had a great head start in this project. We were excited to embrace the challenge and take it as a learning opportunity regardless.

We worked with the HTC Vive, one of the leading VR headsets in the market. The HTC Vive comes with a headset and two hand controllers.

— Goals —

Business goal: Acquisition of users to bring art to the public in an affordable and accessible manner.

User goal: Explore and interact with art around the world more intimately to obtain understanding and a sense of belonging in the art community.

Project goal: Design the art exploration process via interactive navigation of exhibits. Invoke a sense of curiosity and excitement through interactions with the artwork, the environment, and the system.

— The UX Design Team —

I’m lucky to be working with three awesome female UX Designers for this project!

// Research

We conducted our research to gain an understanding of the VR landscape and the art space, as well as the current opportunities and limitations they present.

— Understanding How People Interact in VR —

Before we start planning and designing, we must understand our users and the issues that may come up while they experience VR.

Physiological Comfort

Motion sickness is caused by the disparity between what one feels and what one expects to feel. We need to consider the following matters in our design decisions to help users avoid motion sickness in VR:

• Head tracking
• Use control of movement
• Use constant velocity
• Grounding with fixed objects
• Brightness changes

Environmental Comfort

Scale is an important factor in VR, just like in the physical world. When the space is too small, large, or high, people can easily get uncomfortable (claustrophobia/agoraphobia/vertigo). We need to make the environment realistic and welcoming.

Ergonomics

There’s a certain comfortable range of motion zones when users wear the VR headset. We don’t want to create neck strain and unhealthy habits for the users while in VR space.

— — Contextual Inquiries — —

The best way to learn about VR design…is in VR!

I’m lucky that my partner is a Game Developer/Teacher with a couple of years of VR project experience. We have an HTC Vive set up at our home. Our whole team came over one day to try out various VR applications. This was the first time for some of our team members to experience VR, especially with the HTC Vive and its controllers.

We also went over to our client’s office to learn more about some other VR applications that are relevant to our project.

It took all of us just a couple of seconds to be immersive in the VR experience and forget about physical reality! We had some fun playing in the VR space to learn about spatial design, controller functions, teleportation, and different ways to bring a sense of discovery in various VR applications.

— — Competitive / Comparative Research — —

We looked at what’s available on Steam VR (the iTunes of games and VR applications for HTC Vive device).

There are already many VR applications and many of them are games. However, there are not many art galleries or museum types that are available publicly. Some of the applications are also paid which we didn’t have access to.

From our Google research, it seems that there are several VR applications but they are private within the art galleries. Some examples are Synthesis Gallery and VR-All-Art.

— — Surveys — General Audience — —

We sent out a survey targeting the general audience to learn more about the public’s expectations and experience with VR and art galleries. We got 27 responses. Here are the main insights that helped guide our designs:

— — Interviews — Specific Artists, Architect, Gallery Goers — —

We also interviewed a few artists. These are people with more art knowledge than the general public. They have deeper ways of appreciating and connecting with art pieces.

Finally, we interviewed an architect to get a better understanding of spatial design. We asked questions related to creating a safe and inviting environment, yet making it realistic, and to help people avoid claustrophobia.

// Planning

Even though we’re designing for VR, the standard design principles and processes still stand. We still need user personas, conceptual flows, wireframes, and an interaction model.

— — Affinity Diagram — —

We analyzed our survey/interview data and grouped them to find patterns. We found valuable insights on:

• Desirable gallery environment
• Explore/discovery features — how people usually search for artwork
• Interactive features — interactions our audience would like to have in a VR art gallery
• Their motivations
• Their frustrations

— — User Personas — —

We must understand the users that we’re designing for. We first looked into three user categories: General Gallery Goers, Artists, and Art Educators. For the 3-week time constraint and MVP delivery, we decided to focus mainly on the General Gallery Goers with some features that would appeal to Artists.

Penelope here represents the season gallery-goers. She is a knowledgeable appreciator of the art. Her goals are to achieve a whole new level of art understanding and to check out the specific art pieces she has in mind. What’s more important is her pain points: it’s difficult for Penelope to visit her favourite exhibits due to time and distance limitations.

Now meet Sean, an art student at university. His goals are to expose himself to all sorts of art styles and to learn more about other artists’ artworks to improve his own. For Sean, what frustrates him the most about art galleries is that he doesn’t know how to better appreciate the exhibits with such little information provided. He also hates that he cannot stand up close to better see the art pieces. He needs to scrutinize and inspect the art to see the details such as the brush strokes, so he can learn more about it.

— — User Scenario — —

To help us empathize further with our two personas and their needs, we created the user scenarios for Penelope and Sean:

Penelope:

Penelope visits her local art gallery on the last day of the Van Gogh exhibit, eager to see The Starry Night on display. After getting terribly lost in the gallery, she finally arrives at the correct place and discovers many visitors being disruptive and taking selfies in front of the paintings. As she gazes at the Starry Night, she wishes could learn more to understand it properly. Penelope knows that she’ll have to go home later and use Wikipedia to get some more background knowledge. Penelope learns best by engaging multiple senses.

Sean:

Searching for inspiration from accomplished oil painters, Sean hears that the local art gallery has a great collection of oil paintings. He pays $20 to enter the museum and wastes half an hour trying to find the exhibit. When he finally gets there, the paintings can only be viewed from behind a white line and they’re sadly all pieces he’s heard of before. Sean is unable to scrutinize the actual technique on the canvases and wishes he could have been inspired by some new artwork.

— — Customer Journey Mapping — —

We want our users to start the journey with a sense of wonder since the moment they put on the VR headset. As they navigate through the space and possible interactions, their mood should go up with straightforward recommendations. They should feel curious through the exploration process with clear signage and guidance. The art interaction needs to be joyful and immersive. They will leave the space feeling connected to certain art pieces and want to tell their friends about it.

— — User Flow — —

Here’s a simplified version of the user flow with the main spaces and interactions. This flow is aiming to help our two personas, Penelope and Sean, achieving their goals of gaining connection and understanding of the art pieces through interactions within the VR art gallery.

Users would enter the lobby to discover art pieces through browsing/searching, view an exhibition, and interact with an art piece. Similar to the navigation bar of an app/website, the Menu Interactions and Art Interactions are accessible from the controllers at all times.

This is the complete user flow of how Penelope and Sean would navigate through the VR art gallery.

When a user is in front of a painting, they can interact with the art piece through the controllers. The left controller allows the user to access various features such as reading about/hearing background info, commenting on the art piece, or recreating the piece with paint tools. The right controller supports hand motion functions such as picking up the art piece and adjusting the lighting.

— — Feature Prioritization — —

The first set of the feature list is for the space. All the Must-Have features are necessary for the space to be functional:

• Lobby Room, Gallery Rooms, Art Pieces with Description — to replicate a realistic art gallery environment.
• Navigation Path, Teleportation — to help users navigate through the space between different environments.
• Direct Search, Browsing Categories — to aid with art exploration and discovery phase which is very essential from our research.

From the Nice-to-Have list, we included the following:

• Room Map — to help users orient themselves in the space.
• Colour Blind Mode and Audio Mode — to provide accessibility support for the ones in need.
• My Account and My Saved Items — to personalize the user experience with their journey and favourite art pieces.

The second set of feature lists is about the art interactions our users can do within the space. To help the users have a more engaging experience with the art pieces, we have Background Info with Audio for more info about the art pieces and Pick up the Art Piece to help users have a closer look at the art pieces from various angles.

We went with the following features from our Nice to Have list:

• Art Creation Time-lapse — to learn more about how a painting was created, Penelope can play this time-lapse video.
• Art Recreation — we got the inspiration from Google Tilt Brush. This feature will help artists like Sean to learn more art techniques and the creation process by doing it.
• Social Comments — to help our personas Penelope and Sean get more connected to the art community.
• Lighting Adjustments — to help Penelope and Sean better see specific details of an art piece.

At this point, we’re not able to cater to the curation of one’s own space which would be helpful for artists and curators.

// Design & Iterations

Similar to designing 2D interfaces, we use size, contrast, and depth to denote hierarchy. In VR, size is based on the distance between the user and a piece of content. Therefore it’s important to understand the scale of content and appropriate viewing distance.

We also have to consider how people interact with the interface in a VR environment. Instead of a mouse on a computer, or fingers on mobile devices, users have the hand controllers with various buttons. We utilize known patterns that people have learnt to use, such as tapping, swiping, and clicking.

— — VR Paper Prototyping — —

Similar to designing in 2D, paper prototyping is the fastest and cheapest tool to test our ideas.

We started with designing the environment: the lobby and the art gallery. We followed the equirectangular drawing to be able to show that in a 360-degree view in the GoPro VR Player.

— — HTC Vive Controllers — —

As the interactions in VR (with the HTC Vive particularly) are very different, we have to first assign different functions to different buttons on the Vive controllers.

Teleportation is a native function in most VR applications for the HTC Vive. We have it as a press on the big top round button on the Right Controller.

The second most important access is for menu interactions, so we assigned the Menu access to the small top round button on both controllers.

The back triggers on both controllers are used for any object pick up.

— — Mid-Fi Design — —

As we’re designing for VR, there are different tools for a 3D environment that we could use for this process. We faced the challenge of learning a new tool like Maya or Unity in such a short time. Sketchbox was the most feasible tool, however, we got limited access to a VR headset as a team. Therefore we decided to revert to what we’re familiar with — Sketch and GoPro VR Player.

After designing all the screens with 3D equirectangular backgrounds and flat 2D interaction interfaces, we warped the interfaces of a few main screens to fit with the equirectangular drawing, in preparation for 3D screens.

Then we warped the flat 2D interfaces into 3D

— Testing & Iterations —

Testing was a big challenge for us, as we have never tested in a 3D environment or VR before. Due to the time constraint for the project, we could only test in a 2D environment.

// Final HiFi Prototype

Here are our 2D prototypes with the 3D environment.

Click here to view the project `Artemon Midfi`

// Future Considerations

Due to the 3 weeks constraints and our limited knowledge in VR design, there are many things that we wanted to put in future considerations.

• Creating a 3D prototype using Sketchbox: This will make our prototype a lot closer to the real product. I’d like to pick this tool up in the near future and continue to work on our prototype.
• 3D art interactions: Because of our 2D knowledge, there are many other opportunities to have more 3D interactions that we didn’t explore.
• Include on-boarding experience: We had a vision for on-boarding to help users orient themselves to the space and with the tools they have. This is such a crucial part of the experience that we couldn’t include in this phase of the design.

// Conclusion

Our client was very happy with our achievement for this project. The Mid-Fi prototype has provided him and his team with many ideas to take this project to the next level.

This project provided the biggest learning curve for our team. The more we learnt about VR and designing for the 3D environment, the more we realized that there were so many things we needed to learn. We utilized our existing knowledge in 2D design and picked up a lot of new knowledge for 3D design.

I’m thankful for having the opportunity to work on this project. It has sparked my interest to further my learning in 3D design and find other design opportunities in this area.

Thanks for stopping by!

Artemon — Designing an Accessible and Interactive Virtual Art Gallery was originally published in itslyvu on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Case Study — Website Design

Project Overview

The Opportunity

According to MeetGreen, during a typical five-day conference, 2,500 attendees will use 62,500 plates, 87,500 napkins, 75,000 cups or glasses and 90,000 cans or bottles. Add to this materials used for conference packages and promotion, GHG accumulated from conference travel and food waste left over from catering, it becomes clear that traditional events, big or small, are extremely wasteful. There’re certain ethical issues that come with the supply chain of the industry as well, from unfair labour practices to unethical animal welfare.

So what can we do to help reduce this problem in the event planning industry, utilizing our knowledge in a connected world powered by technology?

A platform that can educate and provide resources to people that want to make their events/vendors more eco-conscious and ethical.

The Good Green is transforming the event planning industry into catalyst for social & environmental change.

Goals

Project goal: to design a new website for The Good Green and incorporate new features that our client wasn’t able to achieve on her current CMS platform, as well as to create new UI branding.

Business goal: to influence the wedding and event planning industry to be more sustainable and ethical. This starts with education and providing resources to the general public and vendors.

User goal:

• Vendors: to educate themselves on eco-ethical practices as well as showcasing themselves as eco-ethical vendors on The Good Green’s website.
• General Public: to find eco-ethical vendors for their events and to learn about how to make their event more eco friendly and ethical.

The Team

For this project, I’m in a team of 3 UX Designers and 2 UI Designers.

Research

Domain & Organizational Research

We found that the Wedding planning industry was mainly dominated by The Knot, Wedding Wire and Zola.

We then looked into eco-friendly event planning, this is where we found MeetGreen, Less Stuff More Meaning, and Plan With Purpose.

We looked at what features these competitors had and where we could find our niche which led us into our competitive analysis.

Competitive Research

We looked at competitor websites in the wedding planning industry (The Knot, Wedding Wire, and Zola), and event planning websites with eco-ethical focuses (Less Stuff More Meaning, Plan with Purpose, and MeetGreen). We noticed that most of them didn’t have educational tools such as webinars, and vendor search system that highlights eco-ethical criteria. With that, we found the niche that The Good Green would fit into.

Surveys

We had 30 survey respondents, and found insights that validated our hypotheses. Non of these are surprising to us, and we made sure that we keep these considerations in mind with our design decisions.

Interviews

With our interviews, we found that clients are price sensitive and that they would be interested in learning more about eco-ethical practices. We also found that some vendors already have eco-ethical practices in place, which validates that there is supply for this niche market.

Planning

Affinity Diagram

We analyzed our research data and put info into groups, focusing on finding the pain points, motivations, and features. Some of the highlights are:

• Clients look for eco-ethical practices such as fair trade, ethical sourcing, humane products, working with local vendors, and operations with minimal ecological footprints. However, price factor comes first.
• Some of the frustrations from vendors are about many clients not caring about eco-ethical practices, or that they would choose eco-ethical products for their weddings, but don’t practice those in their daily lives.
• Both vendors and clients are open to learning more about eco-ethical practices.

Persona

Having a persona was crucial to help represent our target users and make sure that our design decisions are based on our user needs.

The Event Planner persona represents anyone in the general public that’s planning for their own event and would like to make it more eco-ethical. They have a big interest in living a more eco-ethical lifestyle, and already practicing it in their daily living as much as they can.

The Vendor persona represents any event vendor that’d like to incorporate eco-ethical practices into their business. They’re still a small fraction of the industry, but are taking initiative to lead the event industry into a more eco-ethical one.

Story Boarding & User Scenario

1. Sage works as a full-time manager at a local vegetarian restaurant in Vancouver called Heirloom.
2. As a manager, she treats all of her employees fairly while working with ethical suppliers.
3. She also strives to reduce her personal ecological footprint whenever she can.
4. Sage was recently proposed to by her high school sweetheart, Jim.
5. Sage and Jim have been overwhelmed trying to plan their wedding, however, it’s been hard finding vendors that align with their personal values.
6. Sage goes online to search for eco-ethical vendors and she found The Good Green website.

1. Jesse is a 33 year old successful event planner.
2. She has seen a lot of waste being produced in the event planning industry.
3. This sparked her to make a change by starting with her own business.
4. She has been looking for ways to reduce waste in her operations and work with more ethical suppliers,
5. but it has been difficult for her to find resources,
6. until she stumbled upon The Good Green site and learn more about eco-ethical event planning practices.

User Flow

Sage Lee, our event planner persona, can:

• Learn about the Good Green through the About Section
• Browse webinars and register to be more educated about eco-ethical event planning
• Search for vendors to use for their events
• Read articles related to this field in the Resources section

A vendor like Jesse that’s looking to learn more about eco-ethical practices that they can adopt for their business can:

• Learn about the Good Green through the About Section
• Browse webinars and register to be more educated about eco-ethical event planning
• Read articles related to this field in the Resources section
• Contact The Good Green to become a vendor

Feature Prioritization

Based on our research and personas, we defined our Feature list that include the following:

We decided to go with the above features, as our website would fill the gap in the market, and differentiate us from competition.

• To learn about The Good Green: Homepage, About Us
• To search for vendors that are eco-ethical: Vendor Catalog, Vendor Profile
• To learn more about eco-ethical practices: Webinars Catalog, Webinar Info, Resources
• To contact The Good Green: Contact Us

Design & Iterations

Paper Prototyping

We started our design phase with creating paper prototypes. This allows us to iterate quickly after testing, before moving into digitizing the wireframes. We utilized the ‘design studio’ method to work on some main screens together, and split the rest of the screens.

Since our users tend to be tech-savvy and on the go, we started out with designing our mobile screens, then scaling them up for desktop. Our team worked very collaboratively throughout this process through sharing ideas and feedback.

Home Page: We tested out different layouts and featured information. Since The Good Green is a new business, we first featured more information about the Good Green in order for user to quickly learn more about the business. We realized that it’s also important to give quick access for our core features to returning users on the homepage, so we added the Vendor Search. We also changed the layout of featured webinars & vendors cards to be one webinar/vendor at a time, in order to show more information for each one.

Vendor Catalog: We had a separate screen for a list of all vendor categories before they get to view all the vendors. After user testing, we merged the two screens into one in order to reduce clicking steps. Our research indicated that the clients often select vendors based on ratings, so we included vendor ratings at first. We then decided to move this feature for future consideration as right now there’s not much rating data of the vendors to work with.

Webinars: We realized that the first layout on the left wouldn’t be able to show much webinar content, so we then decided to make the webinar catalog a list with more information for each card.

Webinars Catalog (mobile): We started off with a list layout on mobile for the webinar catalog. User testing showed that there’d be too much scrolling, so we transitioned into a pagination card so users can go through each webinar by swiping instead.

Mid-Fi Prototypes

Webinars Catalog: We had a challenge to come up with the right terminology for various user types. ‘Vendors’ are the obvious groups, but ‘general public’ or ‘event planner’ or ‘couples’ are not the right terms for everyone else. We changed the filter dropdown options to ‘For Vendors’ and ‘All Webinars’ to avoid this confusion. Since the dropdown is necessary for only two options, we changed it to a toggle bar instead.

Resources: We first implemented various topic category filters on this page to help users find the topic they’re interested in faster, with the consideration for future scalability. We’re reminded that our MVP version won’t have that much content yet, therefore it made sense for us to take out the filters and replace them with pagination for each topic.

Final Hi-Fi Prototypes

Here are the final Hi-fi prototypes for our MVP design!

Desktop

Click here to view the project `P4-Hi-Fi Desktop Final`

Mobile

Click here to view the project `The Good Green_HiFi_Mobile`

Future Considerations

Our MVP aims to support The Good Green which is a very new business with limited content and offerings. We’d love to include more features for a more scalable version down the line (3–5 years):

• Individual account including functions such as Save to Favourite and Favourited Vendors page.
• More robust filter options for Vendor Catalog page
• Vendor ratings that’s integrated with Google Reviews

Conclusion

Personally, this was a fun project for me to work on since I’m very passionate about helping businesses that aim to make a positive impact in the world.

It was a great challenge to work with a new business in which we together helped shape their unique selling point and design a digital solution to showcase that.

The Good Green — Making the Event Planning Industry More Eco-Ethical was originally published in itslyvu on Medium, where people are continuing the conversation by highlighting and responding to this story.

A UX Case Study — App Design

1. Project Overview

The Opportunity

Have you ever been between jobs and got stressed out looking at your bank account going down? Have you wanted to pick up some quick gigs, because you just moved to a new city and would like to explore the neighbourhoods midweek when it’s not so crowded? A lot of us have been going through this experience at some point, including myself.

How would you look for a temp gig? Google ‘temp work near me’ or go look at Craigslist postings? Walk up to a restaurant to ask if they need an extra server this evening? Go to a temp agency to be told of weeks-long wait time? I bet it’s been hard for you to navigate through temp job opportunities in your area.

As millennials are looking for a more flexible lifestyle to pursue their passions/interests rather than working the typical 9–5, the gig economy is growing bigger and bigger. People are seeking efficient ways to earn extra cash in their free time without having to go through the hassle of a temp agency or having to deal with unverified employers on Craigslist.

The opportunity here lies in a digital platform that helps connect temp job seekers and businesses in a way that’s quick, convenient, and secured. WorkBriefly is born!

Goal

Project goal: Creating an MVP prototype for the WorkBriefly app that is fully functional with the most important features and scalable in the future.

Business goal: WorkBriefly can generate revenue from businesses that use the platform by driving user acquisition and retention.

User goal: Job seekers can gain more diverse opportunities that fit their schedules. Businesses will never be understaffed.

The Team

Timeline: 3 weeks
Role: UX Lead
UX Process: Research > Plan > Design > Build > Test > Iterate
UX Tools: Pen & Paper, Sketch, Invision

2. Research

Domain & Organizational Research

We started by looking at the temp work industries in North America as a whole.

According to Statistics Canada, Canada’s staffing and recruiting industry group represents about two million temporary workers or 13.6% of the country’s workforce. This represents a huge opportunity not only in terms of revenue, but to disrupt an industry currently dominated by staffing and temp agencies.

Deloitte’s latest millennial study (2019) found that 64 percent of full-time workers want to do “side hustles” to make extra money. There has been a shift towards a gig/sharing economy with people seeking a level of autonomy such as deciding when they want to work. This is reflective of the rise in platform-based models such as Uber, Lyft, and Airbnb. However, the staffing and temporary work placement industry has yet to make great progress to innovate and adapt to the changing times.

With millennials comprising the largest portion of today’s workforce, the timing is well suited for an innovative platform that can help connect this generation of temporary job seekers with businesses that require their help.

Competitive Research

We took a look at some existing apps for temp work, including Wonolo, Syft, Hyred, and Tempo.

The features that the industry are lacking are:

• Same day payout
• Chat with employer
• Map of jobs proximity

Surveys

We crafted the survey questions together and got 30 survey respondents. There were valuable insights that validated our hypotheses.

Our survey results gave a direction to the features that are desirable to our users.

Interviews

We conducted interviews on both workers and businesses.

Some quotes that stuck out from the user interviews were:

There’s an opportunity to speed up the hiring process and protect the workers. A process that’s straightforward, fast, and clear is what the users need in this market.

3. Planning

There are two user types for this app: job seekers and businesses. We started out planning for both types of users. However, due to the project time constraint, we decided to focus on designing just for job seekers.

Affinity Diagram

We analyzed our research data and put info into groups, focusing on finding the pain points, motivations, and features.

Persona

Having a persona was crucial to help represent our target users and make sure that our design decisions are based on our user needs. Jen and I worked on developing the persona together.

Our persona is Chase Hamilton, a 27-year-old actor. Chase is passionate about acting and would pursue his career interest. His acting gigs are sporadic and it takes weeks for him to receive the next paycheck. He’d like to fill his free time with some quick jobs to get some income in the meantime. His experience of going through temp agencies has been frustrating with long wait and uncertainties. He felt out of control with his current situation and wish there would be an easier way for him to find short term gigs.

Story Boarding & User Scenario

We put ourselves into Chase’s shoes and visualize a scenario where Chase would be using the WorkBriefly app. What would Chase do?

Chase is checking his bank account, it’s running low because he hasn’t gotten paid yet from the last film he did. It’s still 8 days away til his pay day! He’s getting stressed out with upcoming bills that he needs to deal with. Chase is wondering how he earn some quick money between now and his acting gig in a couple of weeks. Chase would like to find a temp job in the meantime that he doesn’t have to go out of his way to get to. He signs up for WorkBriefly to look for gig, and instantly gets a few gigs lined up. Now he can happily go party with friends and doesn’t have to worry about not having cash flow for the next while!

User Flow

Based on the scenario above, we created a user flow for Chase using WorkBriefly.

Primary flow

Get on-boarded on the app > Browse for jobs and apply for jobs > Wait on job application decision > Get approved for the job > Clock-in/out for the job > Rate employer > Gets paid for the job done.

Other flows:

• Get notified about a job request by employers that post jobs > Enter app > Accept/reject job
• Compose a message > Chat with an employer

Feature Prioritization

Based on our research, persona creation, and user flow, we defined the Not Needed, Must Haves, and Nice to Haves for WorkBriefly.

We decided to go with the above features, as our app would fill the gap in the market, and differentiate us from the competitions.

• Personalized job listings: Not many competitors have these features, and personalized experience means that our users will always get relevant information.
• Profile: To help employers decide between different candidates based on their profiles.
• Ratings: Our research shows that there were some accountability issues in the industry, with gigs being cancelled last minute or workers don’t show up. This feature will help improve this issue drastically.
• Direct messaging: None of the apps out there has this feature, and streamlined communications directly on the app were proven to be important to our users.

4. Design & Iterations

Paper Prototyping

We started our design phase by creating paper prototypes. This allows us to iterate quickly after testing, before moving into digitizing the wireframes.

We utilized the ‘design studio’ method to work on some main screens together and split the rest of the screens.

Sam worked on screens for On-boarding, settings, profiles, error and empty states, while Jen and I split the screens for job search, chat function, job application, job request, clock-in/out, ratings, notifications, and payment history.

Testing & Iterations

After testing with a few people on both paper and mid-fi prototypes, we had a few realizations.

Simplifying the steps: We referred back to our research and found that to help our users achieve their goals fast, we need to cut down on screens while ensuring clear visual communications.

Initially, we had the Clock In/Out button outside of the job listing card, but we decided to make it simpler by adding the button straight into the card and using an icon to make it quicker to glance at.

Putting options in gig seekers’ hands: We realize that our filters are unclear, and being able to find a gig with proximity is important for our users. So we added titles under each icon and added km radius for location.

Bringing positive emotions: We understand that searching for a job could be daunting sometimes. We strive to bring a more delightful experience to the users, by adding encouraging and positive messages throughout the app.

Establishing trust: We’re collecting various data such as address and payment info, which is private information. Providing clear messages to explain why we collected those data would be necessary to help assure our users about their information privacy.

5. Final HiFi Prototype

Here’s the app prototype! Feel free to follow the flow notes below.

Apply for a Job & Get Requested for One:

• Apply for a job: Apply for JJ Bean gig > Submit application > Waiting for decision > Get a notification that the gig application is approved
• Get requested for a job: Apply for more jobs — use filters> New notification: job request from Cartems > View gig description, instruction, and contact > Accept gig

On the Workday & Get Paid

• On the workday: View schedule in a list — then in calendar view > Quick chat with the employer for questions before gig start > Message Sarah from JJ Bean > Clock in when starting gig > Clock out when finishing gig > Rate employer
• Payment: New notification: got paid from JJ Bean gig!

Onboarding:

6. Future Considerations

Due to the 3-week time constraints, we couldn’t design and build the prototype for our business users. To have a fully functioning MVP, I’d like to complete the prototype for business users, with the following features that are unique to them:

• Employer profile
• Easy job posting with recommended candidates (based on skills and availability)
• Scheduled job view

7. Conclusion

We achieved our goal of creating a product that fills the gap in the market and exceeded our client’s expectations for quality of work. I’m looking forward to testing the developed app very soon!

I learnt a lot from this project!

• Our team has different strengths, and I believe that as much as we try to do a lot of things together, it’s also good to leverage each other’s strengths to divide and conquer.
• When you’re in the design phase, it’s important to set a good design system with your team (in my case, getting buy-ins from teammates) to streamline your workflow.

WorkBriefly — Connecting temp workers with employers instantly was originally published in itslyvu on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Design Case Study — E-commerce Website

The Ask

Walk down the street and ask any person if they buy coffee online, you’re very likely to get a no. E-commerce space is increasingly gaining popularity and there are millions of products that consumers are buying online. However, consumers still prefer to buy many products in-store, such as coffee. The e-commerce experience of getting coffee products is still quite different from an in-store one. Our challenge for this project is to design an e-commerce website for coffee products that brings it closer to an in-store experience.

Research & Planning phase: myself, Patrik Lau, Annie Fang, Halina Garycka, Saveen Toor
Design & Testing phase: myself
Timeline: 2 weeks
Tools: Sketch

Research

We conducted various research to understand the coffee market, coffee drinking habits, and our potential e-commerce site users.

Domain and Organizational Research

Our hypothesis is that many people don’t make coffee — they would straight up buy brewed coffee from coffee shops or get brewed coffee at work. If they do make coffee at home/work, they’d either buy the beans from a grocery store for affordable and ok quality ones or at a local coffee shop for higher quality ones.

Competitive/Comparative Analysis

We looked at various e-commerce websites from local coffee roasters to compare what features they include on their website. All of them have standard product catalog and check out flow. Some has more details on the product page than others. We found that the custom coffee subscriptions and personalized recommendations were where the opportunity lies.

Surveys Findings

The survey results validated some of our hypotheses in coffee drinking and buying habits, as well as what people look for when buying coffee. Majority of people buy coffee for the taste, quality, sourcing, and price mix. Factors such as ethically sourced and sustainably produced play a role in buying decisions. There are some barriers in an e-commerce experience such as the inability to taste the coffee and high shipping cost.

User Interviews

We found a lot of deep insights through this process. We interviewed four people, a coffee shop owner, a coffee shop manager, and two regular coffee drinkers.

One coffee drinker was quite knowledgable about coffee, and was close to a coffee connoisseur. She definitely pays attention to flavour notes and taste, and is willing to put in more efforts in hunting for good coffee. The other interviewee has a vast interest in the sourcing and the people behind a company, therefore learning about those information would be major factors in their buying decisions.

The former manager from Republica Roasters that we interviewed mentioned their repeat customers love the freshness of their coffee beans. All the coffee were roasted after the order date to guarantee freshness. Shipping is free for even 1lb of coffee beans and it takes 1–2 days locally. However the bulk of their revenue comes from wholesale with other businesses.

Contextual Inquiries

We visited a few different coffee shops to observe behaviours of customers.

All the coffee shops we visited that sell coffee beans have their beans in-store and on their own website. We observed some customers asked for recommendations from the barista before choosing the coffee they want to buy.

We went to Save-On Foods and confirmed our understanding that the coffee shelf has many different brands ranging from giant Canadian and international coffee producers to some what more local offerings.

Affinity Diagram

We conducted the affinity diagram exercise of our user interviews and surveys to find patterns. After grouping relevant info, we summarized each section with a sentence through a persona’s voice. We started to see a lot of trends and patterns about our target market’s behaviours, needs, and pain points.

Planning

Persona

We created Dylan, our persona. Dylan has a busy work life as a game designer and therefore he loves drinking coffee to get the energy boost. He’s open to trying new coffee and learning more about how to make coffee. Once in a while he will ask his friend who’s knowledgable about coffee for recommendations.

Story Boarding / User Scenarios

Dylan is a busy game designer who drinks a lot of coffee to support his busy lifestyle. His workplace provides coffee, but it’s not very good. Dylan always gets off work very late. He prefers buyings his own coffee, but because he works so late, he is too busy to go to the store. Dylan looks for online coffee shopping options to accommodate his busy lifestyle.

User Journey Map

We created the User Journey Map to demonstrate Dylan’s emotional state throughout different stages of the online coffee purchase experience. Through this we were able to identify that we can bring Dylan a better experience at the Shopping and Checkout stages of the journey.

Feature Prioritization

After listing all the possible features and using different methods to identify the importance/effort level of each feature, we have a solid chart of the Must Haves, Nice to Haves, and Not Needed for our MVP.

For my design, I picked all the must have features, plus social media, and custom recommendations through the coffee personality quiz.

Site Map

Through the main navigation, users would have options to:

• getting to know the business and its processes;
• learn about coffee brewing methods and their personalized recommendations; or
• shop directly.

User Flow

For the filter function on the Catalog page, I created two filter levels for types of product and then product characteristics. As the user choose a type of product, relevant product characteristics will change on the second filter.

Users will get to the Product page by:

• clicking the featured product on Homepage;
• browsing through the Catalog and choosing a product; or
• taking the Coffee Personality Quiz to get personalized coffee recommendations.

From then they can add a product to cart and check out.

Design

From this point onward, our team split to create our own design using the same research and planning.

I started the design phase by creating paper prototypes. Using inspirations from various e-commerce sites, I tried different design solutions for various parts.

User Testing

I conducted testing throughout the design phase to constantly iterate the product and improve usability.

• I cut down the coffee quiz to 5 questions to keep it short and sweet for the users to go through.
• The testing results show that my product filter system was a bit confusing so I made some edits to change them to a two tier system.
• To simplify the check-out process, I grouped Shipping Method and Address together, and Billing and Payment together.
• There were some missing elements such as Back button in the check out process that I added in after the testing.

Final Prototype

Here’s the final clickable prototype!

Click here to view the project `Fresh Brew`

Conclusion

This was a great learning experience for me as a new UX designer. My team was working well together, brainstormed a lot of ideas and figuring out solutions together.

I learnt to spend more time on paper prototyping so that I can test out the design as much as possible before moving to design software. Being quite proficient with Sketch shouldn’t be the reason to move on to design in it quickly before I could test out more ideas on paper.

If I were to have more time, I would have tried out more design patterns and build out the flow for Coffee Subscription.

UI Design Case Study for BEST Website

The Ask

BEST (Better Environmentally Sound Transportation) is a non-profit organization with a long history promoting sustainable transportation in Metro Vancouver. Their mission statement is “to activate better transportation options through initiatives, collaboration and leadership”. There are six different programs BEST runs own their own or with partners, that provide sustainable transportation solutions. The Bicycle Valet, their biggest program, provides safe and secure bike parking in Metro Vancouver.

Business goals: to gain patrons for their programs and to gain partnerships/sponsorships.

Project goals: to help the public and potential sponsors/partners to learn about BEST and reach out.

User goals: to find more info about BEST’s story and their programmings.

Main pages:

• About Us (overview, history, achievements)
• Programs
• Get Involved (volunteer, sponsor, donate, membership, work at BEST)
• Resources (walking, biking, carshare, transit)

Timeline: 3 weeks for both UX and UI

Tools used: Sketch, Photoshop, Lightroom, Illustrator, Invision

The Team

We had three UX Designers and I was part of the UI team of two. We had a collaborative environment and overcame various project challenges together. I was also the scrum master for this project, to ensure all project goals are met and team cohesion. It was a great learning experience for me to take the project management role.

The UI Design Process

Research

We looked at various non-profits and impact-driven organizations websites to find out how they communicate their visual language. We drew inspirations from Ecotrust, David Suzuki Foundation, the Bloom Group, and Modo. A common theme that we found from these websites are the use of strong imagery to communicate their mission and actions. Some sites use bold colours while others have micro interactions and playful design to captivate the visitors.

User Persona

There are two main user personas for the website. One represents the patrons, who loves to attend outdoor activities and would be likely to look for a program like Park Bus. The other represents the sponsors, who is a business person looking for a local non-profit that aligns with their values to sponsor.

Gut Test

We conducted a Gut Test with our client showing with various visual elements and design styles. We showed a variation of non-profit and impact driven websites that convey imagery, illustrations, colour palettes, composition and typography in different ways. Our client conveyed his likes and dislikes that helped us move forward with our design directions.

Dislikes:

• Sales like pitches, cookie-cutter looks like you took a template from WordPress
• Too simple, implication of being “basic” or ‘boring’
• Visual that lacks personality
• Too much symmetry or rigid, like a box
• Imagery that’s clutter

Likes:

• Splash page to be a breakdown of what makes BEST in some form or fashion
• Visual that represents inclusivity and community
• Playfulness in elements, from non linear borders and in non geometric shapes possibly
• Urban representation, either through colour or imagery/illustration
• Consistent representation of brand throughout (using logo element in great way)

The Why

In order to inform our visual design directions, we were brainstorming for a Why and came up with one that’s close to their vision statement:

“To build thriving communities through promoting sustainable transportation solutions.”

Design Inceptions

Based on the Why and the gut test results, we decided to go with two design directions. The Vibrant Communities direction is a playful, vibrant, and dynamic direction that communicate BEST’s fun and down to earth personality. The Urban Action direction communicates a more grounded, urban, and mature vibe of BEST.

Mood Boards

We created two mood boards that convey the moods of the two directions. The Vibrant Communities mood board brings a sense of playfulness, adventure, retro and lively vibe. The Urban Action mood board is more urban with darker colours.

Style Tiles

The Vibrant Communities style tile is energetic with a colourful palette and fully rounded buttons. For this direction we picked Neutraface which has a development history of novelty and fun with vintage inspirations. The imageries are bright and happy. Urban Action is big and urban with heavy set type using Raleway and more muted colours. This direction used overlaid images of the city to have a closer connection with the landscape it’s suppose to be a part of.

Final Style Tile

Logo: We were still working on a new logo at this point so we placed the current BEST’s logo as placeholder.

Typography: We’re happy that the client decides to go with Neutraface for the header typeface even though it’s a paid typeface. We still provide a free version in case they change their mind, but we believe that Neutraface is the best fit for the brand and design direction. It’s playful, strong, yet still friendly. For the body text, we picked a free Google font, Mukta, for a clean sans-serif look to pair with strong Neutraface.

Buttons: We went with fully rounded corners, for a clean and friendly look.

Graphical devices: all the boxes have rounded corners since our client prefers less boxy look.

Preview: it’s a reveal, keep scrolling to prototype!

Logo

At first the client was not inclined to creating a new logo for BEST, since they have had it for a long time and printed it on many materials. We presented the benefits of having a refreshed logo that’s more fitting with the new visual language of BEST. The current logo has a lot of details and doesn’t have a modern urban vibe. We explored various options that represent the new brand and some that are still close to the current logo.

After a few rounds of consulting with the client, we landed on the logo below.

This logo represents BEST’s various programs and values through the four brand colours, using Neutraface typeface. We kept the bars from the original logo to represent transportation and to resemble the current logo. It’s a clean and modern take of what BEST is now. Below are some logo variations with different colours and backgrounds.

Visual Language

As part of the design, we created image cut outs of transportation elements such as bike wheel, bus, crosswalk lines, with a vintage undertone through duotone treatments. We applied a gradient overlay on images for a modern and playful vibe as well. Last but not least, we adopted non geometric composition for a sense of novelty and playfulness.

Final Prototype

Enjoy our beautiful desktop and mobile prototypes!

Desktop: https://invis.io/SHSF0T8ANCW

Mobile: https://invis.io/TQSF0T0SYX5

Conclusion and Retrospectives

Branded content: It would be a better outcome if we have more cleaned up content and brand photography to work with. We would love to use a video of Vancouver for the splash page to show various transportation options and city vibe but it wasn’t doable given the short timeline.

Setting grids: We had a vertical grid system from MidFi and adopted the 8px spacing rule while doing HiFi. It would have been more efficient and consistent if we were to use the rule since MidFi.

Project management: Since UX timeline and work quality can impact UI work, it’s better if UI team can influence UX decisions a bit earlier.

BEST’s new website — A UI Case Study was originally published in itslyvu on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Ask

Monashee Health Collective is a chiropractor, physiotherapist, and RMT office in Vernon, Okanagan. It prides itself to be Okanagan valley’s most passionate community of health and wellness professionals. The company is a pending Certified B Corporation as of May 2019. BCorp is a network of businesses that meet the highest standards of verified social and environmental performance, public transparency, and legal accountability to balance profit and purpose.

Steven Piper, the business owner, is seeking to build a wellness app that helps the wellness community in Vernon to do good things for their health, the community, and the environment.

Business goals: to build brand recognition and partnerships, as well as to attract potential clients.

Project goals: to inspire and reward individuals for doing good things for their health, people, and the planet.

User goals: be more active and connected in the community and with the environment.

Key functionalities:

• Tracking activities in health, community, and the environment
• Giving rewards for doing them
• Social networking with the local wellness community
• Educational tool to learn more about the wellness activities that they’re interested in.
• Profile page

Timeline: 3 weeks for both UX and UI

Tools used: Sketch, Illustrator, Invision

The Team

We had 3 UX Designers and I was part of the UI team. It was a great learning experience collaborating with my team and overcoming the challenges together.

The UI Design Process

Research

We looked into the visuals of apps that our client is currently using, such as Carrot Rewards and Strava. For the Rewards system, we also drew inspirations from Starbucks app with their star icons.

User Persona

Our target audience is mainly female of 35–55 years old in Vernon who’s into health and wellness. We worked together with the UX team for a persona that represents the app’s typical user.

Gut Test

After conducting a Gut Test with various visual elements, we got a good sense of the likes and dislikes from our client.

Dislikes:

• Fluffy and soft colours/illustrations
• Illustrations that do not clearly represent the action
• Design that’s image heavy
• Unclear visual hierarchy

Likes:

• Clear and easy to spot visual cues that indicate what to do (colours, hierarchy)
• Circles/pie charts to illustrate numbers
• Clean design with well-balanced white space
• Illustrations that clearly represents the actions on the screen

The Why

My team was in the search for a Why that would inspire all of our users to use the app. We worked with our client and landed on this Why below:

Design Inceptions

Based on the Why, we splat into two design directions. One is a calmer mood and one is brighter and happier.

Moodboards

We named the two moodboards Self Care and Happy Together.

Self care: calm, chill, easy

Happy together: happy, bright, light-hearted

Style Tiles

We presented two style tiles for the two directions for our client to pick, along with the design inceptions and moodboards.

Final Style Tile

Logo: We were still working on our logo at this point so we placed Monashee Health Collective logo as the placeholder.

Typography: We chose Avant Garde Gothic Pro for headings, as it’s a strong yet friendly typeface that catches attention. For the body text, we picked Futura from our client’s mother brand and it’s also a clean sans-serif for mobile.

Iconography: The icon style is illustrative of the activities and are playful.

Buttons: We created them clean with fully rounded corners, for a clean and friendly look.

Logo

We went through a roller coaster in logo creation. Being unclear of what the client wanted for the app name and logo, we went around many different sketches in different directions. The client wanted to incorporate certain elements from the current business logo, such as the mountain shape to represent wellness and Monashee, and the plus sign to represent health. We explored different logo design that plays with the theme of wellness (with the leaves), mountains (with M shape), and C that stands for Collective.

After showing the variations to our client and confirming the preferred app name, we finally got a logo that we’re happy about!

This logo incorporates the C that stands for Collective, leaves that represents wellness/holistic living, and plus sign for health. The name Monashee Collective is to differentiate with the mother brand and to emphasize on the idea of ‘collective’. Below are some logo variations with different colours and backgrounds.

Style Guide

Final Prototype

Here’s the final prototype!

Invision link: https://projects.invisionapp.com/share/8FS2IXPSJDX#/screens

Conclusion

Icons creation: It was a great learning experience for me in creating iconography for the project. Creating icons that replicate human bodies was harder than other types and I’m glad I did them.

Team goals/expectations: I learnt that it’s important to set team goals and expectations from the beginning for the team to work towards to. Without these, there were discrepancies in individual effort and work quality, hence creating some frustrations and team frictions.

Timeboxing/Project management: Although having a scrum master, we did not agree on firm milestone deadlines. As a result, some milestones on both UI and UX sides were delayed and the last week was quite hectic. I learnt to set up the timeline with firm deadlines and have the scrum master to remind the team to follow it through.

Team collaboration: Since UI and UX are so closely related, it’s very hard to not think about the UX side and try to not get involved in it. I’m still working on offering the right amount of help, trusting and empowering my team instead of over stepping their work.

Perfectionism: This is a strength I have but it’s also a weakness sometimes — hard work is not always smart work. It brings high quality work but it sometimes takes longer for things to be done.

Monashee Collective — A UI Case Study was originally published in itslyvu on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Ask

As an outdoor enthusiast, I was thrilled to have an outdoor-related app for one of my UI Design projects at RED Academy. The ask was to create an engaging, impactful and well-designed UI Library from lo to high fidelity for an app called Campvibes. Using Campvibes is a quick and easy way to keep track
of all your outdoor activities and get inspiration for where to go next.

Key functionalities:

• Find and explore campsites and hiking trails near them
• Keep track of campsites and hikes they plan to visit/have visited
• Share the campsites/trails with friends

These are the four wireframes that my team decided to go with:

Keywords: explore, outdoors, adventure, nature, landscape, camping, hiking, lifestyle, MEC vibe.

Timeline: 1 week

Tools used: Sketch, Photoshop, Invision

The Design Process

Research

I looked into a few different apps that have similar functionalities and came across Alltrails and Yonder. I have used Alltrails quite a few times myself and are generally happy with the UX functionalities of the app, while the UI is not the best fit for me. Yonder has inviting typography and imagery that seems to cater to new hikers and campers. I also draw inspirations from other outdoor retailer apps such as Arc’teryx.

The Why

My team was in the search for a Why that would inspire all of our users to use the app. For many people, exploring the outdoors is a way to find connections in their busy lives. We want the users to feel connected and inspired to plan for their next trips when using Campvibes. We landed on this Why that we were quite happy about.

User Persona

Based on this Why, we decided to split into three design directions to represent three different personas. Mine is the “Backcountry Veterans.”

Design Inception

For the Backcountry Veterans, the outdoors is always an exciting place where they can challenge themselves and connect with nature. They already know exactly what makes them come back to the outdoors, whether it’s the thrill in physical and mental challenges, or the humble feeling to be standing in front of grand mountain ranges and sleeping under the stars. They’re addicted to the outdoors and always on the search for the next backcountry experience.

If Campvibes were to be a person, they’d be someone that’s humble, having ‘quiet confidence’ and always looking for the next personal challenge. I landed on the design inception below.

Colour Palette

My colour palette was drawn from nature colours. To represent a seasoned and challenging mood, I decided to go with deep forest colours with a bright punch of ‘slug yellow’.

Moodboard

I chose imagery that represents the challenging yet humble mood of the design direction, plus a few screenshots of the visual elements ( icons, typography, graphical devices) that I was planning to go for.

Style Tile

Logo: I strived to use a logo that’s modern and clean.

Typography: I chose Tungsten for the header as it’s a tall and skinny typeface, that gives the vibe of ‘stretching your abilities’. For body copy, I went with Avenir as it’s a clean and modern sans-serif.

Iconography: I picked icons that are clean, modern and represents nature.

Buttons: I made them clean with slight rounded corners, for a clean and friendly look.

Photography: Campvibes needs to excite users when they explore campsites and trails, so I went with full-sized photos of beautiful landscapes.

Style Guide

Final Prototype

Here’s the final prototype!

Invision link: https://invis.io/5BRQ41RXZYK

Conclusion

Conceptual thinking: My understanding of the design process definitely improved throughout this project. I’d like to spend more time with conceptual thinking and exploring different ideas/design elements for future projects. I realized towards the end how much I could have pushed for creativity in design elements that represent my design direction.

Teamwork: Through working in a team, I also learnt the importance of early team communications and helping each other out for a more successful team outcome.

Case Study: Landing Page Design

Introduction

My first project at RED Academy’s UI Design program was to create a type spec in the form of a landing page for Tungsten.

Research

Before learning about typography in my UI class, I wasn’t into this typeface when I first saw it. After my research and learning about the rich history and how much character this typeface has, I slowly became a fan of Tungsten.

Tungsten was designed in 2009 at the famous foundry Hoefler & Co. (H&Co), by Hoefler & Frere-Jones. Tungsten is a compact and sporty sans that’s disarming instead of pushy, confident yet subtle instead of just raw testosterone.

Tungsten is a flat-sided sans-serif which style has been around for quite a long time. The gaspipe design was popular during the 20th century for propaganda posters for its bright and optimistic character. That’s why Tungsten looks strong and action-provoking.

Always smart, tough, and sexy, Tungsten now sports 32 styles that bring new voices to the family. Tungsten original was bold and disarming. There are now lighter weights and widths to the Tungsten family with Tungsten Narrow, Tungsten Condensed, and Tungsten Compressed.

The Why

Everything we design should start with a strong why. Therefore I kept asking myself why a designer would want to use Tungsten and what they want to represent. With it’s smart, tough, and sexy characteristics, Tungsten is meant to represent something that’s strong but humble, confident yet subtle. I got my why.

The Design Process

I wanted to represent Tungsten for modern usage and to highlight its characteristics. There’s a fine line that I’m balancing, between confident yet humble, strong yet disarming. Therefore I went for the design inception below.

Design Inception

Colour Palette

I choose this colour palette for the balance between the salmon pink to represent the humbleness, denim blue for the strong and bold characteristics of Tungsten, honey yellow for any highlights and chiffon beige to compliment the primary colours of the palette.

Moodboards

I had quite a bit of trouble with building the moodboards. It was challenging for me to nail it down to the exact art direction that I wanted to follow and to create a consistent style. Not knowing colour theory too well, I was unsure of which colour palette that will demonstrate the design direction that I was aiming for.

I went through several iterations and kept going back to my design inception to see if what I picked for the moodboard represents it. After I landed the colour palette, the moodboard started to embody a more consistent style.

Below are the last two iterations of the moodboard. The second to last moodboard got my colour palette, but it didn’t quite represent the shapes and movements I wanted to create. Even the elements in the final moodboard still doesn’t capture exactly the colour palette I was going for, hence the difference in colour you can see in my final prototype. This is one of my biggest learning lessons going through this project, which is how to represent an art direction accurately in the moodboard.

Sketches

I first wanted to go with a climbing theme for my art direction to represent its bold but disarming characteristics. After I changed my design direction to a more simple design, I got rid of the climbing theme and stuck with simpler elements instead (which is only reflected in my digital prototype).

I should have spent more time in the sketches to explore different layouts and element compositions. Instead, I went straight after two sketches to start playing around with hi-fi prototypes (as I’m not strong in drawing but more proficient in design software, I found that sketching takes me equal time). Then I ended up adding a few more sections compared to the sketches:

• Branding/Intro
• History
• Typeface anatomy
• Font variations
• Font pairing
• Tungsten in use
• Final CTA

Final Prototype

Here’s the final prototype!

Conclusion

I found that my landing page design could be improved with more features for a landing page. For future considerations, I would add these features:

• Text editor
• Toggle bar to show variations in fonts
• More micro interactions
• Social media icons

It was a fun project that helped me to get familiar with the design process. I learnt the importance of having a strong foundation for the process to build upon, from the research stage to the prototyping stage. The clearer the earlier stages are of the design process, the more streamlined and apparent my art direction would have been. I’m hoping to spend more time practicing my art direction and moodboard for future projects.