ShopLight - UX Design Project
ShopLight is a comprehensive shopping aid that modernizes the grocery shopping experience. The system consists of two parts: the first, an Android/iPhone app used for creating shopping lists and navigating in store; and the second, an LED lighting system that highlights products on the shelf as shoppers approach to make locating the item easier for the shopper. I worked as a member of a diverse team of four for this project. Team members were of different cultures, nationalities, and academic backgrounds. In addition to my work as a team member, I also provided project management for the team by setting meeting agendas, organizing and tracking task status, and creating internal deadlines to help the team be successful. A full explanation of the process we undertook can be found below.
AUG 2018 - DEC 2018 (14 Weeks)
Project Management, UX Design (LED System), Physical Prototyping, Programming (C++ for Arduino), UX Research, User Testing
Trello, RealTime Boards, Arduino Uno, NeoPixel LED Strips, User Centered Design Process, Observation, Survey, Semi-structured Interviews, Study Design
Using Research to Understand our Users
At the beginning of the project, our team selected to design for parents that go grocery shopping with their children. Knowing the general context and our user group, we began our research. Through the use of observation at a local Walmart grocery center, a survey (20+ participants), and 10 semi-structured interviews of parents and their children (age 4-7), our team had a solid amount of data to inform our design decision. The qualitative data was turned into sticky note data points and then grouped via the affinity mapping technique. The picture above shows the resulting diagram, with the orange stickies representing design ideas the team came up with in the problem space. As a team, we also created a user attribute table, listing out our user's characteristics and their accompanying design implications in the areas of physiology, perception, cognition, motivation, and social environment.
MAJOR PAIN POINTS
The quantitative data from the survey and the qualitative data from observation and interview showed a variety of pain points that occur in the user experience: 1) Parents want shopping to be faster, 2) Parents face issues sticking to their budget, 3) Parents do not want their children misbehaving while shopping, 4) Parents believe in-store navigation should be easier and faster, 5) Parents don't want to forget an item at the store, and 6) Parents see the checkout as the worst part of shopping. We then grouped these major concerns into four possible design areas.
Area 1: Store Navigation and Finding Products
Area 2: The Trip Planning Process
Area 3: Curbing Misbehavior with Kids
Area 4: Improving Checkout
Across the Problem Space
BRAINSTORM AND GENERATE IDEAS
Armed with the basic knowledge of what difficulties are users faced, our team sat down to brainstorm possible design solutions. This initial brainstorm in the problem space was focused on what we learned in the first step of our process, but it was still a very open process that generated dozens of possible solutions that could fit our users' needs. At this stage of the process, no ideas were thrown out, and we did our best to "build" on one another's ideas. During team brainstorming, taking one team member's idea a bit further can often lead to additional ideas to discuss. At the completion of our brainstorming sessions, we recorded plausible ideas and moved to the next stage of the process.
CONSTRAINING TO SEVERAL POSSIBILITIES
We next moved to selecting several ideas out of the possible pool, purposefully choosing what both suited our user's needs and what was plausible to create. By constraining ourselves to three ideas, we were able to conduct a second, more informed brainstorming session to refine the ideas before moving into some early concept sketching and storyboarding. Some of the sketches from this process are shown above. Here is a short overview of the three concepts, which relate to the problem areas listed in the previous section:
Idea 1: A navigation and product highlighting system for in-store use that aids users in quickly gathering items on their shopping list. The system uses LED lighting and haptic feedback on the cart to help users navigate in the store in conjunction with another series of LEDs to highlight shopping list items on the shelves. The system also provides alerts for missed items when users move to the checkout. This idea addresses concerns in Area 1.
Idea 2: An integrated shopping list entry system that takes input from a digital paper-like surface that can be attached to a space in a kitchen (e.g. a fridge), an app, or a digital assistant (e.g. Amazon’s Alexa). All input methods are synced and provide an easy and flexible way to plan for a grocery shopping trip. This design addresses concerns in Area 2.
Idea 3: A “Smart-Cart” to help curb misbehavior in children while also allowing a shop as you go functionality, designed to help parents focus on shopping while providing a means to skip the lines at the checkout entirely. This solution addresses problems in Areas 3 and 4.
Iterating and Prototyping
SELECTION AND ITERATION
The next step for our team was to select just one of our three concepts and improve and iterate on the design. We knew from our research that all three options met our users' needs, it would be impossible to move forward with all three designs. We chose to focus on the navigation and product highlighting idea while incorporating the best features from the other two choices. The solution would center around a mobile app that connects to an in-store navigation system (indoor positioning system) and a LED product highlighting system that helps users locate their items. The LED system would use a highly visible floor strip of lights that directed users to the area of the aisle their product was located at, and then a smaller product highlight light turned on as they approached that area. The experience would allow users to navigate faster, find their items quickly, and ensure that the user gets everything on their list. At this point, the team split into two groups, I worked on the LED functions with another team member, and the other two members focused on designing the mobile app. Throughout the process, we continued to keep each other involved, soliciting feedback from each other and weighing in on design decisions.
PLANNING FOR A TESTABLE PROTOTYPE
Before moving into building a prototype, it was important to know what we wanted to test. Knowing exactly what our testing goals were provided a guide to the type of functionality our prototype would need. We were able to conserve monetary resources and time by creating just enough functionality to gather the user feedback we would need to inform future iterations. Based on our user needs and desires and the required testing functions, we set to work building a prototype that must be able to highlight a minimum of four products across 45 feet of aisle, have multiple LED color options for multiple users, and has controllable lights that can be turned on/off dynamically as users picked up their items. Similarly the app portion must be able to allow users to see and "check off" their grocery items and have the option to see the in-store map. These LED system and app features would allow our team to conduct A/B testing with our system vs. traditional method and evaluate for time and task load. In other words, we would be able to empirically determine if the concept was faster and easier for our users.
BUILDING THE LED SYSTEM
Prior to this project, I had no experience designing with LED electronics, soldering electronic components, or working with Arduino circuit boards. However, this knowledge was all necessary to create a working prototype to pair with our team members Adobe XD app prototype. My partner and I set about learning the necessary skills to build the prototype, learning how to safely solder electronics together, create circuit board connections with the Arduino, and program NeoPixel LEDs using C++. The full components included an Arduino Uno and breadboard, 120 ft of wiring, 36 fast connect wiring ends, 9 ft of NeoPixel LEDs, 108 soldering points, and a power inverter. Pictures of both the LED and app prototypes are above. Credit goes to my teammates for the app design. With both of the portions complete, I coordinated access to a local Walmart where we were able to setup the prototype in the grocery section and conduct initial testing.
User Testing and Returning to Iteration
For the experience of doing so, we created a full testing regimen for our system, even knowing that scope restraints would only allow for a very discounted testing event. Of the six different evaluation methods we planned for, we chose to focus on A/B user testing with the following goals: evaluating for completion time, evaluating for user task load using the NASA Task Load Index, and conducting a post-test user survey to measure user experience. In order to facilitate the test, we constructed a grocery aisle simulation in a local office space and conducted between-subject user testing there. The timelapse video above shows the process of building the "grocery aisle" and includes some shots of user testing. My focus was on administering the A/B test for time. Other teammates administered the NASA TLX and conducted the post-study survey.
The user testing we conducted successfully accomplished its goal - it informed the next steps in the design process. The testing showed improvements in speed and ease of use across almost all users that used the system, validating the concept at a basic level with a limited user pool. We received a host of user experience feedback ranging from LED intensity to the app navigation functions that would all be incorporated in the next iteration of testing. We also discovered some additional insights that we did not expect to see, such as the greatest time and task load improvements occurring in non-Americans. We expect that this is because they lack the same cultural shopping experience (product packing cues, brand labeling, etc.) that help Americans locate American items. For these users, the ShopLight system worked to great effect. Another unexpected insight was that some users found themselves shopping normal, even with the LED assistance. This feedback highlights the fact that previous shopping methods can pose a barrier that users will have to overcome to use the system efficiently.