Michael Zhang shares design process for local shopping mobile app

Michael Zhang is currently a second year Management Engineering student at the University of Waterloo. Michael spent time at Waterloo studying to be a software developer, coding to accomplish complex tasks in simpler and efficient ways.

His knowledge in Visual Basic for Applications (VBA) streamlines and eliminates manual and tedious organization in Microsoft Excel, which helped Michael create a Decision Support Tool for group projects that utilizes algorithmic processes to organize and parse information. His expertise in Java allows him to understand the different methods to approach a problem. His background in Java served as a stepping-stone into back-end development with JavaScript, and front-end with React and React Native. Currently, Michael is designing and developing a mobile application for iOS and Android with Metaranx to enable local shopping through Shopify stores during the pandemic, which is currently still in the design process.

Michael is a Student Learner alongside fellow Student Learner Avi Cahoon and they are spending their January to April 2021 term as part of the Metaranx team. This is part of the Bridging Entrepreneurs to Students (BETS) program at the University of Waterloo. With Metaranx's CEO Samantha Lloyd, Michael and Avi are learning about professional development, digital marketing, and project management. With Metaranx's CTO Lisen Kaci, Michael and Avi are learning mobile and web app UX/UI design and software development. Metaranx was accepted into Waterloo's Velocity Incubator in 2020 and learned about BETS through their incubator.  If you're looking for talented and bright students to join your startup, consider applying to BETS!

The Bridging Entrepreneurs to Students (BETS) program is a specialized co-op program established to support two key groups: junior engineering, mathematics and SAF co-op students, and seed and early-stage startup companies who would not otherwise have the resources to hire full-time staff or co-op students for 16 weeks. The BETS program brings these groups together by pairing teams of two entrepreneurial co-op students with companies for a 12-week project placement.

Michael and Avi are currently in-progress building a mobile app on iOS and Android for Metaranx's local shopping platform. Below, you will see what Michael has created during their time with Metaranx from the early stage thought process of working through the target user demographics and researching other apps and their designs to building an app in React Native to be published on the Apple and Google Play stores. Michael shares his experience designing the initial stages of Metaranx's mobile app below.

Thinking through the initial stages of app design: inspiration from popular apps

This is my first time creating an app, so I took a lot of inspiration from other popular apps like Tik Tok, Instagram, and Uber Eats. The main aspect that I was focusing on from these popular apps are their general Key Performance Indicators (KPIs) such as how these mobile apps keep users on the app and how they organize the content users want to see to continue engaging them. These apps are popular because they have great user experience and user interfaces, making them simple to use and used often.

Getting inspiration from popular mobile apps to inspire the app design process: infinite scroll

Instagram and Tik Tok both have a near infinite scrolling ability where users just keep scrolling down for more content, which creates the feel that there is no end and people stop whenever they want to. Tik Tok is able to keep people scrolling for a long time because they show a mix of content that is both viral and tailored to the user, called a “For You” page which is also the landing page. Instagram has two near infinite scrolling sections, one on the landing page and one on the explore page.

After scrolling past all the recent posts from the feed, a “Suggested Posts” section appears and shows tailored content to make the user feel like they did not reach the end yet. On the explore page, posts are lined up in three columns and the user is able to scroll down for as long as they want, or they can enlarge a post and see captions, comments, or like the post. Once they click on a post in the explore page, similar posts are added below, and the user is able to scroll down freely again. Both of these apps can have users spending hours scrolling through content.

In my app design, the landing page would also serve as a “For You” page with shops tailored to the local shoppers based on past purchases, shops browsed, or products browsed or saved. This method of designing the "For You" page relies on the local shopper being a regular user on the mobile app or platform in general. If the person is completely new and has not shopped with Metaranx yet, then the shops on the landing page would be popular shops among current shoppers or featured shops recommended by us.

Michael Zhang's original design ideas for Metaranx's mobile app

Getting inspiration from popular mobile apps to inspire the app design process: categories

Uber Eats is a food shopping app, which I found has some similarities to the app I am working on in terms of use of the platform and the marketplace component. Their main goal is to sell food to individuals, while also offering restaurants (fast-food chains to local restaurants) a marketplace to sell their foods. Metaranx’s goal is to sell products from local stores and shops to individuals, while also offering local businesses an online marketplace to sell their products.

The way Uber Eats organizes the restaurants is great for attracting users to order more, as they separate them into categories like “Your Favourites,” “Today’s Offers,” “In a Rush,” and “Buy 1, Get 1 Free,” which all have a certain incentive to order from. The different categories can be seen by scrolling vertically and the restaurants that are in the category can be found by scrolling horizontally in a category, which allows for a lot of restaurants to be on the landing page without having to scroll for a long time to find a specific one. Uber Eats' search page is also organized with categories listed in rows of two and an image of a generic dish from that category, so users can locate specific cuisines with ease.

Getting inspiration from popular mobile apps to inspire the app design process: exploration

The explore page for my app also pulls inspiration from similar marketplace and shopping mobile applications. I list every category under a search bar so users can find a specific type of product or store fast and easy. A difference between this local shopping app I'm designing and others on the market is what happens when the user clicks the search bar. In my design, once the search bar is clicked on the Metaranx mobile app the list of categories will be replaced with search filters. The user can add criteria of what they want to search for. The user will also be able to search for specific products simply by typing a specific product in the search bar. From there, a list of shops that sell the searched-for product will appear. I am designing the Metaranx mobile app with the local shopper in mind to provide them an easy and seamless shopping experience from local stores in their area.

--

Next step, which is already in progress, is to develop Metaranx's local shopping mobile app in React Native. Using React allows anyone to build an app that can be used on both iOS and Android. Lisen is teaching Michael and Avi the process of designing and developing a mobile app, as Lisen already has a gaming app on the Apple Store and many web apps created and built. Look out for more content from Michael and Avi about building a mobile app soon!

Michael Zhang

Michael Zhang is currently a second year Management Engineering student at the University of Waterloo. Michael spent time at Waterloo studying to be a software developer, coding to accomplish complex tasks in simpler and efficient ways.