CHALLENGE
IKEA evokes simplicity and minimalism in its product design, however, the current website is neither responsive nor accessible with overwhelming channels of information.
OBJECTIVE
This project strives to optimize the IKEA website design experience similar to the store’s showroom experience and make it clearer in layout and hierarchy. The objective of this project is to not focus on the visual rebranding of elements, but more so on the responsiveness between mobile, tablet, and desktop breakpoints.
IKEA sitemap proposal
Mapping out primary, secondary, and tertiary pages to design a better information architecture hierarchy, including cleaning up the footer links as an archive.
Primary
Home feed
Secondary
Products (bedroom), Rooms, Shopping Cart
Tertiary
Product display, Showroom (bedroom)
The Redesigned Pages & Information Architecture
Keeping the goal in mind to make the IKEA website more sophisticated, simplified, and integrated, here is how the online digital shopping experience works from the opening home page to final checkout.
HOME NEWSFEED
Designed minimally with a simplified newsfeed displaying featured seasonal collections and best-seller products.
PRODUCTS (BEDROOM)
Opening with a mood-setting page with organized categories based on personal preferences and filtering. Featuring bedroom ideas and essential bedroom kits/products.
THE ROOMS
Designed with the IKEA store showroom walkthrough experience in mind, each carousel gallery displays room furnishing ideas with accessible tag callouts for featured products.
SHOWROOM SPECIFICS
Enter a showroom and view the design behind the decorated space. This a great method to grab inspiration and learn more about IKEA furniture.
PRODUCT DISPLAY + ADD TO CART
See a product that you like? Look through additional information like customer reviews and the intent of its structural design. Hit "save" to mark it on your wishlist or hit "add to cart" and move forward to the checkout process.
IKEA web redesign — dev. hand off
Creating a visual style guide and adding specifications to padding and dimensions of the user interface for software engineering hand-off.
IKEA VISUAL STYLE GUIDE
Establishing color, font, and typographic scales on each different breakpoints. This guide is useful to act as a reference for a developer to transform the design into reality in code.
Typography scale for headings, subheadings, paragraph, and footer styles according to each mobile, tablet, and desktop breakpoint.
The master page of breakpoint dimensions specifics including mobile, tablet, and desktop.
Adding specs for width and height of elements along with margin and padding details.
Final web design prototype
REFLECTION
• Responsiveness is an important web design constraint.
Constantly evaluating design choices based on various device preference views and breakpoints is essential to accommodate a variety of use cases.
• Accessibility comes down to the pixels.
When designing system components like UI button elements and minimum font sizes, it is important to keep accessibility in mind for considerations like using dynamic type for users who may need to view things at a larger scale or "tap-target" affordance for interactive elements to be easily accessible.
• Constructing a visual style guide for handoff.
Establishing the foundational specs and grid and documenting processes are valuable steps to form a cohesive summary of the website design to ensure consistency and efficiency in software development delivery.
Constantly evaluating design choices based on various device preference views and breakpoints is essential to accommodate a variety of use cases.
• Accessibility comes down to the pixels.
When designing system components like UI button elements and minimum font sizes, it is important to keep accessibility in mind for considerations like using dynamic type for users who may need to view things at a larger scale or "tap-target" affordance for interactive elements to be easily accessible.
• Constructing a visual style guide for handoff.
Establishing the foundational specs and grid and documenting processes are valuable steps to form a cohesive summary of the website design to ensure consistency and efficiency in software development delivery.
NEXT STEPS
• Usability testing to gauge accessibility for UI components and interface refinements.
• Real-time dev hand-off interaction to experience effective cross-functional collaboration and communication.
• Rebranding IKEA — print, creative direction, and more!
• Real-time dev hand-off interaction to experience effective cross-functional collaboration and communication.
• Rebranding IKEA — print, creative direction, and more!
PROJECT DETAILS
DURATION
2 week research/sitemap
7 week breakpoint refinement & iteration
1 week specs & dev handoff
2 week research/sitemap
7 week breakpoint refinement & iteration
1 week specs & dev handoff
CONTENT DELIVERABLES
Sitemap
6 pages — 1 primary, 3 secondary, 2 tertiary
Visual style guide
Spec-ed file for dev handoff
Sitemap
6 pages — 1 primary, 3 secondary, 2 tertiary
Visual style guide
Spec-ed file for dev handoff
TOOLS
Sketch, Principle
Sketch, Principle
