Wireframes of ZAP Mall

ZAP Mall

Project overview

ZAP Mall is a food discovery website that lists all the merchants with E-stores or websites powered by ZAP Group Inc. By using ZAP Mall, users are encouraged to order directly from the merchant instead of placing them through other third-party applications. 


Duration: June 2020 - Aug 2020 (6 weeks)

Role: Product Intern

Category: Internship 

ZAP Group Inc. is more known as the number one loyalty program in the Philippines as it allows customers to earn points with just their mobile number, which helps merchants directly reach out to their customers for deals and programs.

As a response to food merchants relying on online channels during the pandemic, ZAP decided to gear their strategy to provide ZAP-powered websites for their merchants called E-stores. These websites connect merchants and customers instead of through a third-party app. With that, ZAP hopes to organize all their merchants with or without E-stores into a food discovery website called ZAP Mall.

My contribution to our team of three was the collection of data through interviews, surveys done. Along with this, I worked on the low-fidelity prototypes for ZAP Mall and conducted usability tests using them.

User research

For us to have a proper collection of data, we decided to set goals for the interviews. These include the following: 

  • General Attitude: What is the general attitude of people towards purchasing food?
  • Motivations: What motivates people to make a food purchase?
  • Processes: How do people usually make a food purchase nowadays, and what are the processes they believe they use?
  • Interaction: How do people currently interact with available online food services?

A total of 20 participants were interviewed, and 24 individuals responded to our survey during the three days of collecting data. We then organized the data by grabbing the interviewees’ key ideas and quotes, which we made more comprehensive through card sorting on Whimsical. 

Key Ideas and Quotes from 6 Participants

Key ideas and quotes from 6 out of 44 participants

Card sorting done in Whimsical

Key takeaways

  1. Users frequently ordered a savory dish. 
  2. Though Grabfood was the dominant platform used, there was a growing usage of social media platforms such as Instagram and Facebook.
  3. These users usually ordered to satisfy a craving or because there was a particular occasion being celebrated. 
  4. Several respondents had reservations about food businesses joining third-party apps as they are not aware of the pros and cons.
Summary of Interview Results

Interview results based on 24 participants

Graphs of participant's responses towards 3rd party food services

Opinions of participants on 3rd party services for food businesses

User personas

The product is designed for four users, namely:

  • Anton, the fixed palate: has a specific platform and a particular craving in mind.
  • Bernard, the busybody: has no time to cook and orders the same menu item
  • Cheska, the curious foodie: is open to trying new dishes and supports small businesses
  • Denise, the good daughter/son: orders for the family and mostly on occasions
User Personas

User personas formed based on the data collected

Customer journey maps

To create a holistic and well-rounded design solution, we created customer journey maps by interviewing four particular participants from the previous data collection round. We also considered the existing data we had of the sixteen other participants and 24 survey respondents. We mainly wanted to identify pain points and design values in each journey. We would use the findings to re-evaluate the design concept and features collectively while noting what pain points we can relive and any unnecessary features the team may avoid.

Customer journey maps of two personas

Customer journey maps for two personas done on Figma

Features for the first design iteration

  1. Search: This allows a user to enter a craving and their location. In return, they may view merchants displayed with their rating, branches, and top products
  2. View Merchants: This lets users view a merchant’s details such as their top products, branches, promos, reviews, and any related merchants 
  3. Favorite Merchants: This lets users categorize merchants as their favorite and have a designated page consolidating them.
  4. Reviews: This lets users make reviews and view other users’ reviews of specific merchants.

Sitemap and user flows

A sitemap was created to consider the product’s initial features and identify pages to be designed in the first iteration of testing. Based on the user personas made and the customer journey maps, we created user flows that would interpret how they would interact with the product based on their motivations in the journey maps.

Site map

Site map done on Whimsical

Flow charts of user flows

User flows of the personas for making an online order

Initial sketches

I personally chose to create my initial wireframe designs on InVision Freehand so that I won’t get carried away with other elements. It allowed me to present my ideas to my teammates through rough sketches as if they were on pen and paper before moving to the low-fidelity designs. 

Wireframe sketches on InVision
Wireframe sketches on InVision

Sketches done using InVision Freehand

Wireframes

We then made low-fidelity designs after considering the entire team’s initial sketches and designs. These screens were to be used later on during the usability testing to verify their effectiveness. 

Wireframes for homepage, merchant page, search page, review pages, and favorites

Search bar

This is located at the top of the screen for users to search for a merchant or product quickly. This feature allows them to easily search the food they’re craving for and input the city they want to search for options.

  • ✅ Bernard (Busybody) and ✅ Anton (The Fixed Palate) both have a specific type of food in mind to order right away.

Featured merchants

Merchants can be featured on the Homepage to reach a wider audience. Possible features may be done based on special offers, a new merchant partnering with ZAP, or a new product they’re promoting. 

  • ✅ Cheska (Curious Foodie) likes discovering new options, allowing her to learn more about featured merchants on the site. 
  • ✅ Denise (Good Daughter) will view possible merchants her family can choose from to celebrate special occasions.

Featured products

This allows users to view best-selling products from merchants on the Homepage. 

  • ✅ Cheska likes discovering new options, and this enables her to browse through different products from various merchants to learn more about them. 
  • ✅ Denise is able to view possible food items that she can order for the whole family.
ZAP Mall Wireframe of Home page

Wireframe for Homepage

Special offers

This allows users to view best-selling products from merchants on the Homepage. 

  • ✅ Anton, ✅ Bernard, and ✅ Denise are all fond of promos.
  • Anton would want to see promos when searching for his craving online. 
  • Bernard would be delighted if he can apply promos for his usual order. 
  • Denise would be more inclined to buy bundle promos that she can order.
Wireframe of Special offers section

Wireframe of Special Offers section of Homepage

Meet our merchants

This allows users to view best-selling products from merchants from the Homepage. 


✅ Cheska can find more merchants to choose from since she has no particular food craving in mind to order.

Wireframe of Meet our Merchants section of Home page

Wireframe of Meet our Merchants section of Homepage

Merchant reviews

This allows users to view best-selling products from merchants from the Homepage. 

  • ✅ Cheska is inclined to use this since she likes discovering options; she would first check out reviews about them. 
  • ✅ Denise is more inclined to discover new possibilities and try new merchants based on their reviews first.
Wireframe for Reviews Section of Merchant page

Wireframe for Reviews Section of Merchant page

Merchant branches

This allows users to view best-selling products from merchants from the Homepage. 


✅ All personas, but most especially Bernard since he has a busy work schedule and would want to be able to receive his order fast. Knowing the nearest branch will cater to his needs.

Wireframe of Merchant Branches of Merchant page

Wireframe of Merchant Branches of Merchant page

Low-fidelity prototype

I used InVision to sync the frames for the user flows. I also created hotspots that users would interact with for certain buttons and other elements on the page that were necessary for the usability test.

Wireflows made on InVision 

Usability test

We created a test plan and implemented the usability test using Maze, where I linked our InVision low-fidelity prototype. The usability test was divided into two parts: the Concurrent Think Aloud technique and then the Retrospective Probing technique for specific tasks. Due to time constraints, the test was only conducted on 4 participants from those previously interviewed.

Gif of user flow of searching a product

User flow of searching a product

Gif of user flow of viewing a merchant page

User flow of viewing a merchant page

Gif of user flow of viewing a favorite merchant

User flow of viewing a favorite merchant

Gif of user flow of making a merchant review

User flow of making a merchant review

Insights from the testing

Favorites feature

One user could not find the favorites page since they thought the arrow icon for “Share” beside the heart would lead to the favorites page 


Possible Action Plans:

  • Rethink the position of the favorite and share icons
  • Possibly look for other share icon designs just like the iOS share icon available
  • Rethink the position of the Favorite Merchants link and make it visible on top of the page beside the search icon 
Wireframes of initial Merchant page (left), Merchant page with new "Share" icon (right)

Initial Merchant page (left), Merchant page with new "Share" icon (right)

Search feature

One user found the results to be good, but he was looking for the filter option based on price and on location.


Action Plan: Add a filter option that helps users refine the searches further.

Wireframes of initial Search Results page (left), Search Results page with filter (right)

Initial Search Results page (left), Search Results page with filter (right)

Reviews feature

One user wanted to see fewer reviews for merchants she’s familiar with already, but finds five to be a good number for other merchants she’s not familiar with yet. 


Action Plan: Reducing the reviews to three previews on the page. 

Wireframes of initial Reviews section (left), Reviews with three previews (right)

Initial Reviews section (left), Reviews with three previews (right)

Insights from usability report

Categories feature

One user clicked the search bar right away, expecting to see categories there. However, this is also because they didn’t explore much at the start as well. 


Action Plan: Rethink UI of Categories such as using a photo or a color that is prominent enough to communicate the feature 

Heat maps of Home page during testing for Categories task

Heat maps of Homepage during testing for Categories task

Reviews feature

One person clicked the star rating at the top of the page, expecting it would lead to creating a review right away.


Action Plan: Add a path or flow that would lead the user can leave a review by clicking the top rating at the top of the page. 

Heat maps of Merchant page during testing for Reviews task

Heat maps of Merchant page during testing for Reviews task

Search feature

One user clicked the search bar expecting to search for Jollibee branches near their location as well. 


Action Plan: Since this user relies heavily on the search function to find categories, branches, and merchants, the search function may have to be explored again on how it should work to address this use case. 

Heat maps of Merchant page during testing for Search task

Heat maps of Merchant page during testing for Search task

Lessons learned

Remote user research is challenging but has its perks

Due to the pandemic, physical interviews were not an option for the team. Observations regarding body language and expressions could not be recorded accurately due to internet lag and the limitations of video calls. Still, we optimized the research process by maximizing the number of interviews done in 2 days through the convenience of video calls.

Detachment from any biases

We conducted thorough, continuous research in all stages; I validated or rejected my assumptions to form design rationalities, which were data-driven. With that, I got to turn the feedback into opportunities for improvement later on, such as the change needed in some icons or positions of some elements on a particular page. 

Early testing made adjustments flexible

Despite our timeline being short about working on the project, we were lucky enough to test our low-fidelity prototype on users. The results prove that testing should happen along the process and not only until the end. We were able to get feedback early on and made the adjustments flexibly without having to exhaust resources before moving on to high-fidelity designs. 

What would i do differently?

Exploring the search function further

Later in the project, the team realized how complex the search function was in returning results to the user. There would be many factors to consider, such as the product name, location, tags, prices, etc. I would have explored this further by researching other applications' search methods before coming up with an initial design for the search results screen. I would have also consulted the developers for advice on this matter.

A second round of testings

As the team had set out action plans for the designs after the usability test, revisions were done just when the internship program had ended. I would have wanted to do a second batch of testings using other methods such as A/B testing with the low-fidelity mockups.

Interested to read more case studies?

Check out my other works below ⬇️

Kumu's For You Page

Full-time, Product Design

Kumu's Livestream Setup

Full-time, Product Design

UnionBank 1UHub

Full-time, Product Design

Thanks for stopping by, let's get in touch!

Want to work together? Got a project that you want to talk about? Got any playlists you want to recommend? Feel free to drop me an email or message.

Designed and built by Arvin Almario