Cross-Shopping App UX Case Study
A second iteration of prototyping and testing.
It was a summer gathering party. You were assigned as a grocery shopper to buy hundreds items to cook. Only 6 hours left. You didn’t even have that much time to leave the house. So many ingredients should be incorporated in one dish. Gosh, what should you do to keep the party going?
Introducing, Flashop! A multistore grocery shopping app which allows you to do one-time checkout and delivery for miscellaneous items you bought from that many stores. The popular fears of many online shoppers out there are the item damage upon delivery and late arrival of their packages. Flashop works fast to detect the nearest store population around your location proximity and directs you to the freshly available products sold at the top stores. There is also one more privilege. The items you have ordered will be delivered according to your time period of preference in that day. Because today means today. Why would the delivery shipment take that long?
This is the second time I conducted the prototyping and testing phase for this app prototype. I’ve already gone through my first mid-fidelity prototype many months ago and this iteration was ramped up on the consideration and usability testing result from my latter iteration. So, here we are.
Design Thinking Step Process
For this app case, I followed the common design thinking process starting from creating user persona based on user interview result data. I continued narrowing down the course of the problems down to the ideation of building the detailed design that could be tested and hopefully delivered to the end users.
1. Empathize
The problems began to emerge when I first experienced the traffic congestion stemmed from local market area near the street sidewalk (Pasar Palmerah as we might recall). There are so many homogenous offline markets converged in one operational selling point. Selling becomes hard, transportation activity is also compromised. So, I began to think of a way to tackle those problems by applying some simple design rules. What if, there was an app acting as an offline store aggregator that can evenly distribute the diversity of products across many stores based on location radius? Sounds great?
This concept, IMHO, will trigger the fair income distribution of the offline stores of the same products as they are not competing one against each other because of the arranged proximity of their store distance. But they are spread across many location pinpoints to ease the shipment and cut short the delivery cost as the courier will only be working on that location range.
After defining the problems, I carried out the user interview to examine further their pain points, needs, motivation, and goals of doing the online shopping. I created the user persona based on the data collections from that examination.
2. Define
I also made a prioritization of the built-in features to disseminate what I think are important from what users think are important (scale: most to least). This prioritization came after the user interview I conducted from the previous session.
3. Ideate
I immediately went to the ideation phase to unload the aggregate of ideas in my mind. The user flow by far fell into a basic category of online shopping app. This would diminish the cognitive load and lead to the higher efficiency on converting the audience at the checkout stage.
I designed the low fidelity wireframe to create a conceptual design from the pre-determined flow. This was just barely a scratch. I didn’t compile every sketch I made in one paper screen for the sake of brevity purpose.
4. Prototype
What is our life without colours? Dull, right? After designing the rough ink sketch, I developed the high-fidelity version of the prototype. Still, for the brevity purpose, I only include like 8 chosen screens to get the clear vision of the app functionality. You could check out the rest of the prototype from the posted link at the bottom of this page.
5. Validate
Validation means a way to finish up the designed app prototype in a good term. I tested the high-fidelity prototype to 6 users (4 men and 2 women) to get a perfect grasp on what could be improved later on my future update. I used the usability testing template based on toptal reference to make myself aware in which order of importance, the built-in features were actually supposed to reflect. The features that need to be improved later in respective order with (severity point) included are: available store (12.0) > chat FAB (4.02) > cart order (3.30) > homepage/dashboard (1.5) > shopping history (1.5).
Note: the severity resulted from the multiplication of the other factors (task criticality x impact x frequency).
Why I only chose 6 participants? I stopped the testing after the collected data from users had generated the similar patterns. Time is of the essence, so the realisation of the next step must be immediately fulfilled. For more reasonably statistical POV, you could check the article here.
After done interviewing and testing the supposed-to-be users, I got the numerical UI and UX scores, for both the interface overall lookout and the feature functionalities. I got 7.67 out of 10 scale for both categories. 5 out of 6 users considered to use this app if it was being implemented further. One didn’t want to use this app because of the narrow scope of the app course, which only facilitates grocery shopping. I dissembled the likes and the dislikes fraction for the UI and UX part. I got these from the users.
Reflection and Conclusion
Battling with timing and effectivity in design zone might be cumbersome to many. The trade-off of the detailed pixel-perfection and finely-arranged logical steps can annoy some. These are the essential things I’ve got from the user testing that I have missed. I will update the forthcoming iteration with these generalised solutions.
Although it is still far from perfect and I need to tie up the loose end, I am thankful to receive so many positive feedbacks from the users. Thanks to the participants, for spotting the diminutive flaws on the prototype and giving it the worthy feedbacks as a material to be improved later on my future update.
You could check the rest of the prototype out on marvel here. I know it is not still satisfying the standard-perfect from the flow transition viewpoint. Please mind to use the top-navigation bar or Flashop logo as a way to go back to the previous page and view this on a desktop mode for convenience purpose, should you ever click that link. Thank you!
