ABC Company

E-commerce Case Study

The Team & Brief

ABC Company is a leading regional supermarket focused on offering high-quality products and a personalized shopping experience. As part of their brand differentiation strategy, aside from the usual inventory that grocery stores carry, ABC Company strives to create a “neighborhood shopping environment.” The company has become aware an increasing number of consumers are switching to online grocery-shopping due to its flexibility and convenience. Amazon’s recent acquisition of Whole Foods, has ABC Company’s management worried about customer retention, and has determined that in order to stay relevant they need to compete in the space by offering their customers an app which would allow for various ordering and delivery options.

Our team of Jorge Juan, Melvin Zantua and myself were tasked in creating an app that addresses the concerns ABC Company has been facing. Our app design would have to address the delivery and ordering issues ABC Co. has outlined and bring the neighborhood shopping experience directly to them via this app! Our mission was to create the basic grocery-shopping main user flow and architecture and must have at least one main distinguishing feature!

What’s next?

Taking the UX/UI user centered design approach we went on to user research which consisted of:

  • User Interview Transcripts
  • Survey Results
  • Affinity Diagram Insights
  • Mind Maps
  • Empathy Maps
  • User Journey’s
  • User Stories
  • Storyboards
  • Hand Concept Sketches
  • Concept Testing Results

If this sounds like a detailed assortment of steps, they are, but crucial to the success of our app.

Onto User Interviews

User interviews are a great way to get to know your users — if you don’t understand your users’ needs and motivations, you can’t design a great user experience for them. For this case study, we were provided with user interviews and through them we were able to form our target customer in the form of a persona. The interviewed users were Danny, Horacio, Jona, Steven, Silvio and Rebecca. Not all the interviewed users fit within the target demographic (shown below) but did help to formulate our persona. Our interviews and survey results revealed 95% had shopped online, 63% shop via desktop or laptop, 37% shopped via apps, 60% valued organic options, 52% valued local products, 62% prepared for shopping by creating a list. This information helped to form our persona, Mr. David Wang who wants to buy healthy and amongst other traits fit the profile perfectly- his details can be seen below.

Armed with this information we can go onto mapping the needs, goals, frustrations and demographic (which we now know!)

Primary & secondary user mapping

So what did the research and testing reveal? Our usability tests consistently revealed our users wanted 3 things, convenience, speed and simplicity!

The Competition!

Interviews revealed our users wanted an easy, simple and convenient experience but do our competitors achieve this, and if so, how? As a natural part of the UX/UI process, we seek to perform a ‘competitor analysis’ where we observe our position in the marketplace and scrutinize the techniques the competition uses to serve this same market with their solution. We determined our competitors were Whole Foods, Amazon and Walmart which all offered a similar yet not identical selection of items/services. We would scrutinize these retailers and note how they addressed the needs and concerns of their customers and would then later formulate our own unique solution to the ordering process (more on this later!)

The Journey!

Because we design with the user front and center (user centered design) we try to design our apps with a mental idea of the ideal journey a user might undergo using our app- we envision this from all the data analyzed and is the core reason why we design to solve problems. Depicted below is what UX/UI designers refer to as a “Journey Map” and it’s a dual view (simplified) depiction of what our user would experience under ideal conditions using our application as intended and represents a “happy flow.” Above that view (top row) shows the frustrations the same user faces without using our application solution. Interestingly, we plotted an ‘emotion map’ which plots the user’s emotional states while performing the ‘shopping task” NOT using our app- this is shown at the bottom of the photo and helps us to understand the emotional state of the user while normally undergoing the task we aim to solve- in this case physically shopping at ABC Co.


Prototyping is the process of going from concept (and sketches) to functioning application and starts off as ‘low fidelity’ mockups to fully functioning ‘high fidelity’ prototypes that respond, look and feel just like an actual app. Our team used simple pencil and paper for the low fidelity mockups which progressed to “sketch” files using the Sketch app, then onto Marvel Pop and lastly Invision…..we didn’t use Flinto as we ceased app development at the mid fidelity stage. Prototyping is done only after all data is collected and analyzed to address all possible scenarios a user might undergo- it is then tested at its various stages of development and continually refined after usability testing and user feedback. In our case we focused on the issue of shopping with a list and how it’s (list) created and implemented in real-world scenarios later to be addressed with our unique solution to this process.

Ingenuity~ OCR, what?

We wanted to use every available technology to address issues users might face when creating shopping lists and we devised a clever solution to list creation. Using current technology we noted ‘list creation and insertion’ as a key pain point for our users and knew if we could simplify this “list insertion” process we’d be on the right track. We knew every mobile phone made in the last ten years has a camera and thought if we could somehow get that camera to import the shopping list, it would allow for fast, easy, simple shopping- this is exactly what our user base desired. So we turned to a technology available for quite some time but not often used- OCR technology!

OCR means ‘optical character recognition’ and has been around for quite some time and is typically used to generate text from images- usually scanned. Businesses and law firms are the biggest users of ocr tech and still use it today to turn older typed documents into editable text documents- an incredible technology which is under-appreciated by the mainstream. We would later learn ocr tech could be used with written text (it has evolved to recognize handwriting) and is a viable option for importing written lists into the shopping app and could populate your orders using the built-in camera!

(Detailed OCR software details the viability for our use case.)

In our case the user would use ocr tech without ever needing to know how it works- we proposed the following: the user starts the shopping process by opening the app, with written list in hand, starts the ‘list insertion’ process by photographing their list which is instantly recognized and populates into a shopping list. The created list is then further refine-able by allowing the user to specify size, quantity and brand and within seconds has a detailed list ready for checkout- fast and simple just as our users wanted. Of course I’m over-simplifying the process, but it only involved a few clicks and is far more convenient than typing a list then further refining- our method removes those steps and speeds the process considerably.

The pink list in the camera screen and ready to photograph and create list

Medium fidelity prototype screens reveal the changes made through multiple iterations as dictated by user testing. Testing revealed most users wanted to see the “Shop Specials” upon signing, which can be seen in the below prototype which were not part of the initial low-fidelity paper prototype shown above. We also modified the ‘map’ generation to be on the top portion of the app for improved layout as per Gestalt design principles and better readability. (The initial design shown above renders the map on the lower portion which was deemed non-optimal.)

Bottom left 2 screens show the list being populated into the ordering process
List population after list ocr

Medium fidelity testing revealed this “list insertion process” was liked by virtually every tester- most agreed they’d like to shop using this technology.

You can see the list insertion process here.

The remainder of the shopping process continued with the list being advanced to the ordering stage where the user could then specify his/her payment type and delivery method (or personal pickup via UPC proof.)


Given more time, high fidelity mockups and further usability testing would be necessary to take app development to the next stage. We think we have a innovative, viable, testable application platform to continue with further testing.

Creating an app with a team was a pleasurable and memorable experience. While I came up with the idea of using OCR technology, it was JJ and Melvin who really took to streamlining the ordering process and scrutinized the list insertion process and delivery/payment options. The team worked well together and created an app with a promising and viable solution to both our client and user- and this is what UX/UI is all about!

Thank you JJ and Melvin, you guys made this app what it is!

Steve Nunez
Jr. UX/UI Designer