Let Your Stuff Work For You

Website UI Design | Case Study

Introduction

Yoodlize is a peer-to-peer rental network that allows you to rent anything and everything from the community. Wether that’s from your neighbor or you’re on vacation looking to try something new. I was brought on during the early stages of development to design the UI for the website.

The Problem

Experiences are expensive… Say you want to kayak down the Salmon river, well a kayak costs a lot of money and it will most likely sit in your garage after 1 or 2 adventures. Imagine wanting to build a custom bed frame for your son, you need a lot of specific tools to do that.

People have already bought these expensive items and they’re usually just packed away in the garage collecting dust. There needs to be a way to bring these items into the wild where they can THRIVE… and that’s where Yoodlize comes in. We created a platform that allows people to EXPERIENCE more of what life has to offer without shying away because of the expensive gear that comes with it.

Team

Nathan Maus (me) — Designer

Jeremy Robertson — CTO & Co-founder

Jason Fairbourne — CEO & Co-founder

Natalie Fairbourne — CFO & Co-founder

I was excited yet nervous to start this project. This was the first freelance gig I was offered since graduating from DevMountain and I was so grateful for the opportunity. Yet, I was out of my comfort zone and taking on a project that I didn’t realize was so large. During my first meeting with Yoodlize we discussed the website and the different pages that needed to be designed. I underestimated the amount of effort these screens would take. This design took me 6 weeks in total but I wish I had more time to test the product and validate my designs with potential customers.

Research

This project was different than anything I did in school because I wasn’t going through the UX process and was mainly doing UI and Visual Design. As much as I would have liked to conduct my own research and learn more about the users, that wasn’t in the budget and my timeline was short. When I arrived at Yoodlize, they had conducted some market research and held a few focus groups. From this initial research they had came up with the features they wanted to provide, and had rough wireframes laying out what would go on each screen.

So my work started a little differently then any of my other projects and I got straight to creating more detailed wireframes and diving right into the visual aspect of the project. Since I didn’t have the time to conduct my own research I looked at other companies (AirBnB, VRBO, Lyft, etc.) in the peer-to-peer space for inspiration and validation.

From a high perspective, the experiences I needed to design were the homepage, item description and rental flow, dashboard, login/signup flow, search and browse functionality, and the flow of listing an item. Some of these experiences were easier than others. I’ll mention the more difficult issues I ran into below. Also, once you’re done reading please feel free to look at the InVision prototype at the bottom to see the other aspects of the design.

Pain Point #1: Dashboard

The dashboard took me some time to figure out. I needed to cram in a lot of information that the user could easily view and understand. The user needed to see their messages, calendar, listings, rentals, reviews, profile, and account information. This was a lot of information to cover and it started to dawn on me, the true size of this project.

How was I going to organize all of this information so it was easy to understand and navigate?

First thing first, the initial screen of the dashboard needed some key information. I decided to include new messages, upcoming rentals, and recent reviews. This allowed the user to quickly see if they had new requests, any upcoming rentals, and make sure they kept their ratings up by staying on top of new reviews.

For the navigation, I went with a Material Design styled secondary navigation bar. This style navigation is visually easy to digest and understand. It takes up little space and really fit the look we were going for.

Although there was a lot of important information in the dashboard, I found it easy to design the layout for most pages. The big issue I ran into was with the calendar. I needed a calendar that could show me all the listings and rentals I had upcoming, along with any information that may be necessary. What if you have 20 items listed… how do you see these items on a calendar?

I took a step back here. You can’t visually show an infinite amount of items on a single calendar, it’s just not possible. It could show a max of 2 items per day before the text got too small and it wasn’t accessible anymore. So, I decided to create two views for the calendar: an item view and an overview of each week. The first view I was going to design was the single item view.

For this view I needed an option to switch between different items and types of rentals (Listing or Rental). On top of that I needed a way to block out days for the times the user wanted to use their item and view rental information. I used a card based approach throughout my designs because I believe they do a great job at grouping important information, making it easier to digest.

As you can see, at the top of the screen you can quickly switch between items and types of items and well as quickly jumping to specific months. On the right, the card information for the selected rental period would stay static and always present even if you scroll down through the calendar. This card view gives you access to important information and allows you to quickly jump to your messages with that user. Another important feature is the ability to leave yourself a note for a specific rental period. If a user blocked out a few days, months in advanced, then canceled those plans… this helps them remember why those days were blocked and would help the user bring in more profit by reminding them to rent these items during that period.

Unfortunately. I wasn’t able to design the second view of the calendar in my time with Yoodlize as we decided it wouldn’t be making it to the MVP. I briefly described my ideas with them and mentioned that it would be a necessary feature to include in a future release.

Pain Point #2: Search Feature

One large functionality that I was getting stuck on was the search function. Since Yoodlize was a limitless platform, how was I going to portrait all the categories, sort parameters, items, and a map in a visually appealing and easy to use page? I dabbled with a few different options that ended up taking up too much real estate.

First option was to have the search, sort, and categories on the left side of the page. The categories and sub-categories were in dropdown boxes, this created a lot of friction due to the fact that we could potentially have a lot of categories. No one wants to scroll through endless options trying to find what they’re looking for. With this option there was two rows of item cards in the middle and on the right side of the screen was a map. To make everything fit the item cards were pretty small, and the map was narrow. This option wasn’t going work.

The second option I came up with was to have the search, sort, categories, and map take up the top half of the screen. On the left was the search, sort, and categories. The categories and sub-categories were similar to the first option and were in dropdown boxes. The map took the top-right quarter of the screen. This option allowed for slightly larger item cards which was nice but the visual emphasis on the screen was the search area and the map. This took away from the importance of the items the user was searching and still took up too much real estate on the screen.

The third option, and not the last, was similar to the second option. The search area stayed in the same place but what changed was the map. I moved the map below the search area. This meant the left half of the screen was taken up by the search options and the map. This allowed the item cards to become larger, again bringing more importance to the items. With the items taking up the right side of the screen, it was visually more present to the user and it was easy to navigate between search and browsing your results. But, the search area was still taking up too much space and I needed another option.

The fourth and final option, was quite a bit different. I placed the map on the right side of the screen and it extended from top to bottom. This gave the user a larger map to easy search items closer to them. The biggest change though was the search, sort, and categories section. Instead of placing this information in a box, I created a second navigation just under the header. In this secondary navigation bar, I placed the categories, sub-categories, filter options, and sort options. Then I placed the search bar and location just above the first items on the left. This method allowed me a larger map, larger item cards, and an easy to use search function. The visual hierarchy changed from the search and map function being the user’s first focal point to the items available.

Homepage

Yoodlize is all about helping users Experience more! That’s why we based the entire homepage on experiences. The hero shot will always include someone doing a really fun activity such as: surfing, camping, skiing, riding a dirt bike, etc. This inspires users to go out and try these activities and we provide a platform where they can rent the necessary items. As you scroll through the categories on the homepage, it was designed to spark the users imagination on the limitless possibilities! Inspire them to finish their DIY project, throw an epic birthday party, be unpredictable, or create something new.

We pull items from different categories and feature them in these 5 categories on the homepage.

1. Imagine
2. Work
3. Play
4. Create
5. Live

Homepage scroll flow that shows Experiences and Category sample

Listing an Item

At first, listing an item seems simple enough, you just add your description, upload a couple photos, and you’re making money. However, our users needed a bit more than that. They needed to choose the categories and sub-categories they were going to post this item in, write their title and description, upload photos, choose pickup/delivery options, blackout days, price, insurance options, and rental rules. That’s a lot, and how does the user know how to get the most out of these options?

To answer this, I decided to walk the user through this step by step with tips on how to get their products recognized. They also have the option to skip the process and go to a single page with all the information needed without the tips. This is good for users that have posted before and don’t need any help to optimize their posting.

Sample of the first few steps of listing a product

Animations

I created a couple animations in Principle to show the movement for the search bar on the homepage and for hiding the map in the search section. The search bar animation is really cool but after talking with my developer the implementation was going to be difficult and definitely wasn’t making it to the MVP. I wanted the search function to always be available no matter where they were on the screen.

Initial Animation of the Search function

The map animation was easier to animate and would be relatively easy to implement.

Below is a link to my InVision prototype. Please go through and play around. Feel free to let me know if I missed anything or if you have any comments on the project.

Click here to view the project `Yoodlize`

Success

Success to me will come when this site launches in January 2019. To finally see my designs come to life in the wild will be amazing. I really enjoyed working with the Yoodlize team on this project and I want to thank them for giving me the chance to show off my skills. I am very pleased with the designs I came up with in the short period of time I had working on the project.

Lessons Learned

1. Scope Creep. This was my first real project since I graduated from DevMountain. I was really excited and didn’t know what I had gotten myself into. Mainly because I didn’t know the right questions to ask during my initial meeting. I thought 4–5 key pages and a few extra supporting pages would be relatively simple and quick, but I just didn’t dig deep enough to realize how much each page would require. For future clients, I will have a more in-depth discussion on what is needed and write these out so everyone is clear on expectations. And most importantly, this will help me give an honest timeline that will allow me to deliver a great product while staying within the clients budget.
2. Process. In school we were taught to follow our process to make sure you are designing the right product. Sometimes you can’t go through your process entirely due to budget, timeline, etc. In these times you need to improvise and pick and choose methods to validate your designs. This took me a little bit to realize, and when I did I validated many of my designs by looking at other products that have been built on the peer-to-peer business model. But from my experience, every possible moment to get real data from potential customers would have benefitted us greatly.

If you’re based in Utah, go check out yoodlize.com and start renting gear!

Thanks for reading! If you like it, clap away! If you want to talk further, connect with me on LinkedIn or go visit my portfolio page at nathanmaus.co.