Maynooth Furniture

This assignment for a fictive client was part of an Adobe XD course by Dan Scott.


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

  • 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

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

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

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

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

  • Can help Katherine discover new things.

Shop by Room

  • Lets Katherine focus on one room at a time.

  • Mimics the shopping experience in a store.

Favorite Finds

  • Lets Katherine feel in the loop with what is hot.

  • Highlights customer satisfaction, important for her long-term home updates.

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

  • Basic design principles can help Katherine decorate strategically, set new goals for her home and increase confidence.

Category Page (Living Room)

Room Feature

  • Room-specific style guides to browse.

Item Categories

  • Helps Katherine narrow her browsing.

Room-Specific Big Buy-Guides

  • Helps Katherine feel informed and confident in big purchase decisions.

Life Style Guides

  • Hands-on ways to help Katherine achieve the life styles she aspires to.

Other Rooms

  • A natural path forward in the customer journey, if Katherine reaches the bottom of the page.

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)

Subgroups

  • Lets Katherine quickly narrow down the results on the page if necessary.

Filters and Sorting

  • Lets Katherine narrow the results in more detail, and sort them e.g. according to price.

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

  • 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

  • Lets Katherine discover items she may not have found on her own.

Recently Viewed

  • Lets Katherine quickly go back and compare items she may be choosing between.



Moodboard

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

  • 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


  • 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

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.