Camera as a Platform

I got to work on something I had never worked on before for development: Camera. I was the one-woman-army responsible to develop a camera experience for the Walmart app. I built a visual search feature, using real data and trained object detection model that scans an object using the camera and displays the search results after filtering from the company’s inventory.

CHAPTER ONE

User Questions

  1. Why is camera important?

    2. According to surveys:

    • 96% of surveyed millennials consider their camera crucial to their smartphone.
    • Nearly 50% said their smartphone was “practically useless” without a camera.
    • 62% of surveyed millennials want visual search over any other new technology.

    FUN FACT: 90% of information transmitted to the human brain is visual.

  2. How are people using camera to shop?
    • Pinterest – visual search, shop the look, instant ideas (image search)
    • Amazon – visual search, style snap, view in your room
    • Best Buy/Walmart/Jet.com/Target – QR code scanner
    • Google Lens/Bing – visual search engine
    • Forever 21 – image search
CHAPTER TWO

User pain points

  1. "I know what I want, but I don’t know what it’s called."
  2. "I don’t know what I want, but I’ll know it when I see it."
  3. "I know what I want, but I don’t have the time and patience to apply multiple filters and then scroll through the multiple search results."
CHAPTER THREE

Design problems tackled

  1. Entry point - Always within or near the search bar
    2. entry point - competetive analysis
    Entry point - Competitive Analysis
    entry point - Walmart prototype
    Entry point - Walmart Prototype
  2. Camera interface and experience

    3. - It’s very important to place top-level and frequently-used actions at the bottom of the screen.

    - Make elements you wish to be easily selectable large and position them close to users.

    Camera Experience - competetive analysis
    Camera Experience - Competitive Analysis
    Camera Experience - Walmart prototype
    Camera Experience - Walmart Prototype
  3. Layering and Navigation

    4. It is important to keep the user within the camera experience i.e. back-stacking whenever possible.

    Layering and Navigation - Walmart prototype
    Layering and Navigation (Back-stacking) - Walmart Prototype
CHAPTER FOUR

Design Decisions

(BEFORE - AFTER)

Camera Experience - Walmart prototype Camera Experience - Walmart prototype

Small touch targets lead to big problems

Camera Experience - Walmart prototype

Use color judiciously for communication

Camera Experience - Walmart prototype

Color contrast matters

Camera Experience - Walmart prototype

Journey to aesthetic design

CHAPTER FIVE

If I had more time

Sky is the limit

  • Add more familiar mobile interactions.
  • Make the user experience smoother.
  • Work alongside the data science team to get a stronger object-detection model for visual search.
  • Differentiate between the various options with more than just color.
  • Explore the verticals and functionalities on a much deeper level.
  • Figure out ways to integrate the add to cart and checkout functionalities within the camera experience.
CHAPTER SIX

What I learned?

  • Design first approach

    • - Rather than development first approach

  • Follow best practices (familiar design patterns)

    • - Made use of UX laws like, Fitt’s Law, Jakob’s law, Hick’s Law and many more

  • Feature prioritization

    • - If stuck with something, keep it aside and work on another aspect of the prototype

  • Be assertive – go ahead and implement things

    • - Read between the lines and implement things, even if not that great, you can learn from it and use it else where

  • Good distractions

    • - There will always be good kind of distractions, know how to prioritize them & make it work efficiently.

Bhargavi Padhya • All rights reserved • Disclaimer