Light up your home with Aeris.
UI & Brand Design
Aeris is an e-commerce web app designed to help users find the perfect home decor to light up their homes.
Context & Role
Aeris was created as part of a student project for Career Foundry to design an e-commerce app. I served as UI & Brand Designer.
Design Problem
Build a cohesive brand & UI design for an e-commerce web app for users to find products that match home decor needs quickly and easily.
Duration
3 weeks total
Branding
Aeris believes the experience of our home interior is crucial to our happiness. Just like copper conducts electricity to produce the light in a light bulb, we believe home decor conducts the experience in our homes.
The word Aeris can be translated to copper in latin. Light up your home with Aeris.
Guiding Principals
Logo
To create the logo, I iterated through many variations. I decided to have the logo and name of the web app reference copper since it is used in home decor and wiring
The logo should either be the full image of the lamp and name or just the lamp. It should not be stretched.
Color
To embody the elegance and vividness of Aeris, a dark blue and purple were chosen as the main color to be complimented by the copper orange in the logo and a light grey.
Typography
For the logo, I wanted a modern looking font with a nod to typewriters, so I chose Josephine Slab. Josephine Slab is only used in the logo.
For a clean, easy to read font for the interface, I selected varying weights of Roboto.
Ideate
User Stories
To design with users in mind first - several user stories were selected.
1. As a new customer, I want to access the inventory without having to register, so that I can make sure this store has what I’m looking for before having to create an account.
2. As a returning customer, I want to be able to save items that I cannot buy to a wish list, so that I can purchase them at a later date.
3. As a customer, I want to be able to see when stock is on sale, so that I can save money.
4. As a customer, I want to have access to advanced filtering options, so that I don’t have to browse through a lot of products to find what I’m looking for.
5. As a customer, I want to see what other customers have said about products and how they have rated them, so I can better judge whether the item is right for me.
User Flow Diagram
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
Testing
To ensure the design would meet the user’s needs, I tested the user flow of adding an item to a favorites list. I conducted two types of user testing:
1. Useberry: Twenty participants completed a scenario based user test that recorded video, heat maps, and other data.
2. In-Person Testing: In-person scenario based user tests, where I provided two participants a scenario based task. I asked them to share their thoughts out loud while completing the task and took notes.
Useberry
Users were asked to complete the following tasks:
1. You are a customer looking to purchase a vase in the price range of $100-$200. What steps would you take to conduct your search?
2. Now that you've found some options, please navigate to a product page and save it to your favorites.
I was also able to collect heat map results.
From the heat maps I identified three major patterns:
1. Many users were inclined to select the search bar on the home page to find the product
2. The filter icon was difficult to find or identify based on the amount of exploring on the category page.
3. Users could not find the heart on the detailed product page to add the item to their favorites.
In-Person Testing
The in-person testers were given the below prompt and asked to share their thoughts out loud as they navigated the prototype:
You are a regular user and would like to find a vase for sale between $100-$200 and save it to your favorites. Which steps would you take to accomplish this task?
“So user friendly!”
“I didn’t recognize this icon to represent the filter options.”
All users were able to navigate the app to successfully save a vase to their favorites.
User Testing Results
Final Design
After collecting the results of my user testing, I made changes to my mid-fidelity wireframes to address the pain points. I then applied my branding to the screens to create high-fidelity wireframes.
