Planning

Speaking with the client

I came onto this project as a freelancer. Before starting the project, I had to learn about what the client wanted. Speaking with the Vanmates team, I learned a few things.

The Product

The product itself is targeted at students from abroad who want to move to Vancouver to take classes. The Vanmates team sells two major products, the primary being accommodation and secondary being courses. They wanted to convert the process of prospective students applying for accommodation and courses into an account-based web platform, so they hired me to design it.

A Tight Budget & Timeline

We made a very early decision to go with building a Minimal Viable Product due to the tight budget and deadline of the project. This meant the focus of the design project was for it to be complete with necessary features.

Collecting Information

Entering the Vanmates team as a freelancer, there's a lot I did not know or understand about the desired web platform. I shrunk down the Design Sprint to the parts that outline the user needs and prioritize features of the web platform. This process also gave me access to a wealth of knowledge about the Vanmates process.

SPRINT

It's hard to jump into a team with a product they're dedicated to and give them answers right away. This sprint was an opportunity to ask questions, learn about customer/staff painpoints, and educate myself on how I can best improve their user experience through a well thought out website flow.

Writing out our thoughts

We wrote out :"How Might We?" questions and sorted them into groups based on their contents to understand what problems we need to solve and how the new Vanmates Web Platform could solve those.

Drawing out our thoughts

We all participated in drawing out the platform as we imagined it in our heads. We then asked questions and gave feedback on what parts we like, we thought could be improved, and what we didn't understand.

Wireframes

Research

Asking Questions

The Vanmates employees were my main source of research. This platform was being built both for them and their customers. They clearly wanted to make their jobs easier by taking less calls for booking accommodation and the users wanted more access to information on accommodation and courses local to Vancouver.

Some questions I asked were "What part of the process takes the longest?", "Who is on the other side of the call when you make bookings?", "How involved are you with the arrival of your customers to Canada?", "How much does Vanmates help with the visa application process?"

These questions, and more, gave me a better idea of how to optimize the design so we built for the necessary platform features first.

Competitive Research - "Don't reinvent the wheel."

With our time being limited, I had to spend most of my research period looking at existing designs from successful companies within the same industry. Many of these companies have already had the data to improve upon their web platforms, and the tight budget meant learning from those existing platforms instead of trying to come up with every minor detail on my own.

Below are some samples of pages from websites that inspired my design choices.

Air BnB

HomeAway

Expedia

Information Architecture

MVP Site Map

Designs

Home Page

 This page was designed with a clear idea of a quick CTA, space to educate the user and direct access to the product right after.

We took this path based on competitive research. Travel sites, like Expedia & AirBnB, start out with a date filter for users to quickly search for what they need. With the common understanding that this search means "travel," it will better indicate to new users what we do.

Right after we have a quick rundown of our two main services, Education and Housing, for users to inform themselves of what Vanmates is about and the goals we seek to help them accomplish.

Below the education aspect, we have a list of the different available products. This will give users quicker access to the product detail page, and therefore quicker understanding of how to search for what they need.

Product Search Page

The product search page was created with ease of responsive design in mind. My tasks were specifically to create for desktop web, but I made sure to keep mobile in mind to make it easier for development.

The way I did this was by creating a standardized three column view on desktop that could change to a one column view in mobile.

Some other specifics I had to consider were the types of information most wanted by a user before clicking in. The team and I settled on Price, Dates, Reviews, Location, Name and Product Image.

Product Detail Page

The product detail page was made mainly with consideration to what information users need when making an expensive and important investment in their future.

I stress the importance of that because some users end up spending months and years after they move to Vancouver, and our site is meant to help students and sometimes their parents understand what they're getting.

We based our structure on popular competitive sites like Expedia and AirBnB. This structure is used for both the accommodation and education product detail pages. The purpose of unifying the design for both product pages is so users can easier adapt moving between both products and to make the developers job easier in getting the website up and running.

My Account Page

The My Account Page is where the user will check the status of their applications, find their favourite listings, and update their account information.

The main dashboard page will have constant status updates and is designed with the same three column web to one column mobile responsiveness as the product search page to make development easier for the team.