UX/UI Design, Web Development
Homey: a website designed for a fictional furniture chain to give consumers the ability to browse before buying.
Tools Utilized: Adobe XD, Adobe Dreamweaver, HTML, CSS, JavaScript, Adobe Indesign
Problem
Homey is a brick and mortar chain store that would like to engage in e-commerce. This website will give them the opportunity to sell their products online so they can stay competitive in the current market.
Goals
Homey should increase sales by 30% by opening up an online store and reaching a wider geographic market. In year 1, 20% of sales should be through the website and in year 5, online sales should reach 40%. The creation of this website also aims to minimize the amount of time people spend in the stores, since customers are able to begin their product research online. Consequently, salespeople will be able to service many more serious customers per day with the goal of increasing the percentage of purchases by in-store visitors from 50% to 80%.
Target Audience
The target audience consists of upper middle class couples aged 30-50 who have recently bought or renovated homes and are familiar with online shopping.
Persona / Website Scenario
Emma and Jeremy are recently married and are looking to furnish the living room of their new home. They go to Homey’s website to look at the black couches they have in stock and add the one they like to the cart. They also look to see what chairs and tables Homey sells that go with the black couch they picked.They head to the nearest Homey’s brick and mortar establishment, printout of their cart in-hand. Upon arrival, they meet with a salesperson who escorts them to the furniture so they can test it out.
Competitor Analysis
The first competitor I researched was Raymour & Flanigan. One of the strengths of their website is its color scheme. Both the images and text were gray, purple, and green. Another is that the Calls to Action are short and descriptive and there is good contrast between the words and the background. A drawback of their website is that the logo does not match the typography theme of the site, as the logo is serif while the site content is san serif. Additionally, there is not enough whitespace in the site and the navigation bar has too many elements.
The second competitor site I looked at was Wayfair’s. Their website is attractive because all of the colors on the site are consistent with the logo colors. However, the content feels cramped and there is little whitespace in many areas. Moreover, some of the pages loaded slowly, preventing the page content from being immediately displayed. I took these observations into account when designing my site.
Content Outline and Site Map
Page #1: Home Page
Page #2: Products
Page #3: Individual Product
Page #4: Cart
Page #5: Contact
Page #6: Form Submission Confirmation
Logo, Favicon, and Typography
I am using a wordmark as my logo with the “h” of Homey designed to look like a chair so that it is representative of the furniture brand. I used a serif font because I want the brand to be associated with sophistication. I also want it to feel inviting, so I chose Didot, a more rounded serif font. I used the same typography for the rest of the site as well. I used the color blue for the logo because it represents security and trust. I want customers to have those feelings when the furniture enters their homes, the ultimate place of security and comfort. The favicon will be the h of Homey.
Website Colors
I chose blue as the primary color because, in addition to representing security and trust, it is the most well-liked color. The text is black since it has the highest readability. Gray is the secondary color because it also has high readability and is generally well-liked.
Wireframe
 |  |  |
|---|---|---|
 |  |  |
Production and feedback
Using HTML, CSS, and JavaScript, I developed the site. I realized that creating a cart and checkout feature involved more advanced programming and was not covered in the scope of the class I was taking. I was therefore advised by my professor to change my site to a gallery. I decided to have a contact page where consumers can request to see specific pieces in person, but not offer the capability of ordering online.
Proposed Solution
Below are some images from the finished website.
To experience the website on your browser, download html and related files (start with entry.html)