Project Overview

01 Summary

VayAway is an independent design project, and a business concept I created based on my discussions with second homeowners, as well as my experiences traveling to and living in popular vacation destinations. The Android mobile application is designed with Material Design guidelines in mind.

02 The Challenges

1. Most second homes/vacation homes are far away from their owner's primary residence. This distance complicates fairly easy tasks and makes them quite burdensome. Having a trusted local in the area to assist with these tasks would give owners peace of mind.

2. Living in popular tourist destinations can be difficult, as cost of living tends to be high and good work can be hard to come by. Having a flexible way to bring in extra income is very desirable.

03 Users & Audience

For VayAway, there are two distinct core audiences. The first is the second home or vacation home owners, whom tend to be older and financially secure. The second is the individual who enjoys living in popular vacation destinations, but is in need of a flexible source of additional income.

04 Role(s)

User Researcher, UX/UI Designer

Interested in exploring further?
Case Study

The Process

  1. Empathize
  2. Define
  3. Ideate & Design
  4. Prototype
  5. Test & Iterate

01 Empathize

Secondary Research & Competitor Analysis

Summary

After writing up a Project Brief, outlining the required deliverables and building a timeline, I created a Research Plan for VayAway. From there, I dove into Secondary Research and analyzed the current landscape for second home owners and the competitors who are trying to meet their needs. You can review my Secondary Research findings here.

Concentration of Second/Vacation Homes
Takeaways
  • According to the Washington Post, the second home market is surging despite the impact of COVID-19.
  • Second homes/vacation homes are very concentrated, as "33 counties in 13 states had over half of housing units qualified as second homes."
  • Australian-based Airtasker is likely the closest competitor in terms of service offering, but it does not focus as intently on second homes or vacation homes as VayAway intends to.

User Research Interviews

Summary

After conducting secondary research, I created two user interview scripts and started sourcing participants for user research interviews. For "Owners", I focused on second home/vacation home owners, which skewed older. For "Helpers", I focused on participants living in popular vacation home destinations that have worked a variety of different jobs in the area, and they skewed younger.

Takeaways
  • I compiled my top findings for both "Owners" and "Helpers" within this document.
  • While creating two scripts was a little more time consuming, it allowed me to really tailor the focus to user needs for each group.


02 Define

User Personas

Summary

Now that I was more knowledgable about my "Owner" and "Helper" user groups, I used my learnings to create two personas in a Figma file. For the "Owner" user persona, I modified the approach so that it was for a married couple rather than one individual.

"Owner" User Persona
Takeaways
  • For the married couple persona, it was helpful for me to pull comments made by each person in the joint user interview to create the persona.
  • While my user personas were focused on Colorado, with more time I would ideally try to cover a wide range of vacation destinations in various States.

User Flow

Summary

Prior to sketching and creating wireframes, I used FlowMapp to build out a user task flow, considering both the "Owner" and the "Helper" user and how and when their paths come together. You can view the first iteration here.

Takeaways
  • Considering the stages of the flow prior to designing the wireframes and UI helps identify where the experience can be improved early on. In this case, I simplified the process of creating a task and minimized the importance of "Planning A Stay" when I designed the wireframes based on feedback I received.
  • Up to this point I had been using Miro, and it is important to try new tools and see how they compare.

03 Ideate & Design

Wireframes

Summary

After receiving feedback on the user task flows for both the "Owner" and "Helper" personas, I implemented adjustments and built out the initial wireframes for the app design. Due to time constraints, I focused primarily on the key goals, like creating a task (Owner) and submitting an offer for one (Helper) rather than build out all pages.

VayAway Wireframes
Takeaways
  • It was really helpful to use Mobbin to study app design patterns as well as download and review apps from competitors, especially during the wireframe stage of the project.
  • At this time, I also wrote the majority of the copy, since I was not as concerned with styling.

Style Guidelines

Summary

Compared to previous projects, I took a different approach when establishing the Style Guidelines, largely to accommodate Material Design guidelines to the best of my ability for the Android application design. I found a Material Design focused community file in Figma which helped me create the baseline components (below), and outline typography, color scheme, elevation, and states.

Baseline components for Android app design
Takeaways
  • Checking Material.io for components or design patterns helped at times rather than trying to design something from scratch.
  • While there are a lot of resources available to designers to select colors, I used the Material Design palette tool provided on Material.io to try to select appropriate colors, and to simplify things for myself.

UI Design

Summary

Leveraging my wireframes and Material Design Style Guidelines, I created the high fidelity designs for the "Owner" and "Helper" UI. To provide differentiation between the two, I swapped the primary and secondary colors so that green was the primary color for "Helpers" and purple was the primary color for "Owners" with the other color utilized more sparingly.

Examples of "Helper" UI
Takeaways
  • To make an effort at staying within Material Design guidelines, I pulled from the baseline components and assets as much as possible within the Figma file.
  • I utilized illustrations quite a bit for the UI to give the app a modern feel and break up the monotony of only seeing real life photos of second homes.

04 Prototype

Usability Test Plan

Summary

With the first draft of my UI completed, I created a Usability Test Plan document that outlined my test objectives and the scenario tasks I wanted my participants to run through.

Takeaways
  • I wrote distinct scenarios for both my "Owner" and "Helper" personas to focus on the core task flows for each.
  • I created imaginary personas for the participants to match the UI design.

Prototype Creation

Summary

With my scenarios established I created the prototype in Figma for both the "Owner" and "Helper" user flows.

"Helper" Home Page Prototype
Takeaways
  • The prototype for this app design was the most complex for me to create as there were many multi-step flows and options for both the "Helper" and "Owner" personas to choose from on any given page
  • Due to time constraints, I was not able to design every single page that I had hoped to, such as category pages for the "Featured Tasks" on the "Owner" home screen.

05 Test & Iterate

User Testing

Summary

I conducted one in-person usability test, and for the rest of my participants I walked them through it remotely via Google Meet/Zoom depending on their preference. Upon completion, I created a comprehensive document that outlined my findings and 15 iterations I wanted to make based on priority.

Takeaways
  • I was able to complete 14 of the 15 desired iterations within the 3 hours I had in scope, which was a nice accomplishment!
  • Several users had very similar suggestions and so I made a note to prioritize those.
  • Revising the prototype to make the bottom tab bar sticky was a simple adjustment that really improved the UX.


Top 5 Things I Learned

  1. When trying to come up with a new mobile app concept, make sure to do your homework! Initially, I had planned to design a travel app concept before realizing Polarsteps had essentially already created it.
  2. Many popular apps have two core user groups with different needs (Uber Drivers vs. Riders, Airbnb Hosts vs. Visitors etc.) Make sure that you are considering the needs of both and how they come together.
  3. Designing an app following Material Design guidelines can feel daunting. Finding resources to help get started like a Material Design Figma community file can help with that overwhelming feeling.
  4. Be sure to identify patterns and common responses during usability testing, especially if they are pain points.
  5. Do not underestimate the power of clearly written copy. It can go a long way in making the user understand what they need to do, and why it matters to them.


"Exploration is curiosity put into action" - Don Walsh
Want to explore the possibilities of working together?
Get In Touch With Me