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.
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.
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.
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.
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.
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)
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.
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.
