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.
For us to have a proper collection of data, we decided to set goals for the interviews. These include the following:
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 out of 44 participants
Card sorting done in Whimsical
Interview results based on 24 participants
Opinions of participants on 3rd party services for food businesses
The product is designed for four users, namely:
User personas formed based on the data collected
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 for two personas done on Figma
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 done on Whimsical
User flows of the personas for making an online order
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.
Sketches done using InVision Freehand
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
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.
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.
This allows users to view best-selling products from merchants on the Homepage.
Wireframe for Homepage
This allows users to view best-selling products from merchants on the Homepage.
Wireframe of Special Offers section of Homepage
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 Homepage
This allows users to view best-selling products from merchants from the Homepage.
Wireframe for Reviews Section of Merchant page
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
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
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.
User flow of searching a product
_epo2ly7c.gif)
User flow of viewing a merchant page
User flow of viewing a favorite merchant
User flow of making a merchant review
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:
Initial Merchant page (left), Merchant page with new "Share" icon (right)
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.
Initial Search Results page (left), Search Results page with filter (right)
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.
Initial Reviews section (left), Reviews with three previews (right)
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 Homepage during testing for Categories task
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
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
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.
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.
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.
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.
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.
Check out my other works below ⬇️
Full-time, Product Design
Full-time, Product Design
Full-time, Product Design
Designed and built by Arvin Almario
