A/B Testing Platform
Summary
Measureyes is an A/B testing platform, which allows retailers to track the success of their storefront window displays by utilizing collected data based on head-turn rates (HTR) and facial recognition. In an online environment, the placement of artifacts, colors, typography, etc., can all affect the rate of conversions. We hypothesize that the same is true for brick and mortar display windows, so we wanted to create a way for retailers to improve their conversion rates in a way that mimics the online environment.
The project was born at Globant’s Hack the Now: The Future of Retail hackathon event. The team came away with a first-place win and has carried on to develop the product post-hackathon.
My Role at Measureyes
UX/UI Designer
User Research
Competitive & Comparative Analysis
Persona Development
User Flows
App Architecture
Wireframes
Visual Design
Prototyping
Tools Utilized
Figma
Sketch
Invision
Zeplin
Pen & Paper
Project Length: 1 year working with this team on the project
Team Size: 5 - UX/UI Designer, Developer, Project Manager, Data Scientists (2)
Research
As a UX designer, I first began to look at what other products were already in the market. We performed a Competitive Analysis to learn what features were common while trying to find the gaps in the competitors’ services.
Credit: Melissa Kaiser and Sunny Lee
We found that there was a high level of in-store monitoring happening within physical stores. Companies are tracking a myriad of things, such as when someone enters and exits a store, which parts of the store they spend their time in, whether they’ve made a purchase, how often they visit the store, and more.
This research showed us that few companies were not as interested in what was going on outside the store. Although some companies were vague about their products, we found that even the leading products do not focus on head-turn rates or A/B testing of the storefront windows. This research gave us confidence that our idea was worth pursuing as a new path in retail data collection.
Continuing Research
Our team met with business owners of various sizes to gather information on how they'd want to use our product and what features they found valuable.
During this research process, we were working on the MVP. We developed this for demonstration purposes and designed and developed the webpage to allow interested parties to contact us.
Synthesizing the Data
We went over the data and prioritized the features of Measureyes based on our research and gaps that we found in the marketplace.
Since many companies were already focusing on the interior of the stores, we kept our focus on the exterior. We selected features that would address the needs of the user based on our hypothesis.
User Pain Points
We hypothesized that the pain points of our user would be:
User needs business intelligence of outdoor store displays in real-time - actual metrics to inform foot traffic outside of their store.
Gathering, accessing, and interpreting the data.
Different stores have different sales or displays for cultural norms.
Understanding how the environment affects sales (weather, local events, etc.)
We also created a User Journey focused on what a client without Measureyes would go through, realizing that there were both pain points and moments of success. The user would find a pain point in hardware set-ups and learning to use the systems. Success would come from in-store metrics and findings, but then pain points again relating to the lack of exterior knowledge, thus generating a need for the Measureyes product.
Credit: Melissa Kaiser and Sunny Lee
Based on our current prototype and research, our end-user has yet to be determined. We have considered that our user base could be broad and interest many like:
Small businesses
Large retail chains
Marketing companies
Real estate companies
This portion of my case study will evolve and include user flows and personas as this project moves forward.
Creating the MVP
Moving forward with the product post-hackathon, I needed to know what our product could accomplish to create a good design for the dashboard.
Steve and Nguyen have been working on the code to track the Head-Turn Rates and other metrics for our MVP. To test the code, we needed video samples outside a storefront.
To achieve this, Sunny and I arranged a cast of volunteers. We choreographed a scene of people walking past a downtown storefront in Seattle and created the footage to assist with our product testing.
Dashboard Design
Based on the code results, the team decided that the product needed to include:
Live video feed
Adjustment sliders: YAW, Dwell Time, and Break Time
Graphs: Live HTR, and Daily HTR v. People
Widgets: Weather, Local Events
Location Selector
Camera Selection
A/B Comparison
Toggle Tabs: Live Feed, Past Data, and Future Predictions
To go over ideas for the design, I met with Claudia, our developer, to discuss her capabilities and how we could display the metrics needed. Many sketches later, we arrived at the design shown here.
Dashboard Wireframes
After reviewing the sketches with the team, I created the wireframes for the dashboard. At this point in the project, we are focusing solely on the product’s Live Feed. What you see here is the design for the live feed portion of the MVP.
Homepage Design
We have been presenting our product idea at lightning talks in Seattle. We've also had meetings with marketing managers and businesses. There's been a good deal of interest in what we are doing, so the team decided to create a web page for Measureyes. The goal is to provide visibility and gauge interest by allowing people to contact us or subscribe to our newsletters.
To design the site, I again met with Claudia. We decided to keep things simple and opted for a single page that includes our product information, contact, and team info. The sketch below shows our final design layout. I created the wireframes based on this design.
Hi-Fidelity Designs
The hi-fidelity dashboard has been created and was used to help illustrate our product and its features at the Puget Sound Programming Python (PuPPy) lightning talks held at Starbucks headquarters in Seattle.
Here is a look at the hi-fi webpage developed for our product. It's a modern design containing information about our product, what it does, info about the team, and a way to contact us.
The images are from our test footage. I created customized graphical elements to give it more visual interest.
Next Steps
The project has gone on pause but may continue in the future. Our next steps are to test the MVP in a few downtown Seattle storefronts. We will then go on to refine the dashboard and do more user testing. The goal is to get this system in some smaller shops, to begin with, possibly via a subscription service where we monitor the data and provide reports to the business owners.
Learning Points
This project has been an exciting piece and has grown into an unfunded startup of sorts. Our team feels as though this is a viable product so, we have continued to work on it diligently. At the Globant Hackathon, we all met as strangers. It was the first time I’d worked with Data Scientists. I found it fascinating to hear how they spoke about data related to our project. I learned a lot about data collection from both Steve and Nguyen. About a month in, the team decided that we needed to get structured. We found Tim, a Project Manager, and he took on the PM role. We’ve been working in Agile design sprints ever since. Tim is very organized and keeps us communicating and on track. We’ve been producing our work more quickly and effectively. I’m learning from each member of the team. We are constantly collaborating and sharing ideas, talking through our work, and deciding the path of this project. It’s been a great experience so far. More to come in the future!