Embedded Files
This assignment for a fictive client was part of an Adobe XD course by Dan Scott.
The Client & Brief
The Client & Brief
Maynooth Furniture is a new business selling affordable high-end design furniture made in Ireland.
They want a new e-commerce website for people to browse and purchase furniture for home delivery. They might also want to freshen up their company profile the same time.
Their main competitors are Habitat and Made.
Persona: Katherine
Persona: Katherine
In her early 50s, working as an executive in Dublin.
Her salary of $100,000/year lets her live comfortably.
Both style & price conscious when she is shopping.
She is updating the furniture at the 4 bedroom family home.
The update in furniture is following the slow remodeling of the house now that her kids have left for university.
Loves to browse style guides online.
Uses Pinterest to gather her design ideas.
"I now have the time and resources to express my individual style in our home."
Scope
Scope
Requirements were provided by the client as a list of features.
The website is meant to cater to different shopping behaviors by providing different paths from the home page to checkout. The initial scope of design deliverables included three types of pages: the home page, a category page and a product page.
The scope only included design for larger screen sizes.
Feature List
Home page
Logo
Nav
Living room
Bedroom
Kitchen & dining
Shopping basket
Contact
Search box
Hero slider
New in store
Inspiration ideas
Clearance deals
Footer
Category page, e.g. living room
Most popular
Full product listings
Reorder by:
Size, price, name
Inspiration ideas
Product page, e.g. three seater sofa
Description
Dimensions and details
Price
Available colors
Add to cart
In situ
Similar/related products
How Might We...?
How Might We...?
The persona and the client's feature list were used for writing "how might we" questions to guide the design process.
...make it easy for Katherine to discover items that she feels fit into the styles she is building at home?
...let Katherine discover new styles she likes and help her gracefully bring them into her home update?
...help Katherine feel that she is keeping up with the styles that are in at the moment?
...help Katherine familiarize herself with general principles of interior design, so she can apply them to her own home and make smart, long-term purchases?
...help Katherine feel confident in making bigger purchases online, e.g. couches or beds?
...help Katherine feel like she is making financially smart choices when she is shopping?
...let Katherine feel like she is aspiring to a certain lifestyle as she is shopping updates for her home?
...make Katherine's online shopping experience feel like she is having a stroll through an upscale and qualitative store?
...let Katherine feel like there is something new and exciting to discover each time she visits?
...help Katherine focus on one room at a time when she is updating her home?
...help Katherine limit the options to what is relevant when she is looking for a new furniture piece?
...make it easy for Katherine to collect items of particular interest as she is browsing, so she stay in her flow and can come back to them later?
...help Katherine effortlessly compare items she is choosing between, so she can feel confident in her choices?
...help Katherine discover items that would pair well with an item she has found and likes?
Wireframing
Wireframing
The wireframing focused on finding solutions to the HMWs and covering the feature list.
As the wireframes were being built, a component library was created in parallell, to easily bring the wireframe components into the hi-fi stage later on.
Home Page
Home Page
Different Paths
Different Paths
The content on the home page provides Katherine with different types of shopping experiences, depending on which stage she is at in her re-decorating journey.
Hero Campaigns
Hero Campaigns
Can help Katherine discover new things.
Shop by Room
Shop by Room
Lets Katherine focus on one room at a time.
Mimics the shopping experience in a store.
Favorite Finds
Favorite Finds
Lets Katherine feel in the loop with what is hot.
Highlights customer satisfaction, important for her long-term home updates.
Style Guides
Style Guides
Supports Katherine's style guide browsing.
Lets her both learn about the styles and make purchases directly, knowing they will be "right".
General Guides
General Guides
Basic design principles can help Katherine decorate strategically, set new goals for her home and increase confidence.
Category Page (Living Room)
Category Page (Living Room)
Room Feature
Room Feature
Room-specific style guides to browse.
Item Categories
Item Categories
Helps Katherine narrow her browsing.
Room-Specific Big Buy-Guides
Room-Specific Big Buy-Guides
Helps Katherine feel informed and confident in big purchase decisions.
Life Style Guides
Life Style Guides
Hands-on ways to help Katherine achieve the life styles she aspires to.
Other Rooms
Other Rooms
A natural path forward in the customer journey, if Katherine reaches the bottom of the page.
Header and Footer
Header and Footer
Present on all pages.
The header lets Katherine quickly access all main sections of the website, as well as her saved favorites and shopping basket.
The footer collects information and help related to the company, customer journey, website and social media.
Category Page (Coffee Tables)
Category Page (Coffee Tables)
Subgroups
Subgroups
Lets Katherine quickly narrow down the results on the page if necessary.
Filters and Sorting
Filters and Sorting
Lets Katherine narrow the results in more detail, and sort them e.g. according to price.
Product Cards
Product Cards
Lets Katherine see basic information about each item at a glance.
Supports Katherine's browsing and collecting behavior, letting her add favorites as she scrolls.
Product Page
Product Page
Product Basics
Product Basics
Katherine's attention to style and price is catered to by the large product photos and easy-to-spot price tag.
The big CTA buy button is easy to click.
The favorite button supports Katherine's collecting behavior.
Additional Information
Additional Information
Store availability lets Katherine see where she can go and see the item in real life.
Product details e.g. materials or size may play into some but not all decisions.
Reviews may help Katherine feel more confident in bigger purchase decisions.
Related Items
Related Items
Lets Katherine discover items she may not have found on her own.
Recently Viewed
Recently Viewed
Lets Katherine quickly go back and compare items she may be choosing between.
Moodboard
Moodboard
Personality
Personality
Mostly clean, natural and muted.
A little bit of the unexpected, warm and joyful for interest.
Grown-up sense of style for long-term investments.
Nods to lifestyle magazines.
Typography
Typography
Fonts suited for headers and flavor text, with some extra flair.
Fonts that are easy to read in longer chunks, elegant in their simplicity.
Logotype
Logotype
The inspiration for the color change is longevity and natural materials.
Aims to convey style, quality and versatility that will stand the test of time.
Compatible with seasonal accent colors.
The transparency of the slanted lines reveals leaf-like shapes, another nod to the nature.
Hi-Fi Prototype
Hi-Fi Prototype
Fonts, colors, shapes and photos from Adobe Stock was added to the wireframe components and the pages. The components were also expanded with interactive states and micro interactions.
Try it yourself, if you want to. Open the prototype in your browser.
MICROINTERACTION
On hovering over this tile, the dark overlay grows more opaque, as the text is italicized and slides slightly to the right.
MICROINTERACTION
Hovering over this featured guide reveals a little heart, that fades in and moves upwards from the title.
At the same time, the feature photo zooms in.
Page updated
Google Sites
Report abuse