Five months and six courses into the Google UX Design career certificate, I was faced with an exciting new solo UX challenge: to design a responsive website on Adobe XD. Prior to this, I had only done UI/UX projects on mobile app design working primarily on Figma, so the task of learning a new software to design a website that adjusts to various screen sizes was a refreshing challenge- one that allowed me to hone my skills further and enrich my understanding of the design process.

For this personal project, I decided to create a website for a hypothetical apartment rental business that rents spaces to students and fresh graduates. This was an idea largely inspired by airbnb.com (a website I truly enjoy using which boasts an impressive design system and a thoughtful user experience) and my current situation of being a recent graduate hopping from one state to another in hopes of kickstarting my career.

The User Problem

Students and fresh graduates constitute a unique user group with unique needs as renters in the housing market. They want stays that are affordable, catered to their lifestyles as young professionals launching their careers (or studies), and with minimal barriers to entry. Unfortunately, many existing online rental services and listing websites are either too expensive, require credit histories which students and fresh graduates typically don't have, or have minimum lease duration requirements which can be restricting for those that don't want to commit.

Though airbnb.com seems to be the best option for users looking for short-term stays with low commitment, it lacks two things for our focused user group:

1. Guaranteed low pricing: As airbnb focuses more on short stays and tourism, prices for the majority of listings exceed the monthly rent for a leased apartment.

2. Communities and community living: There is no guarantee that other renters in the same circumstances as yourself are living nearby.

Furthermore, it limits renters to short term stays, forcing individuals that need longer rents (over 4 months) to leave the site and look to alternative apartment rental websites for their stays. On those websites, users face problems when the minimum lease duration on most apartments is 1 year.

The Goal

The goal was to design an apartment rentals website that exclusively targets students and fresh graduates, providing them with affordable non-restrictive housing solutions and communities of fellow students and recent graduates.

There were two questions I needed to keep in mind during the early stages of my design process:

1. How can I make sure that my designs appeal to the specific user group (students & fresh graduates)?

2. How can I make sure that the biggest concerns for my user group (affordability, lease requirements) are addressed clearly and effectively?

My role:

Lead UX designer, UX researcher, & product owner

My responsibilities:

As the sole owner of this project, I was responsible for the entire end-to-end design process: user research, ideation, wireframing, prototyping, user testing, UI design, interaction design, motion design

User Research

To understand the biggest pain points experienced by my target user base, I enlisted the help of 4 recent graduates (class of 2021 and 2022), as well as 8 current students enrolled in a bachelors' degree program to complete a short survey on the subject of housing and rentals.

Through these short online surveys, I arrived at this list of the most pressing issues that this user group faces when looking for properties to rent:

1. Affordability: Cost of the rent was cited as the biggest concern faced by our user group, and price was rated as the most important filtering category.

2. Minimum requirements to lease (incl. credit card, credit history): After the price, the next biggest concern expressed by the survey respondents were minimum leasing requirements. Most listing sites set a minimum lease duration of 12 months, which most students found to be too long. Listing sites often also require proof of credit history and only accept payment by credit card, which many students don't have.

3. Safety concerns / landlord and area: This was a new insight gained from the conducted surveys. Out of the 12 users surveyed, 5 brought up the concerns they had for safety and trust in the listing or the landlord. This is a particularly big issue when a listing has few or no reviews left by previous residents.

Below is the consolidated empathy map for my user group based on the initial survey:

Competitive Audit

I drew a lot of the inspiration for my designs (and the business model itself) from airbnb.com. As such, airbnb.com was the competitor website I referred to the most while working on my designs and figuring out the features to include.

While looking at other competitors (all indirect, since their target users are not specifically students or fresh graduates), I noticed many similarities and standard practices shared across apartment rental websites. For example, the 'search results' page always has an interactive map of the area, allowing users to specify the exact radius or map to search for apartments in.

I recorded my observations from the competitive audit in the table below, and used it to take note of best practices for rental websites, and the current gaps in the market where users experience the pain points outlined earlier.

Ideating Features to Address Pain Points

With the competitive audit complete, I set aside a list of all the necessary features to include in my designs and made a note of which elements to borrow from the competitors analyzed. For example, I really liked the large search bar that apartments.com uses on their homepage, as it draws the user's attention to the ideal starting point for browsing apartment listings.

To set my designs apart from the competition, I conducted a Crazy 8's exercise to brainstorm some innovative additions to my website:

The ideas from my Crazy 8's exercise formed interesting solutions to the user problems which I otherwise might not have thought of. These were the 8 ideas I came up with in this brainstorming exercise, each serving to address a gap in the market.

1. Profile Verification for Users as Students/Fresh Grads: In order to emphasize that the service is indeed exclusive to students and fresh grads, I wanted to add a verification section in the user's profile through which they can prove their status as a student or recent graduate by Student ID or proof of degree certificate.

2. Student-Specific Additional Options for Filtering: Students and early career professionals have specific needs for comfortable living. For this reason, I wanted to add additional filtering options such as "quiet hours", "designated work space", "party friendly" and options to filter listings with nearby internet cafes and libraries.

3. Roommate Match: Currently, there are no apartment listing websites that also allow you to look for a roommate that matches your profile. I wanted my business model to include a roommate match feature which matches users looking for roommates to others with similar profiles. This would motivate users to fill out their own profiles with details that'll not only help them find better matches, but will also help landlords and hosts get to know them. This feature could be in-house or in partnership with an existing website for roommate matching such as roommates.com.

4. Different Living Arrangements: Including 'whole place to yourself', group rent, and private room within a communal apartment. Group rent and communal apartments are common options chosen by students.

5. 'Get to Know Your Host' (Host/Landlord Profile): This idea was inspired by Uber's driver profiles, which was a feature they introduced in 2017 allowing riders to view details about the driver and feel more secure riding with them. Host profiles would target the user pain point of safety concerns and lack of trust in rental listing.

6. 'What's Nearby' Feature on Listing Page: An integrated map highlighting all nearby eateries, facilities, grocery stores, and transport stations would be displayed on each apartment listing page.

7. Public Transport Services: I decided to leave this idea out of my final designs, as it is far more of a business-specific decision rather than a design or UX feature.

8. Other Features on Listing Page: Such as a section titled 'renters like you also viewed', or similar apartment listings, and flexible payment methods like installments.

Wireframe Sketches, Site Map & User Flow

With the ideation stage complete, I was prepared to start sketching paper wireframes for my website. I came up with 3 alternate homepage designs- some more functional and others more aesthetically appealing. The first row of paper wireframes below depict these 3 designs:

For the 'Explore' and 'Apartment Listing' pages, I drew inspiration from airbnb.com and other apartment listing websites which all feature an interactive map allowing the user to select the map radius within which to find apartments in.

While sketching the wireframes for the various pages on my website, I also wanted to visualize how these pages would be organized within the site, i.e. the hierarchy of information and which navigation tabs to include.

I wanted as few navigation tabs as possible, so I made 'search' into a search bar, and 'profile' into the user's profile pic as an icon. I also chose to make 'Inbox' a floating icon on every page (similar to a chatbot accessible from any page). That left me with just 3 navigation tabs to include in my page header.

I conducted a quick card sorting exercise which brought me to this final sitemap for how my information would be organized:

The main user flow for booking an apartment or temporary stay is a relatively simple one, involving just 4 pages: Home, Explore (Search results), Apartment Details Page, and Request to Book, pictured below:

Digital Wireframes & Low Fidelity Prototype

With my sitemap complete, user flow defined, and paper wireframes sketched, I moved on to digital wireframes so that I could build a low fidelity prototype and test it with potential users.

In the screenshots of my digital wireframes below, I labelled all the elements that I came up with during the ideation phase. Things such as the large search bar, interactive maps, 'What's nearby' section, and reviews section all work together to improve the user's experience and make them feel secure in their transaction.

Usability Study on Low Fidelity Prototype

With my digital wireframes and low fidelity prototype ready, I wanted to test my designs out with potential users. For this, I recruited 2 of my recently graduated friends, a current undergraduate student, as well as my older brother (a recent graduate currently hopping cities in search for research roles) to take part in a moderated usability study.

Three of the studies took place over an online zoom call, whereas the fourth took place in person. Each participant was given a single task to complete:

Find an apartment in your desired state/city, and book a short term stay. All participants were sharing their screen while completing the task, allowing me to take notes on their click path, error rate, and ease of navigation through the intended user flow.

There were 4 questions that my usability study intended to answer:

1. Is it easy and familiar to search for, filter through, and book an apartment through the website?

2. Do my designs address all of the concerns that renters may have while searching for and booking an apartment? Do they still have trust issues, security concerns, and doubts?

3. Are there any blockers or areas where the user gets stuck or makes errors?

4. Does my website address the gaps in existing apartment rental sites such as airbnb.com and apartments.com?

The KPIs used to measure the usability and effectiveness of the designs were:

1. Time on task

2. User error rates

3. Completion rate (%)

With 4 usability studies completed, I started the process of synthesizing the feedback to retrieve insights and action points. As a bonus, I threw in one more usability study with a fellow UX designer as I felt like I could get valuable insights from someone who has been designing user experiences professionally for some time. These bonus insights are depicted in the yellow sticky notes below:

Given that the user flow was extremely simple and followed existing conventions for apartment rental websites, all 4 participants completed the study with ease and without any hiccups.

Most of the insights suggested minor changes to the UI- however, these minor changes do make a big difference to the user experience, and as such, I have detailed them below to include in my high fidelity designs:

1. Move-In Date: In my initial wireframes, I made a small oversight in tucking the 'move in date' input field into the filters window. This is not visible to users immediately, and caused 2 participants to wonder out loud where they can specify this. I decided to include this input field as a calendar dropdown on the explore page, not tucked away under filters.

2. Search Bar Hint Text: One of the study participants expressed that they thought the 'featured apartments' on the home page were related to the hint text in the search bar. To prevent this confusion, I made the hint text a lighter shade of grey (#ACA5A5) and added a 'e.g.' to the start so that it now reads "e.g. Memphis, Tennessee" making it more obviously a hint/suggestion.

3. Featured Apartments + Best Value Section: There was expressed confusion over what exactly makes an apartment 'featured' or 'best value'. As these titles are vague, I decided to add an information icon besides these headings that have an 'on-hover' interaction allowing the user to see an explanation for these modules.

High Fidelity Designs: Building Fresh Start's Design System

While working on the early stages of this project, I already had a design direction in mind for the branding of my hypothetical business. What I had imagined included a combination of:

1. Sanserif fonts

2. Rounded edges for all rectangles, buttons, and boxes

3. White as a base color forming 80% of the page, with just 1 single darker-contrasting color to complement it (such as a dark purple) for call-to-actions, headings, checkboxes, button active states and selections.

Colors and Logo

With the above design direction in mind, I experimented with various shades until I settled on a dark purple shade (#553675) as my primary contrast color over the pure white base, and a bright orange (#FF7426) as an accent color used very minimally throughout my designs.

With these, I designed a logo for Fresh Start Apartments, utilizing a sanserif typeface (Arial Rounded MT Bold) for its friendly rounded edges and an icon of a home which immediately tells the user what this website is about. I also decided to include the word 'apartments' so that it's clear that this isn't a real estate website, and focuses on rentals only.

Purple serves as a great contrast to the white background (as well as a great base color for buttons with white text), but in addition, it is also symbolic of independence and luxury- attributes that resonate well with graduating students and early career professionals.

Orange on the other hand is a color we often see used as an accent color in logos like Amazon's, Laker's Basketball Team, and FedEx. Orange invokes feelings of optimism and sociability. As a color representing adventurism and social communication, it brings an uplifting energy to the darker purple.

While designing my mockups, I also added two more (sparingly used) colors to my palette: a light blue resembling cyan (#69F2DC) and a mustard yellow that ventures close to orange (#FFAA2A).

Below is the 'Get to Know Your Host' section from the Apartment Details Page that showcases the use of all 4 of these colors:

Typography

I wanted the tone of my brand to be friendly and modern, so I had pre-emptively decided that I would use a sanserif typeface throughout my designs. Eventually, I settled on Satoshi for headings and buttons (static text). For all other body text and dynamic text (such as apartment names, locations, reviews), I chose the sanserif font Segoe UI- regular. Finally, for text appearing in image graphics, such as the hero images on the homepage and information section, I chose the sanserif font Archivo- bold.

Below is a section of the Apartment Details Page showing all the typography used throughout the website designs.

Buttons & Sticker Sheet

As my primary brand color, this shade of dark purple (#553675) was used for all of the components- particularly those with a default and active state where the purple represents the active state toggled.

This screen capture of the filters depicts the default and active states of the various buttons, radio buttons, checkboxes, calendars and call-to-actions. In the case of all components with multiple states, the active state is represented by the dark purple fill with white text, whereas the default state is a simple white fill.

Breakdown of Each Page & Element that Enhances User Experience

Before long, I had finished designing the high fidelity mockups for my website. Below is a showcase of all the pages of the Fresh Start website, with a label describing each addition or feature that serves to improve an aspect of the user experience.

Homepage

Explore Page

Filters Pop-up Window

Apartment Details Page

Request to Book Page

Responsive Design: Designing for Mobile Screens

One of my main goals in undertaking this project was to practice designing for various screen sizes in order to have designs that are responsive to different devices. While working on the wireframing stages to the high fidelity designs and prototype for the Fresh Start website, I was simultaneously working on the same elements for the mobile website as well.

Mobile Wireframes

While designing my mobile wireframes, I had to make decisions about how to re-arrange content in the most optimal way for users so that they are guided to follow the ideal user path.

On my web designs, the navigation tabs lay across the top of the screen in the header. On my mobile designs, I turned this into a bottom navigation bar represented by icons. The 5 navigation icon slots were:

1. Home

2. Favorites

3. Roommates (instead of 'Find a Roommate')

4. Bookings (instead of 'My Bookings')

5. Profile

Although in my desktop designs the profile icon was in the top right of the screen, I decided to reserve this top right corner for the search bar. The search bar is arguably the most important element on the homepage as it is the ideal starting point for the main user flow. For this reason, it takes up so much space on my web designs. However, a mobile screen does not have enough real estate to fit a large search bar, so I replaced it with a magnifying glass icon (universally accepted to mean 'search') and placed it at the top right corner of the screen.

Mobile Mockups (High Fidelity Designs)

As I was finishing up the high fidelity designs stage for my desktop pages, I began working on moving these designs to the mobile screen (Google Pixel) size. This was a relatively easy task, given that I had already finalized my mobile wireframes and my style guide for the brand.

For the layout of my mobile designs, I drew inspiration from airbnb.com once again:

Full-length Home and Explore pages on Mobile

Below are the full-length homepage and explore pages of my mobile website designs.

On the explore (search results) page, I placed the interactive map on the farthest back layer, while the filters and apartment listings exist on a layer in front of this. As the user scrolls down the explore page, the map gets partially hidden in order to fit more listings on the screen at a time. This reduces the amount that a user needs to scroll in order to find the right apartment listing.

Bringing it All Together

I spent around two weeks tweaking my high fidelity designs and getting them to a point where I was satisfied with the overall look and feel of the website. I wanted to make sure that each feature I ideated earlier in the design thinking process was effectively integrated into my designs, and that my brand values and tone reflected correctly to the end user and maintained a degree of consistency.

Once that was done, I started working on assembling my high fidelity prototype. I decided to keep the motion design as simple as possible- using only a single type of transition between pages (slide-in from left to right), except for on pop-up windows such as the Filters menu and the booking confirmation message, which slid in from the bottom of the screen instead. With the help of Adobe's smart animate feature, my buttons, checkboxes and calendars (i.e. every component with multiple states) were able to transition smoothly between states.

As a final touch, I added 'on hover' interactions to the modules on the homepage, which serve to make the website feel dynamic and responsive to the user's actions and cursor path. Below is my final product, sped up to 170% of the original speed to fit this case study:

This project took exactly one month to complete, during which time I moved apartments twice and am now currently in another state to when I had started the project. Funnily enough, my current situation feels so relevant to that of the user group I was designing for.

Whereas my bouquet arrangement app designs (read: my first upload on Dribbble) served as my entry point into the design thinking process, by the time I started this project I felt so comfortable and familiar with the steps that it took shape in no time. What would have otherwise been a challenge to complete in one month with all that moving around turned out to be one of the most exciting (and personally relevant) product designs I have ever done. This was also the first time I have felt genuinely satisfied with my UI design and visual style choices. UI design is something I have been working hard to improve. Though I have a long way to go, I learnt that having references and a style guide in mind before embarking on the visual aspects really helps a design come together without hassle.