Spaces

a modern housing application

People want personalized and immersive experiences. They want something refined and meaningful. Thankfully, many businesses and groups are beginning to see the importance of these kinds of experiences. One of the very first projects that really got my mind working towards this direction was started in a Design Thinking course that I took a few years ago.

The final project was open to whatever we wanted to create and whether we wanted to do a group project, or something on our own. I decided that I wanted to complete a project on my own. As a student who was at the time attending Brigham Young University, I noticed that it was difficult to find housing each year. There was not a central place to find housing and the options that were available were not very easy to navigate or use.

The Journey Begins

So I began my quest! As I thought about the problem at hand, I knew that an app could be an effective solution to create. But I wanted to make sure that other people would feel the same way. To figure out what other students would want I began to interview different students that attended BYU. I also did research to figure out what options were currently available for finding student housing at BYU. Nothing was hitting the mark that I personally as a student would want, and after interviewing multiple other students, they appeared to have the same consensus.

I started making sketches and asking people in their interviews to sketch what they would want to have included in such an application. It was a lot of fun to see people share what they saw through drawing instead of just saying it.

While the interviews were happening, I was also doing some research of my own to find inspiration for the design that I would be creating. I loved the simplicity of Airbnb’s mobile app and specifically the icons that they used. I hadn’t use line icons much in my designs prior to this, but Airbnb made me change my mind to try them out. I was also inspired by Google’s Material Design system which I had been following for a few years.

With some of these ideas in mind, I started doing some sketching of my own. Some of it would definitely never get past the sketching phase, but it was good to be open and let myself explore the options.

After the research and sketches I had done, I started to create some higher quality versions in Adobe Xd. It was definitely a messy process since Adobe Xd was a new tool and I myself had only recently started using it. I have learned that this is often the case with a lot of projects and software. It can be a bit messy at first, but as you keep using it your process and skills are refined.

Once I had a workable prototype built I started testing it with students and a few others to get their feedback. I wanted to get feedback from some people who were not students since there would be apartment managers and possibly even others who would need to access the application. I had an idea that if I could make the platform grow enough in the future that I might be able to move it outside of the BYU community.

Feedback was very positive most of the time, and it was helpful when there was something that people didn’t understand or enjoy. I did both qualitative and quantitative research by having in person interviews as well as an online survey sent out. Although it wasn’t a huge amount of data, it was sufficient for me to get the results that I needed.

Although looking back on old designs almost always makes me laugh, it was amazing what I was able to learn throughout the entire process.

Click or tap below to try out the final prototype for the first version as seen above. I haven’t tested it out in a while, so hopefully it all still works! 🤞

The Redesign

After the Design Thinking Class was finished I came back to my prototype to refine them further. I learned through the research I had done that people actually wanted an application like the one I was working on, so I wanted to make it real for them.

It had been a few months since I last worked on it and although that seems like a short time, I had already learned a lot. I knew that there needed to be a lot of changes made to make it better.

The foundation I had created was good, but it was a bit too boxy and cumbersome to use. I wanted it to be more open and focused on each page so that the people using it could have a clear flow from one page to the next. Since I didn’t have any inspiration from other sources hit yet I started experimenting with any idea that came to my mind. I immediately started with the home screen and a few ideas came. It was amazing to me how many possible options I could experiment with just by being open to the possibilities. Things that I would have never thought to try out continued to flow into my mind for a while. Lots of the ideas I came up with would last only for a moment, but it always led to another possibility.

As I was experimenting I decided on the name for the application as it stands today: Spaces. It was simple and felt open which was a good fit for the brand and experience that I was trying to create.

Shortly after I created a more solidified design by updating the icons and opening up all of the content to give it more space, the Google Pixel 2 phones came out. It might seem very unrelated, but I was very inspired by the colors they chose to use on their phones. I was especially in love with the blue-gray color of one phone. I had never seen anything like it, especially not on a phone. But it felt good, and I wanted to see if I could use them.

Of course, they didn’t have a color swatch or hex code available for use, but I took and image and pulled the color out the best I could with the eyedropper tool. I also added a yellow color of my own as a secondary color. After giving the colors a try I found some fairly satisfying combinations. Using the blue-gray color as a background color was calming and made a somewhat stressful experience more relaxing and enjoyable.

Soon I had so many different options that I decided I needed to start narrowing down the best parts and bring them together. During this process I would sometimes go back to sketches, but I often find it better to create something closer to the desired end result using Adobe Xd. With sketches you can get a basic structure, but there are some missing pieces that you can only get from getting into the pixels.

To help me in narrowing down my options, I went back to the name of the app: Spaces. I wanted the content to reflect that name and the brand identity that I had chosen to build along the way. It needed to be open and spacious. Since so much of what was currently offered in the student housing market is either bloated with too much information or struggling to have enough, I also wanted it to be focused and clear for the people using it. It needed to be fun to use. The bright colors helped with making it fun, but redesigning the elements on screen is when it really started to work with the brand.

By continually asking myself what the most important elements were for each page of the app, I was able to start cutting down on unnecessary elements. Because one of the main purposes, if not the main purpose was to look for housing, the home screen became focused on that one action. Right when they opened it up, I wanted them to know where to start looking.

I also decided on 3 different themes (Ocean, Night, and Panda) so that it would be customizable to different people’s preferences. Having a few options for people to choose from makes the experience more fun.

Instead of checkboxes for the search screen, I decided to go with larger icons and to take the person on a journey of sorts, one step at a time. They would be able to focus on that one step and then move to the next easily. The results page became more focused on the main elements that everyone would want to see. Instead of trying to fit all of the content on the page at once, I added buttons for the people who wanted to explore options like the reviews in more depth.

I also built out the first version of the Messages section which I had not been able to explore in the initial project very much. I wanted to test out a new kind of messaging interface that broke the normal standards of a messaging interface. It would be a fun thing to explore and learn from.

The results that I got back from testing the Messages page was very helpful. It wasn’t too unexpected because there is a standard design for messaging apps that has been created throughout the last few years. Since the design I came up with was different, it was confusing for people to use and they didn’t like it very much. Although these standards and conventions can change, it is often not an easy process to do because of all of the conditioning that we have already had through the years. Plus, if something is working well, then there may not be a need to change it, even if I want to. These were important lessons for me to learn.

Moving to the Present

Although I initially liked the colors a lot and they moved me in a good direction, they began to clash a bit too much for the design and I wanted to separate them from Google’s colors. So I tweaked the colors just a bit to come up with what they are today.

I kept the same 3 themes, but improved them to work better together and on their own.

Then a few months ago later my brother asked if I would be interested in continuing to work on it with him. He was getting close to graduating in Information Systems and he had learned a lot about databases and app development. We felt like we could bring it to life like I always had wanted!

A lot of the changes go through a similar process to what I have already said, and it’s a lot more enjoyable to try it out yourself! So I’ll stop writing here, but if you ever want to learn more about the project, I’m always happy to chat. Interact with the prototype below by tapping or clicking. Since it's a prototype, not everything is functioning like I want yet, but it's constantly improving. I would love to know any issues that you run into! Here’s to hoping this can become a reality!