Persona
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.
ABOUT THIS PROJECT
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.
TIMELINE
2 weeks
MY ROLE
- Personas
- Competitive Analysis
- Synthesizing Research
- Design Systems
- Low Fidelity Wireframes
- User Interface Design
- High Fidelity Protoypes
MY TOOLS
- Adobe XD
- Adobe Illustrator
- Adobe Photoshop
- Google Suite
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.
Design Solution
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.
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.
Wireframes
Homepage
Product Page
Category Page
Shopping Cart
Checkout
Contact Us
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
Online Store User Interface Design
I then created the high fidelity prototype in Adobe XD for the e-commerce store.
Hi-Fi – Home Page
Hi-Fi – Category
Hi-Fi – Product Page
Cart
Checkout 1
Checkout 1 – 2
Checkout 1 – 3
Checkout 1 – 4
Hi-Fi – Contact
Mobile App
User Interface Design
I then created the high fidelity prototype in Adobe XD for the mobile app.
Start
Login
Home
Category
Product
Edit Card
Checkout
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 deliverables.
