Mayfield Furniture is a fictional business selling affordable high-end design furniture in Ponte Vedra Beach, Florida.

Mayfield wants an e-commerce website and mobile app for people to browse & purchase furniture for home delivery.

E-commerce Website & Mobile App Design

My Role: This is a solo project in which my responsibilities included:

  • Personas
  • Competitive Analysis
  • Wireframes
  • High Fidelity Prototypes
  • User Interface Design
  • Design Systems

My Tools: Adobe XD, Illustrator, Photoshop, Google Suite

Timeline: 2 weeks

Problem Statement:

Mayfield Furniture wants an e-commerce website and mobile app for people to browse & purchase furniture for home delivery. They are hoping that it will increase sales for their business to add this to their brick and mortar store.

Design Process

I was given a client brief at the beginning of this project. I created my website and mobile app designs based on the client brief and research of comparable businesses and their affiliated websites.

Personas

I was given the following persona for Mayfield Furniture. The website and mobile app is designed with Theresa in mind.

Theresa - Age (54) Empty nester, middle class mom of 4 college students

Competitive Analysis

I conducted a comparative analysis on the websites of two of Mayfield Furniture's competitors.

Establishing Goals

After the competitive analysis was completed, I then established some goals, constraints, and risks based on the client brief I was given for this project.


Scope & Constraints

Must be included on home page:

  • Search Box
  • Hero Slider
  • New In Store
  • Inspiration Ideas
  • Clearance Deals

Must be included on category page:

  • Most Popular
  • Full Product Listings
  • Sort by: Size, Price, Name
  • Inspiration Ideas

Must be included on product page:

  • Description
  • Details
  • Price
  • Available Colors
  • Related Products

Must be included on every page:

  • Logo
  • Top Navigation
  • Footer

Risks

The biggest risk determined at this time, is that the company could lose money, if the sales don't increase as expected.

E-commerce Store Wireframes

I then used Adobe XD to create wireframes of the home, category, product, contact, shopping cart and checkout pages.

Home Page

Category Page

Product Page

Contact Page

Shopping Cart

Checkout Page

Design System

I then did some more searching to get design inspiration and I curated the following mood board and then created the design system for Mayfield Furniture.

Mood Board

Colors

Typography

Iconography

Buttons

E-commerce Store High Fidelity Protoypes

I then created the high fidelity prototype in Adobe XD for the e-commerce store and the mobile app.

View Store Prototype

Home Page

Category Page

Product Page

Contact Page

Shopping Cart

Checkout Page


Mobile App High Fidelity Protoypes

View App Prototype

Landing

Home

Category

Product

Shopping Cart

Checkout 1

Checkout 2

Checkout 3

Success

Login

Sign Up

Lessons Learned

  • I really learned a great deal by completing this project. Designing the store and the app in Adobe XD really sped up the process.
  • In retrospect, I would have conducted more user research and usability testing , although the client brief did not ask for it in the the deliverables.

View Store Prototype View App Prototype

Interested in Working Together?

I am currently seeking full-time permanent REMOTE positions. However, I am very willing to relocate to the DC Metro area, Austin, Texas or internationally for the right opportunity! I am not interested in part-time, freelance, contract, or temporary positions.