UI/UX Design

IKEA WAlkup

Mobile App Design

Project Brief
Overview

IKEA is expanding their services by designing a new mobile application that helps new home owners and renters with decorating their home on a budget. This is a design challenge that I completed from bitesizeux.com where I designed their logo, researched and designed all 14 screens completed with sketches, wireframes and using Adobe XD for prototyping.

Role:  Project Management, UX Design, UI Design

Date:  2019

Duration:  1 week

Project Brief

The Problem

IKEA’s user wants to decorate their new apartment, but buying decorative items is expensive, and it is challenging to get the cohesive “look” they want by buying items one at a time.

 

Project Brief

The Objective

Design an onboarding process for a new user that captures their budget and taste, and puts together a “decoration package” of multiple items to purchase.

 

Persona

Project Brief

Product Requirements and Restraints

  • IKEA needs to capture a budget range in order to create a decoration package. The minimum budget is $100, and the maximum is $750.

  • The products included in the package are strictly decorative – this means no furniture, appliances, or storage. You can be creative with the products you use in your designs, but try to stick to smaller, more decorative items (posters, lighting, etc).

  • IKEA also must capture the user’s taste. This could involve asking them about their space, getting their opinion on other items, finding colors they like, or anything else that will allow us to present them with the best possible package to order.

  • The final state of the process must show the items in their package. Users can either remove an item (takes it out of cart) or “swap” the item  which generates a new item in the same price range.

  • On average, users expect about 4-7 items in their package. Research indicates that less feels like “not enough”, and more is overwhelming.

  • Users prefer smaller, less complex items with a bigger visual impact. For example – a fun pillow for the couch can make most apartments more personal with a lower cost, and no setup.

  • Users overwhelmingly buy things for common areas (like a living room) as opposed to more specific or personal areas like a bedroom or kitchen.

  • The biggest priorities for our users in order:
    1.  Color / style of item
    2.  Price
    3.  Do the items “go together?”

 

Design Planning

Layout Sketches

Observing IKEA’s current process of purchasing an item gave me a better idea of their current branding design and layouts.

Design Planning

Wireframe Layouts

Wireframes

Welcome, Login & Create Account 

  • Welcome – Introduction screen gives user the option to login or create an account 
  • Login – Email and password fields with checkbox option to remember information, forgot password link, and create an account incase user has mistaken if they have an account. 
  • Create Account – Standard create account fields: name, email, and password with confirmation. Login account link if user already has an account with provided email. 

Welcome

Login

Create Account

Wireframes

Walkup Package Preferences

  • Walkup Intro – Introduction to Walkup process with button link to start package customization or option to view all products and manually select each item. 
  • Choose Style – Gives user the option to select multiple styles with highlighted toggle buttons.
  • Choose Colors – Gives user the option to select multiple colors with highlighted toggle buttons.
  • Your Budget – Slider and input field for submitting budget limit with constraint of $750 max limit.
  • Choose Decor Items – Gives user the option to select multiple decor items with checkboxes. I also added a select all checkbox to keep user from having to individually select or deselect large amounts of items. 

Walkup Intro

Choose Style

Choose Colors

Your Budget

Choose Decor Items

Wireframes

Generate Results

Generate Results – after user selects their Walkup preferences, they’re presented with:
–  Dropdown menu to select room.
–  Generate Package button that displays items within their selected preferences and budget
–  Dropdown for Number of items to display.
–  List of Walkup package decor items for selected room with budget and total amounts above.
–  Each displayed decor item has a name, price, rating, link to view more details, Generate New Item      button, and a Select New Item for user to manually select their own item.
–  User has option to Save Package for later in their cart or Add to Cart for purchase, and Go to Cart        link at the bottom and icon at the top right next to the logo.

Generate Results

Wireframes

My Cart, Shipping Address & Shipping Method 

Standard IKEA mobile checkout process.

My Cart

Shipping Address

Shipping Method

Wireframes

Payment & Order Successful

Standard IKEA mobile checkout process.

Payment

Order Successful

The Visual Design

Visual Design

Welcome, Login & Create Account 

Welcome

Sign Up

Create Account

Visual Design

Walkup Package Preferences 

*Used similar layout and design style from Rolling Square’s website with Hyphen product information to display the user’s login process. 

Walkup Intro

Choose Style

Favorite Colors

Your Budget

Choose Decor Items

Visual Design

Generate Results 

Generate Results

Visual Design

My Cart, Shipping Address & Shipping Method 

My Cart

Shipping Address

Shipping Method

Visual Design

Payment & Order Successful 

Payment

Order Successful

            Next Steps 

This project is still a work in progress. For the Generate Package screen I would like to give users an input field to give them the option to change the quantity of an item. I would also like to add the option to change the Decor type to generate an item from a different category.    

Thanks For Watching

LIKE WHAT YOU SEE?