Salesforce: Shopper Self-Service
Salesforce Commerce Cloud
UX, UI & visual design. Click-through prototyping. User testing.
Sketch, InVision, Photoshop & Google Slides
Starting with an existing mobile shopping app interface the team needed to seamlessly add in order management functionality to provide shoppers with a way check the status of an order, track shipments and make order modifications such as cancelations or returns by themselves through the store app. This allows shoppers to avoid having to call in and speak with a Customer Service Representative to check the status of an order or make modifications that didn’t include financials. This also freed up call volume which allowed CSR’s more time to assist shoppers who had more difficult service issues.
Working closely with the PM for this project we identified our user persona as range of online shoppers who are savvy enough and prefer to handle tasks like viewing orders, canceling items from orders, returning items from orders and tracking shipments via self service rather than calling in to speak with a Customer Service Representative.
Self-Service functionality needed to include: Ability for a shopper to view their order history, order status and order details as both a guest and registered user. They must be able to easily cancel items form an order that has not yet shipped, return items that have shipped and track a shipment through a mobile app or desktop version of the storefront. They must also be able to easily understand the financial implications of any order modification they make. Adding in the order management functionality would of course need to look seamless to the user and not appear tacked on, attention to detail and consistently using established patterns would be high priority while adding new user flows.
Light weight wireframes help us rapidly prototype potential solutions before a lot of time is spent on higher fidelity mockups where things can be more “expensive” to make changes to.
Starting with provided up front research my Product Manager and I needed to fully understand the existing storefront application in order to come up with the best solution for fitting in the order management functionality. This included gaining access to a sandbox version and spending some time using the app to understand user flows and design patterns being used.
Next the team created several use cases based on our requirements and user persona, the online shopper.
We followed by a few rounds of super low fidelity wire frames and mockups. During the entire process we kept in close contact with key stakeholders including Product Managers, Development Lead and others.
After several iterations with the low fidelity versions I moved on to creating a click-through prototype using InVision and ran a series of user testing sessions.
Sample User Flows
Checking Order Status
The shopper needs to be able to check the status of their order whether they’re logged in as a registered user or not.
They need the ability to cancel items that have not yet shipped. The user flow for returning items follows the cancel items pattern almost exactly except for where the shopper selects their return shipping method.
Naturally the shopper would need an intuitive way to track shipments
User Testing & Prototype
Using a click-through InVision prototype along with a carefully curated script I conducted 1 on 1 user research sessions. For this I recruited 12 participants all with different backgrounds and technical aptitude. Naturally the results of the user testing revealed a few pain points as well as areas that were working as intended.
Research Findings Slide Deck
Once the research was complete and we felt that we had the right experience to begin development of our MVP solution, I packaged the findings into a comprehensive slide deck. This deck was presented to stakeholders, the extended UX team, PM’s and development as our single source of truth on this project.
Designs were developed with mobile first in mind but we still needed to implement it for tablet and desktop screen resolutions in order to provide the best experience no matter what kind of device the shopper was using. To guide developers I created concepts of key screens in all 3 responsive layouts and remained available for consultation throughout development of the project.
Get In Touch
Let's Work Together!
Want to talk about a project, an idea, ask a question, or just say "hi"? — I'd love to hear from you!