Case studies demonstrating the collaborative and individual design process, from sketch to spec, and eventually full deployment.
Scan & Go / Core app integration
Overview: Using a collaborative design process to merge the Scan & Go app, into the Sam's Club core app.
It started with a pilot
In 2016, the Sam's Club team created a standalone app called Scan & Go, built to be a pilot, serving a few stores as we test the market's interest in the concept.
Using this app, a customer can visit a Sam's Club location, and using only their mobile device, scan items as they add them to their shopping cart, pay by card, and show their receipt to a store associate on their way out. Customers instantly took to the app, loving the ability to skip the long lines and avoid the need to unload and reload their carts onto the checkout conveyor belt.
Due to the positive market response of the pilot, we instituted a more aggressive rollout strategy, enabling Scan & Go in over 650 locations in a few months, systematically solving common issues of scale on our digital services platform and complications in physical locations and spearheading associate training.
With two apps in the app store boasting vastly differing functionality, we projected a few issues:
- Customers don't want two separate apps for one brand on their phone (confirmed via user interviews).
- Customers, especially those who are less tech savvy, would be confused as to which one they should use in different contexts (confirmed via market research, reading reviews and customer surveying).
- Organizational overhead of maintaining the codebase of two separate apps means strain on engineering, QA, and design resources.
- Customers wanted core app features in Scan & Go app and Scan & Go functionality in the core app.
- Marketing campaigns both in and out of store were telling members to download different apps for different purposes.
Launch a cross-functional design exploration to merge the two apps together, maintaining the simplicity of Scan & Go for store shopping, maintaining the depth of functionality of the core app for all other uses, and allowing seamless access to and from both experiences.
Before & After
We launched a design workshop at our home office in San Bruno, extending an invitation to primary stakeholders being sure to include all of the team's main job functions, as well as Sam's Club designers who work in other domains and platforms. We ended up with a group of 12 in attendance, including Product Managers, Business Strategists, Developers, Researchers, UX Architects and Visual Designers.
A visual tour
The process is outlined in the image carousel below. Click an image to view some of the more complex images in full screen.
Mailbox: eBay app for Android
Overview: Mailbox is world-class, with robust functionality and a clean, modern aesthetic, all built to Google's Material Design standards.
Process: from sketch to spec
- A preliminary sketch of the experience
- Wireframes & IA schematics
- Interaction design blueprints
- Redlined specifications
- Invision prototype of key flows for testing
Completed Designs: inbox, folders & contextual actions
The eBay mailbox is packed with a ton of rich features that customers have been craving for years. I've aligned the design to Material Design standards, and added a ton of functionality without adding complexity by reusing common UI and Android system patterns where possible.
Conversations: a simpler member message
This one's been a long time coming. To take eBay into it's next evolution, I believe we need to bring its uniqueness to the forefront. One of eBay's market identifiers is its inherent ability to bring people together. eBay is a community. It's human connection for commerce. Let's get out of the way and let people interact.
Click here to see the live prototype:
As a Product Designer, my mission is to be closest to the customer.
At eBay, that means focusing on the needs of over 160 million people. Sometimes we have to generalize, but we should never compromise. The right solution is there, it's our job to uncover it.
1. Research & Define
- What problems are we trying to solve?
- Examine available data & perform competitive analysis.
- Predictive persona generation.
- Mood boards, empathy maps, touch points and storyboarding.
- Go wide in ideation, sketching and white-boarding.
- Platform design systems vs. inventing UI/UX elements.
- Wireframes of main user paths.
- Visual design iterations.
3. Prototype, test & iterate
- Create working prototypes.
- Conduct user tests and customer interviews.
- Iterate as needed
4. Success criteria
- Define success metrics for engagement, usage and completion.
- Create a plan for collecting and analyzing data post-release.
- A PRD with service integration details, IA, user stories and acceptance criteria.
- A high-fidelity blueprint with interaction design specifications.
- Visual design spec (redlined).
6. Iterate, iterate, iterate
- "Software is never done." -Confucius, probably