Product Location Audit Tool Redesign
Team: Product Manager (1), Mobile Developer Team (5), UX Designer (2)
Phase 1: April 2017 to July 2017
Phase 2: April 2018 to June 2018
Introduction
Audit Tool was a mobile application used to collect product location data in-store and to report map errors. Product location data are used to improve our location assignment algorithm while map errors would be reported to our map team.
This project was the very first project that I took the primary responsibility for UX design at Point Inside. It was also one of the most enjoyable journeys in the past three years in which I had a great time working with the product manager and engineers.
![Product Location_2x.png](https://static.wixstatic.com/media/e296ba_71a56ce1a75b4d8a837a34681d878f7e~mv2.png/v1/crop/x_0,y_0,w_308,h_157/fill/w_160,h_82,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Product%20Location_2x.png)
![Audit Tool P1_2x.png](https://static.wixstatic.com/media/e296ba_be01e456dda54da8a01afaaa934dc6c6~mv2.png/v1/fill/w_260,h_461,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20P1_2x.png)
![Location Accuracy_2x.png](https://static.wixstatic.com/media/e296ba_03d38ecc6c2e4715aefe34ec1afcadd2~mv2.png/v1/crop/x_0,y_0,w_308,h_157/fill/w_160,h_82,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Location%20Accuracy_2x.png)
![Audit Tool P2 - 1.png](https://static.wixstatic.com/media/e296ba_bc9addf8150c4e0db5ded653b2888068~mv2.png/v1/fill/w_260,h_461,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20P2%20-%201.png)
![Signage_2x.png](https://static.wixstatic.com/media/e296ba_a2f391bcadfe471798a45792c496c7b3~mv2.png/v1/crop/x_0,y_0,w_308,h_157/fill/w_160,h_82,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Signage_2x.png)
![Audit Tool P3 _2x.png](https://static.wixstatic.com/media/e296ba_5fbdd9e9c82445138085dd5f3a10db74~mv2.png/v1/fill/w_260,h_461,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20P3%20_2x.png)
Audit Tool Primary Audit Screen for
Select a Bay, Data Validation (Phase 2), Signage (Phase 3)
Project Overview
Project Goals (Phase 1)
-
Reduce labor hours spent on product location audit
-
One person can conduct a full-store product location audit at an average partner store within 2 hours, which was 12.5% of the time needed with v1 audit tool.
Outcome
Previously, it was taking four people one day to complete a full partner store audit. Now my colleague is able to complete one within 9 hours, which is 25% of the time it used to take.
![Goals_2x.png](https://static.wixstatic.com/media/e296ba_11d9506bc19a4ca68d381d7653fbe338~mv2.png/v1/crop/x_0,y_60,w_824,h_587/fill/w_479,h_341,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Goals_2x.png)
Full Store Audit Labor Hours
v1 Audit Tool v.s. v2 Redesigned Audit Tool
Outline
In-Store Usability Testing for v1 Audit Tool
As the team kicked off the project, the product manager coordinated two rounds of in-store product location auditing. Every participant was assigned one part of the store and was asked to complete 10 product scans for each bay or pad.
Participants
6 mobile developers, 1 product manager, 2 UX designers
Location
1 big-box store, 1 department store
My Tasks
-
Store auditing as everyone else did
-
Observing how others perform auditing tasks
-
Wrote a usability report and present findings
![](https://static.wixstatic.com/media/e296ba_d90a90a65d73488fb5dc5a8b2828ce95~mv2.png/v1/crop/x_3,y_3,w_757,h_1007/fill/w_296,h_394,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/e296ba_d90a90a65d73488fb5dc5a8b2828ce95~mv2.png)
![](https://static.wixstatic.com/media/e296ba_790e5a02b7f0463b823a9e18e4fc235c~mv2.png/v1/fill/w_301,h_396,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/e296ba_790e5a02b7f0463b823a9e18e4fc235c~mv2.png)
Screenshots from v1 Audit Tool
Usability Report
After two rounds of in-store usability tests, I wrote a report to group the usability feedback the team provided from the store audits at partner stores so that the team could have a more clear picture of the issues with the current audit tool as well as opportunities for improvement on the user experience.
![Visibility of System Status - 1.png](https://static.wixstatic.com/media/e296ba_378f5e37c1e946cc91f8e38d4f3736e4~mv2_d_1610_1258_s_2.png/v1/crop/x_0,y_10,w_1610,h_887/fill/w_378,h_208,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Visibility%20of%20System%20Status%20-%201.png)
![Visibility of System Status - 2.png](https://static.wixstatic.com/media/e296ba_681b845f3c904131914e91e0ba1822e3~mv2_d_1624_1286_s_2.png/v1/fill/w_379,h_300,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Visibility%20of%20System%20Status%20-%202.png)
![Report - Flexibiilty and Efficiency of U](https://static.wixstatic.com/media/e296ba_6835ad3ad89c4f17a40873be8e518120~mv2.png/v1/crop/x_0,y_45,w_1628,h_771/fill/w_378,h_179,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Report%20-%20Flexibiilty%20and%20Efficiency%20of%20U.png)
![Match System and Real World.png](https://static.wixstatic.com/media/e296ba_293edb698e3e41b1a73241e8773b5f67~mv2.png/v1/fill/w_380,h_187,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Match%20System%20and%20Real%20World.png)
![Physical Issues.png](https://static.wixstatic.com/media/e296ba_64a2f195290743f89e087ed17f66336e~mv2.png/v1/fill/w_380,h_163,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Physical%20Issues.png)
Screenshots of several key usability issues with v1 audit tool from the report
Users and User Journey Maps
Personas
When I joined the company, my UX manager has developed most of the personas for Point Inside's primary products. It included Store Manager, The Auditor, and Point Insider, who were the three personas for the audit tool.
The primary persona we had focused for phase 1 was the Point Insider. A Point Insider would use the audit tool to collect product location data in-store and send the audit back to improve our location assignment algorithm.
User Scenarios
My UX manager also wrote the step-by-step user scenarios to reflect the process an auditor would go through from beginning to completion of a store audit.
Journey Maps
I created the following user journey map by visualizing the user scenarios that my manager had drafted.
![User Journey - All Stakeholders.png](https://static.wixstatic.com/media/e296ba_d1fb813401a64e4eac225cf9a0aff3d6~mv2.png/v1/crop/x_37,y_0,w_2233,h_1080/fill/w_959,h_464,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/User%20Journey%20-%20All%20Stakeholders.png)
High-level user journey across different personas: Store Manager, Auditor, and Point Insider
Team Brainstorming
After the user journey was developed, my UX manager held a team brainstorming meeting, in which all mobile engineers and other stakeholders were invited to bring in questions and ideas. It was the first time we UX team held such a meeting at Point Inside. It was a little awkward at the beginning since some of the engineers didn't see the point of doing so. But we made it to the end!
![Brainstorming.JPG](https://static.wixstatic.com/media/e296ba_b1967e67b1094f1c9eb2345a043792e8~mv2_d_3264_2448_s_4_2.jpg/v1/crop/x_0,y_383,w_3264,h_2034/fill/w_971,h_605,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Brainstorming_JPG.jpg)
Team brainstorming sessions to come up with questions and ideas for each user task
Ideation
I started my design process with sketches on paper. These sketches included screen flows usually with graphic annotations and low-fidelity wireframes to demonstrate design concepts. During this process, it involved a lot of conversations with the product manager to discuss ideas, ask questions, and re-scope requirements.
![Wireframe - All Screens.JPG](https://static.wixstatic.com/media/e296ba_b8c969df7e77429fa1a6904ed7c4f19b~mv2_d_3264_2448_s_4_2.jpg/v1/crop/x_0,y_53,w_3264,h_2035/fill/w_980,h_611,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Wireframe%20-%20All%20Screens_JPG.jpg)
Low-fidelity wireframes drawn on paper to demonstrate primary audit flows:
Scanner/Camera Setup (left) → Audit Configuration (center) → Audit in Progress (right)
![Info Panel.jpg](https://static.wixstatic.com/media/e296ba_3e1b817a3c0f4d2d9b9cc5f9aca82a86~mv2_d_3264_2448_s_4_2.jpg/v1/crop/x_0,y_773,w_3264,h_1669/fill/w_980,h_501,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Info%20Panel.jpg)
Ideas and wireframes for Audit in Progress
Wireframe
As the product manager and I agreed upon the initial concepts and user flows, I moved forward to creating digital wireframes for "Audit in Progress" screens. This 1st iteration of the wireframes was going to be reviewed by mobile engineers so that they could give early feedback, decide on the technical architecture, and start the development process at the same time.
Below are some images from the 1st iteration of the design:
![Audit Tool Wireframe_Page_1.png](https://static.wixstatic.com/media/e296ba_2cc3706ee6fe423588358347631db4be~mv2_d_7064_2286_s_2.png/v1/fill/w_976,h_316,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20Wireframe_Page_1.png)
Primary Audit Screen Layout with Camera and Scanner Gun
![Audit Tool Wireframe_Page_2.png](https://static.wixstatic.com/media/e296ba_eb71302ce2724bd185aedd874335d1f9~mv2_d_7929_6715_s_4_2.png/v1/crop/x_543,y_20,w_5573,h_2165/fill/w_978,h_380,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20Wireframe_Page_2.png)
Product Scanning Information and Status (Condensed View)
![Audit Tool Wireframe_Page_2.png](https://static.wixstatic.com/media/e296ba_eb71302ce2724bd185aedd874335d1f9~mv2_d_7929_6715_s_4_2.png/v1/crop/x_358,y_2326,w_5574,h_3588/fill/w_980,h_631,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20Wireframe_Page_2.png)
Product Scanning Information and Status (Expanded View)
Iterations
As we settled on the overall user flow and layout for primary audit screens, I started to work on the mockup details and handed over deliverables to mobile engineers. There were quite a few iterations to the designs based on the feedback from the product manager, mobile engineers, and other stakeholders.
Here are some examples of the iteration process:
![Iterations for Info Panel.jpg](https://static.wixstatic.com/media/e296ba_6dc92ab8c3a04f3aa4188478ab7a2f6c~mv2_d_2805_1425_s_2.jpg/v1/fill/w_959,h_487,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Iterations%20for%20Info%20Panel.jpg)
Iterations: Product Scanning Information Card
![Iterations - Camera Integration.jpg](https://static.wixstatic.com/media/e296ba_ef3b330249bf48cb909f6fb938ec7888~mv2_d_8318_5890_s_4_2.jpg/v1/fill/w_974,h_690,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Iterations%20-%20Camera%20Integration.jpg)
Iterations: Camera Integrated for Product Scanning
![Audit Tool P1 All Flows.png](https://static.wixstatic.com/media/e296ba_4b1f111a35a94023aefe7e41105a4c7e~mv2.png/v1/fill/w_980,h_417,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20P1%20All%20Flows.png)
All Mockups for Audit Tool Phase 1
Prototypes
Below are a few examples from the prototypes for the primary audit flow.
![Audit Tool - User Flow.jpg](https://static.wixstatic.com/media/e296ba_1dbe9e5f56d14bd2af2259d72515853a~mv2_d_3081_1298_s_2.jpg/v1/fill/w_973,h_410,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Audit%20Tool%20-%20User%20Flow.jpg)
![Audit Tool - Select a Bay.gif](https://static.wixstatic.com/media/e296ba_2caa2fba53c14b58b17271d38055947d~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Select%20a%20Bay_gif.gif)
Select a Bay
![Audit Tool - Product Scanning.gif](https://static.wixstatic.com/media/e296ba_9d0e183920184cbe9b0421e43cda69c1~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Product%20Scanning_gif.gif)
Scan Product w/ Scanner
![Audit Tool - Camera View.gif](https://static.wixstatic.com/media/e296ba_a5dc214251c44482855995f59bb92dca~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Camera%20View_gif.gif)
Scan with Device Camera
![Audit Tool - Actions.gif](https://static.wixstatic.com/media/e296ba_3aa0eeb8788b4f859ac4d916e2a460b2~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Actions_gif.gif)
Take Actions
![Audit Tool - Add New Fixture.gif](https://static.wixstatic.com/media/e296ba_98dc6efd235d43e59cbefa95cb0b8d24~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Add%20New%20Fixture_gif.gif)
![Audit Tool - Switch Bay.gif](https://static.wixstatic.com/media/e296ba_413ea4d5c1d448ffb7aab94d843cbde0~mv2.gif/v1/fill/w_260,h_462,al_c,usm_0.66_1.00_0.01,pstr/Audit%20Tool%20-%20Switch%20Bay_gif.gif)
Add New Fixture
Switch Bays
Style Guide
Style guide for redesigned audit tool was developed along with the iteration process.
![Style Guide - Colors.png](https://static.wixstatic.com/media/e296ba_73ada24da5584c99975bff17068cb00b~mv2_d_2903_1768_s_2.png/v1/crop/x_238,y_7,w_2384,h_1757/fill/w_680,h_501,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Style%20Guide%20-%20Colors.png)
![Style Guide - UI Components.png](https://static.wixstatic.com/media/e296ba_bad3b9e139c54e3eb7e353c78628c5d8~mv2_d_2903_3764_s_4_2.png/v1/crop/x_239,y_14,w_2546,h_3736/fill/w_734,h_1077,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Style%20Guide%20-%20UI%20Components.png)
Phase 2 and Phase 3 Brief
As the business focus of the company had changed because of the loss of two primary partners, the development process for the redesigned audit tool paused after we completed the phase 1 goals. Phase 2 and phase 3 development wasn't re-started until new potential customers had brought up the needs for new capabilities.
Audit Tool Phase 2
In-store evaluation and accuracy capture of product location. This functionality would enable the comparison of product ground truth to the product lookup API in-store with immediate feedback to the user.
Audit Tool Phase 3
Phase 3 re-introduced support from the original Audit Tool for defining aisle, bay & department signage on a VPU which has been paused as well.
![Data Validation.jpg](https://static.wixstatic.com/media/e296ba_32af103a9a344c25936b625aaccac421~mv2_d_3731_4287_s_4_2.jpg/v1/crop/x_339,y_187,w_2947,h_3849/fill/w_974,h_1272,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Data%20Validation.jpg)
Primary Audit Flow for Location Accuracy (Phase 2)