UX - Responsive Website Work
My capstone project was to design a responsive website for finding rental homes. For fun, I added emphasis on using high fidelity photos, beachside properties, and tiny homes.
This design project was completed using Adobe XD. Case Studies 1 and 3 were designed with Figma.
CASE STUDY #1 and CASE STUDY #3
01
Gypsea Go Rentals
The Gypsea Go rental finder website is based upon young professionals, artists, and travelers, as well as young families who can and want to move around frequently and experience unique and memorable locales. Many of them are remote workers, artists, and entrepreneurs.
02
The goal and the problem
GypseaGo is as much about celebrating the lifestyle as much as it is a logistical tool for finding a rental.
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template].png](https://static.wixstatic.com/media/ed3c97_5961e6bff03e49a5850948a2ac24b81e~mv2.png/v1/fill/w_487,h_274,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D.png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (1).](https://static.wixstatic.com/media/ed3c97_bce149cc36a54f9aa4ce493813e93045~mv2.png/v1/fill/w_419,h_236,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(1)_.png)
03
User Research Summary
With the changing landscape from the pandemic and the Great Resignation phenomenon, more and more people are working remotely - allowing them to be highly mobile and transient. This significantly opens up their options to telecommuting from anywhere and has put historical added pressure on the real estate industry. I wanted to create something that combines the best of home buying and renting websites and Airbnb - truly making it an experience. With so many families choosing to relocate because they no longer “have to be in ______” - this service offers a rich experience with a unique experience-focus. Finding your next place should be an adventure - just like life!
04
Pain Point Identification
Channeling empathy, what do renters experience in the process of finding a place to live? What can we do better?
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (2).](https://static.wixstatic.com/media/ed3c97_d862dcd371634ea4a469d23dde3fe803~mv2.png/v1/fill/w_497,h_280,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(2)_.png)
05
Building personas
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (3).](https://static.wixstatic.com/media/ed3c97_71954ad4c59149c69b2d3c0cb26ac8c1~mv2.png/v1/fill/w_497,h_280,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(3)_.png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (5).](https://static.wixstatic.com/media/ed3c97_d371a223ed2349cf8c0ad05a88f5012e~mv2.png/v1/fill/w_497,h_280,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(5)_.png)
06
Starting the design process
From paper wireframes to a low-fidelity prototype - the process was smooth using Adobe XD's repeat grids and image paths.
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (6).](https://static.wixstatic.com/media/ed3c97_c4d01ce288cd40c2a5f094296ff22383~mv2.png/v1/fill/w_518,h_291,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(6)_.png)
07
Site Map
Much of the navigation would follow similar competitor websites, with a focus on higher quality, targeted UX.
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (19)](https://static.wixstatic.com/media/ed3c97_78c77e64002b48cc9bb18c68e53f62d6~mv2.png/v1/crop/x_329,y_0,w_631,h_540/fill/w_409,h_350,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(19).png)
08
Paper wireframes
The wireframing process helped layout what should be above the fold and initial focus.
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (20)](https://static.wixstatic.com/media/ed3c97_a227bb9187ad460092a855d83fd50e11~mv2.png/v1/crop/x_1,y_3,w_958,h_537/fill/w_555,h_311,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(20).png)
09
Paper wireframes
It was easy to go from web to mobile once I had a solid understanding of the most important features and aspects.
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (9).](https://static.wixstatic.com/media/ed3c97_38191435da614cea8bddc51ad40a76a3~mv2.png/v1/fill/w_418,h_235,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(9)_.png)
10
Digital wireframes
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (10)](https://static.wixstatic.com/media/ed3c97_4d4495065d5b4a0cb0307fb89c54faa7~mv2.png/v1/fill/w_418,h_235,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(10).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (11)](https://static.wixstatic.com/media/ed3c97_7f5dfced7087480fbe9e77908edefc37~mv2.png/v1/crop/x_379,y_0,w_580,h_540/fill/w_445,h_414,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(11).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (12)](https://static.wixstatic.com/media/ed3c97_41af1f6b35da467f9e3378ce8e3594ad~mv2.png/v1/fill/w_497,h_280,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(12).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (21)](https://static.wixstatic.com/media/ed3c97_5ceaab09e6284b9e8b659d35735d105d~mv2.png/v1/fill/w_497,h_280,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(21).png)
14
Mockups
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (14)](https://static.wixstatic.com/media/ed3c97_f82341a735a94bc58d086179f7df8fc5~mv2.png/v1/fill/w_456,h_257,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(14).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (15)](https://static.wixstatic.com/media/ed3c97_2fb2878171d8425aa18b6011f98eeb73~mv2.png/v1/fill/w_456,h_257,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(15).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (22)](https://static.wixstatic.com/media/ed3c97_511b24f92cf24e12b1c97ab37cbb735e~mv2.png/v1/fill/w_456,h_257,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(22).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (23)](https://static.wixstatic.com/media/ed3c97_d91e0290d2fb4f58bc19a41d2a2f20b1~mv2.png/v1/fill/w_456,h_257,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(23).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (16)](https://static.wixstatic.com/media/ed3c97_76782f730de34a18ad1f0da2900e9056~mv2.png/v1/fill/w_546,h_307,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(16).png)
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (17)](https://static.wixstatic.com/media/ed3c97_79f2b2644d8b427ab11462d576bdd157~mv2.png/v1/fill/w_546,h_307,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(17).png)
17
Takeaways
18
Next steps
![Google UX Design Certificate - Portfolio Project 2 - Case study slide deck [Template] (18)](https://static.wixstatic.com/media/ed3c97_03312642e8994933a2945203ba8f9e1c~mv2.png/v1/fill/w_546,h_307,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Portfolio%20Project%202%20-%20Case%20study%20slide%20deck%20%5BTemplate%5D%20(18).png)