Feather

Brown UI/UX Course
Team: Mimi Fang, Jinny Rim, Ivy Lim
Timeframe: 3 weeks

We created an app for Feather, a service that provides stylish furniture at affordable prices.
You can preview the app here

Problem

Audience

Solution

Consumers no longer have to spend hundreds of dollars on furniture, only to find it doesn’t fit in their home. The hassle of shipping or buying new furniture will also disappear, and it will be easier than ever for people to revamp their decor.

Millennials, or 20–35-year olds. Homeownership has decreased over the years. Not only are housing costs and student debts higher than ever, millennials are more likely to rent, live with relatives, and flock to city centers.

Feather will help people access stylish and high quality furniture at low costs.
Reference

Sketches
I focused on the how to maximize sales by highlighting promotional deals and furniture combinations. It uses larger images that highlight individual products for the promos. Then there are screens for different rooms that use a grid layout. Later, I decided to combine the furniture sets and promos into one screen. This set also includes a login and sign-up page.

High Fidelity Prototype
We decided to use the Open Sans for its legibility and clean sensibility. The main colors, red and white, are meant to be eye catching, and we decided to add the light teal as a highlight color for more minor elements, badges, icons, etc. We used a flexible grid system consisting of 6 columns so as to accommodate for 2- and 3- column layouts. The main navigation is located on the bottom so as to always be within reach.

Landing Page
New and existing users will land on this screen. They will see promotional deals and combinations to quickly visualize their rooms.

Rooms Tab

Finding a coffee table
Typically users would search by room and find the table needed. After selecting a category, which in this case are coffee tables, a product can be viewed further and added to the cart.

User Testing/Questions

To test our product, we used UserTesting.com for our research. We hypothesized that users would search for furniture by room rather than search bar. We also believed that they would be able to complete all the tasks without difficulty and without having to search for required screens—in short, that we had organized the app in such a way that everything would be where a user would expect to find them.

For our tasks, we wanted to see how users would interact with the key screens, such as the search, browse, cart, and checkout.

1. Rent a table for your living room. Checkout. Proceed to the next task.
2. View your current furniture rentals, and review your previous rentals.
3. Were you able to easily navigate around to find your desired furniture? If not, please explain your answer (e.g. text hard to read, confusing layout, etc.)

User 1
User 1 was unable to complete Task 1 to find and rent a table because there were inconsistencies with the details of our prototype. For instance, the filler items used in the Add to Cart flow was different than the filler item used in the cart and checkout flow, which confused the user. However, she was able to find the table and view its details with ease. On the other hand, we had hypothesized that a user would be more likely to search for items by department; User 1 instead used the search bar. For Task 2—view current and previous rentals—she went directly to the Account screen as we had expected. However, it took her some time to find the Your Orders tab because she had expected to see it in the main body of the Account screen rather than the header bar, which had until then only been used for the search bar and screen title.

User 2
Unfortunately, this tester was unable to complete any of the tasks because of technical difficulties. Part of the screen was cut off from the bottom, thus obscuring the navigation bar, and several screens were severely stretched. He was, however, able to add furniture to his cart since the Add to Cart button sits closer to the center of the screen. We wonder if this was due to the tester’s computer screen or a Figma glitch.

User 3
Like User 1, this user also used the search bar to find a table rather than the Rooms screen as we had originally imagined. Though she was able to add items to her cart without difficulty, she struggled to access the cart and checkout due to the button on that screen of the prototype being incorrectly linked. She was also confused by the inconsistent use of filler items between the Search/Add to Cart flow and the Checkout flow. However, she was able to complete Task 2 quickly and effortlessly. Both User 1 and User 3 had immediately and correctly assumed that previous rentals would be under the Account screen, but unlike User 1, she saw the Your Orders tab immediately.
In the future, we need to be more consistent in our choice of filler content. We will also need to be more careful when collaborating to ensure version control and ensure that everything is correctly linked.

Janice Park

About, Resume, Contact

Ray Eames