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.
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.
