Avi Cahoon shares design process for Metaranx's local shopping mobile app

Avi Cahoon is an engineering student at the University of Waterloo, studying Mechatronics Engineering. Avi cares about creating experiences and products that build a seamless and natural user experience, centring around the user in design. They love to build products that customers want to keep using through software design that fits Metaranx’s goals!

Avi is a Student Learner alongside fellow Student Learner Michael Zhang 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, Avi and Michael are learning about professional development, digital marketing, and project management. With Metaranx's CTO Lisen Kaci, Avi and Michael are learning mobile and web app UX/UI design and software development. If you're looking for talented and bright students to join your startup, consider applying to BETS! Metaranx was accepted into Waterloo's Velocity Incubator in 2020 and learned about BETS through their incubator.

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.

Avi and Michael are currently in-progress building a mobile app on iOS and Android for Metaranx's local shopping platform. Below, you will see what Avi 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. Avi shares their experience designing the initial stages of Metaranx's mobile app below.

Beginning the design process for a local shopping mobile app

The process of creating the design and layouts for the Metaranx app was highly iterative, with us making different designs, modifying, and adding to them after discussing the previous version. This process let us come up with more new ideas and improve upon our initial thoughts over time, resulting in a more defined and well-developed end result.

We began by brainstorming ideas for the layout and visual style we wanted to use, starting by drawing out some designs with placeholder colours and hand-drawn icons. I used a digital art program and a drawing tablet to create these designs, to mimic hand-drawing layouts while also giving more flexibility and tools to this design process when compared to hand drawn designs.

Avi Cahoon's design for front/browse page and bookmarks page design
Michael Zhang's product/individual item page design

The main inspiration I used while drawing these designs was Instagram and other similar social media apps. Considering that the purpose of the app is to introduce users to new stores and products and allow them to search for the products they were interested in, the social media format seemed like it would be beneficial. Additionally, the familiarity of this type of app would make the user feel more comfortable while navigating it. 

Expanding on the design for Metaranx's local shopping mobile app

I then showed these designs to the rest of the team, and we discussed the advantages, disadvantages, and alternate designs. We kept most of the design that same at this point and discussed how we wanted to include some features that we had not drawn pages for, such as the search bar. We explored different filtering options for the mobile app design, as well.

Michael Zhang's design for category search

The user experience of Metaranx's local shopping mobile app

From this, I then drew out a rough storyboard on paper to map out how a user might move through the app, looking through both products and stores. The user journey and flow was based around a persona of two user groups for the local shopping mobile app: the local shopper and the shop owner. We also looked at the Key Performance Indicators (KPIs) our app needed to focus on and tried to make the routes to reach those actions as simple and understandable as possible. This was especially focused on encouraging sales and displaying as relevant products as possible to the user.

Avi Cahoon's rough, on-paper storyboard concept for Metaranx's mobile app

I then made a cleaner, coloured version of this storyboard digitally. For this version, I still hand drew the icons and generally focused on getting the ideas recorded clearly, not proportioning everything exactly as it would be in the final version. For this version I used the final colour scheme, based on Metaranx’s brand book. Blank (sometimes labelled) squares were used to show where different shop-provided photos or iconography would be included.

Avi Cahoon's storyboard showing user journey and progression through Metaranx mobile app

Next steps for developing Metaranx's local shopping mobile app

After some discussion we decided to keep this general design and agreed on the user journey. We did decide to switch the vertical scrolling through items to a set of “carousels” of items. This allows us to split the items into separate categories while easily displaying them all on one page or view. We were generally happy with the progression between a front page for browsing, individual item pages with recommended or similar item links, and store pages linking back to additional items. We believe this layout would encourage users to find, search for, and save more relevant items with the goal increase sales to local shops through Metaranx's mobile app.

--

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 Avi and Michael 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 Avi and Michael about building a mobile app soon!

Avi Cahoon

Avi Cahoon is an engineering student at the University of Waterloo, studying Mechatronics Engineering. Avi cares about creating experiences, software, and products that build a seamless and natural user experience, centring around the user in design. Currently, Avi is a Student Learner at Metaranx as part of Waterloo's BETS program and designing and building a mobile app.