Space

Mockup of various devices showing the product listing screen from Space web app.

Overview

This piece is a responsive web app I designed for a course project where the brief was to create an online store. Space is a conceptual furniture store that offers modern, minimalist home furnishings. The problem I was aiming to solve was the frustration of trying to buy furniture in physical stores. It takes too much time, and it can be challenging for consumers to find what they need. I wanted to build a web app that would be incredibly simple to use, with intuitive navigation and minimalistic layouts. The ultimate goal of this is to make it easier for people to find and buy furniture that they love.

I was the UI/UX designer for this project. I came up with a brand name, designed the logo, and built a complete set of Brand Guidelines. I then created user flows and a user flow diagram, sketched low-fidelity wireframes, and created digital mid-fidelity wireframes. I also did user testing and then built high-fidelity screens and mockups. I worked on the project from mid-March through mid-May 2021.

My Process

Research

I started by defining the problem and doing research. I combed through furniture sites like Ikea, Wayfair, AllModern, and Rove Concepts. I analyzed the UX and UI of the sites and made notes about what seemed to work and what didn’t. View the research analysis spreadsheet PDF.

Screenshots from Ikea and Wayfair websites layered on top of UI/UX analysis spreadsheet.

Branding

I chose the name Space to communicate simplicity and spaciousness. I designed the logo with the same intent, so it made sense to create the letterforms with simple geometric shapes. I also used negative space and symmetry to give it a minimal yet eye-catching look. My vision for the color palette was neutral tones with teal accents applied sparingly for maximum impact. I compiled these and other elements into a brand guidelines document. View the full brand guidelines document PDF.

Space logo and multiple pages from brand guidelines document.

Ideation

Once I had established the brand, I started defining the UX foundations of the product. I chose my primary user stories from the list included in the brief and ran a task analysis to determine what screens I would need.

Building on this, I created user flows and a user flow diagram. (View the user stories and user flow diagram PDF.) The project parameters required me to choose a single user flow to design, so I had to narrow my list of screens down to the essentials for that flow.

Primary User Story: As a returning customer, I want to see my purchase history so that I can easily order items from the same collection.

User flow for purchasing a matching product based on purchase history.

I started sketching and then switched to digital to create mid-fidelity wireframes. I sketched out ideas for the mobile screens first so I could refine my concepts. Then I sketched the other breakpoints as well before transitioning to digital wireframes.

Sketches of multiple mobile screens: home, account, listing, checkout, cart, and order confirmation.

Wireframe

Once I finished sketching, I switched to digital to create mid-fidelity wireframes. I turned these into an interactive prototype and used it to perform usability testing so I could catch UX issues early on. After analyzing the feedback I received, I refined the mid-fidelity wireframes into high-fidelity. I continued to refine with the help of feedback from my mentor until I had a set of final high-fidelity screens. View a breakdown of the changes I made (opens in new tab) to the Home and Product Listing screens as I progressed from mid to high-fidelity.

Progression of home screen wireframe from mid to high-fidelity.

Design

In total, I designed 15 screens per breakpoint. Since the project brief limited me to just one user flow, I chose to build one that includes screens and patterns that I haven’t explored in previous projects, like purchase history, shopping cart, and checkout. View all of the screens. (opens in new tab)

Various final screens from Space web app.

Mockups

I created a set of mockups to show the final screens. I used a space/galaxy theme as a play on the brand name. The rich, dark colors really let the light and airy interfaces shine. View all of the mockups PDF.

Mockup of small and large iPads, showing different responsive layouts of checkout screen.

Conclusion

Shopping for furniture in stores can be overwhelming compared to shopping online. However, using the websites of corporate giants like Ikea can be just as overwhelming as shopping in their stores. I created a product that would serve users more effectively by providing a simple, streamlined purchase experience.