INSTOCK Case Study

RECbook Header Images
Mobile Prototype

The Problem

While everyone still has a need to shop in stores, it is less convenient than online shopping - because shipping is an added cost for single item purchases for online, it is nice to know fabric quality and sizing in person. However, stores are time consuming, issues finding the right size, difficult to comparison shop.

The Solution

INSTOCK uses location services, which allows the consumer to choose area to shop and see store items in stock. Purchases are made online and the order is sent to the store. Similar to a food order, the item is prepared for customers to pick up at their convenience.

Survey provides quantitative feedback to the problem.

The survey was conducted to better understand in store shopping experiences and online store interaction. Many people look online before shopping in store. Top reasons people shop in stores are to try on clothes, to browse, and to know fabric quality. 75% of people at least somewhat like the store selection.

Journal Graph

Do you look at what a store has online before stopping into shop?

Top Needs Graph

Why do you shop in stores?

Social Graph

Are you happy with store selection?

Competative Analysis helps to understand the market.

Similar products were reviewed by SWOT analysis. The most comparable apps available provide a collection of ecommerce goods. The analysis revealed that key features were searchability of a variety of items, favoriting to save and track item prices and keep user on site for purchasing. Common pages to all three products examined are the Landing Page, Account Page, Search and Favorites.

Lyst

Strengths
  • Large amount of ecommerce products.
  • Many ways to search and save items.
  • Track item sales and compare store prices.
Weaknesses
  • Only products for men and women.
  • High fashion specific look.
  • Some items listed on site are out of stock.
Opportunities
  • Include items for children.
  • Suggest items based on search.
  • Suggest coordinating products.
Threats
  • More affordable shopping sites.
  • Users visit for inspiration only.
  • Losing user to linked sites.

Shopstyle

Strengths
  • Large range of clothing and categories.
  • Preset search options and brand choices.
  • Follow influencer for outfit inspiration.
Weaknesses
  • Search requires multiple steps.
  • Unable to search product locally.
  • Multiple purchases for different brands.
Opportunities
  • Show picture of people wearing clothes.
  • Saving for specific categories.
  • Prompt outfit ideas based on chosen item.
Threats
  • Sites more specific to personal styles.
  • People leave site to purchase item.
  • No in store specific products.

Wheretoget.it

Strengths
  • See clothing worn & styled, link to product.
  • News Feed to follow members and trends.
  • Liking items shows most popular looks.
Weaknesses
  • Unable to search by item or by store.
  • Relying on users to provide information.
  • Items show up in the wrong tag category.
Opportunities
  • Shows similar items for shopping options.
  • Messaging for conversation with friends.
  • Show similar items with price range.
Threats
  • Sites that are easier to search.
  • Sites that offer watch list for sales.
  • Sites with more detailed saving systems.

User Personas provide quantitative information about key users.

A closer examination of a couple targeted types of users. Users demographics, motivations, goals and frustrations are explored. User personas are referred to throughout the design process to keep the product on track. Examine Personas.

    Profile Picture Justin
  • Profile
    Justin, 27
  • Profession
    Analyst
  • Pasttime
    Research, Articles, Food
  • Location
    Chicago, IL

“I don’t mind going to the store if it means I don’t have to pay wait and pay extra for shipping.”

Motivations:

Simplicity, Product Knowledge, ROI, Research

Goals:
Check

To get the best deal, based on quality.

Check

Shop favorite brands with ease.

Frustrations:
X

Dealing with traffic and lines after work.

X

Not knowing if item online is in the store.

    Profile Picture Rachel
  • Profile
    Rachel, 43
  • Profession
    Procurement
  • Pasttime
    Social, Home, Reading
  • Location
    Dubuque, IA

“I need to find items for my children at a moment’s notice.”

Motivations:

Wellness, Improvement, Value, Activity

Goals:
Check

Creating a comfortable, fun home.

Check

Staying active and focused on homelife.

Frustrations:
X

Needing items last minute, in the right size.

X

To shop while convenient, running errands.

User Stories are developed from the research. The high priority items are made into User Flows.

The top user stories highlight the importance of searchability and filtering products to narrow down the selection. Location is a priority. Examine User Stories.

  • LOCATION:As a shopper, I would like to know the distance to the store/item, so I can arrange pick up.
  • FILTER:As a shopper, I would like to filter my search, because I’m looking for something specific.
  • SORT BY:As a shopper, I would like to sort my search results, so I can quickly see my best options.
  • PURCHASE:As a shopper, I would like to secure the item, so I can pick up easily.
User Flows

Wireframe pages are built out.

User flows were put into action with paper wireframe sketches. The concept was futher developed from paper to detailed digital wireframes.

Paper Wireframes Paper Wireframes
Digital Wireframe Landing Page Digital Wireframe Search Results Digital Wireframe Shopping Bag Digital Wireframe Account Settings

A round of userflow testing was done with wireframes to check important tasks.

Tasks Tested: Onboarding, Searching, Purchasing, Identifying Icons

    Key Takeaways:
  • Icon and Button Locations: Shopping bag and user icons move to bottom menu for uniformity.
  • Are the icon symbols clear? Dashboard icon of a storefront is not immediately clear, however became familiar once known.
  • Account Setting: Confirmed that necessary information is included in the account page.
  • Search Filter Clarity: No additional search criteria requested.

Branding exploration brings personality to the idea.

The thought process building ideas around local items availablity using sketches and mind mapping. Style Guide

Paper and Digital Sketches Word Mind Map

Color

Sophisticated earthy neutrals are used for the brand colors. Nuetral colors are important since the brand users will be women, men and potentially children shopping for all seasons of clothing.

Instock Colors

Typography

Spectral represents brand sophistication and reliability. Rubik, the complimentary font, is easy to read and offers varied weights, with a touch of personality.

Instock Font

Logo

Based on research, most shopping logos are only words and often serif fonts. It was important to keep it simple, however supportive brand information is coveyed with a location check symbol.

Instock Logo

Hi-Fi Mockups implement consistent brand style to product.

The final version of mock-ups after rounds of iterations and testing.

Instock Landing Page Instock Dashboard Instock Filter Page Instock Search Results Instock Product Page Instock Purchase Page Instock Purchase Confirmation

Iterations: The development process.

Adjustments were made through rounds of iterations to achieve consistency and clarity in the design. Some pages needed more attention to further develop the information architecture.

Instock Landing Page Iterations
Instock Landing Page Iterations
Instock Landing Page Iterations
Instock Order Confirmation Iterations
Instock Order Confirmation Iterations
Instock Order Confirmation Iterations

Testing is performed to ensure the product delivers a solution and is accessible to users.

Testing was done to establish clarity in details and functional usibility thoughout the site.

Testing to follow Web Content Accessibility Guidelines

Location information: Font weight and colors were tested to pass accessibility test for contrast ratio. The contrast ratio passes a level AA standard.

Before Accessibility Testing After Accessibility Testing

Preference Testing or A/B Testing helped clarify design decisions.

Variations of heirarchy of product information were explored with Usability Hub for preference feedback.

Preference Test Options Preference Test Options

User Testing through one-on-one interviews.

Testing to gage usability was done using the clickable prototype. Processes Tested: Onboarding, Search Item, Sort By, Purchase/Secure Item.

    Key Takeaways:
  • A few steps could be added to encourage user confidence. Adding prototype screens to execute processes for Item Added to Cart, Choosing Category, Sort by Screen Organization and Adding Sign Up to Landing Page.
  • Need consistent height for buttons.
  • How can visual information be improved? Can any words be replaced by icons?
Product Page Step Description Screen 2
Search Result Page Step Description Screen 2

Additional feedback from review, I added a page to find alternative locations that offered the product being viewed.

Screen 1 Screen 2

Conclusion

InStock increases shoppers confidence, because it allows more transparency about items available. This reduces the challenges of shopping in stores, such as lines, time consumption and finding ones size. In addtion, there is a reduction in shipping from ecommerce shopping. There is potential for adding more user engagement features, add ease in saving favorite methods and items, information on store sales, and style influencers.