This case study focuses on the end-to-end design process of a mobile app that's currently in development.
🎯 Our Mission
How might we allow business owners to manage customers and transact in one integrated experience?
The small business space is cluttered with disconnected solutions that force entrepreneurs to use multiple tools for simple tasks. They often need an app to see their leads, an app to manage their contacts, and another one to process payment. This demographic is typically on the go as well – rendering strictly web-based solutions near impossible to use.
The Marketing 360 mobile app sought to identify integral solutions for entrepreneurs on-the-go and integrate them into one app.
More key questions...
• Which of the complex tools available on the SMB (small-to-medium sized business) space is actually necessary for day-to-day operations?
• How do merchants process payments? How should it work?
• How might the ideal workflow look? Who can we observe or talk to in order to learn more?
🙋🏻‍♂️ My Role
Lead Designer
I worked with our Chief Product Officer, a Designer and 2 Product Managers. I also supported a team of engineers throughout development.
🔍 Research
We sent a survey, conducted 6 client interviews, gathered feedback from internal stakeholders, and reviewed existing solutions.
To gain a holistic understanding of the space, we pursued different angles of research. The key areas were: the roadmap, the market, and the user. Using Google Analytics data, we generated a report of the most active users on the Marketing 360 web app. We sent a survey to 150 businesses and used the responses to find people who were most representative of our target personas across multiple different verticals. We developed questions that revolved around their day-to-day to surface insights on their interactions with their customers and any existing tools that they may have already been using. We analyzed these competitors, complied our findings, and presented it to the business to garner buy-in and get more feedback.
💡 Key Findings
• Leads come from multiple sources like phone calls and submissions from different forms. Managing all of these inputs separately results in an inconsistent experience for the business owner and their customers.
• As hypothesized, it isn't feasible for small shops and plumbers to carry a desktop computer everywhere. They needed a clean and portable platform.
• Business owners only needed a fraction of the functionality offered in most web-based solutions. 
• A key weakness of other solutions is how difficult it is to get on-demand support. Business owners did not have the time to sit on long queues when their POS devices malfunctioned. Our product needed to anticipate these issues and provide onboarding tools, documentation, and superb support.
🌟 Converging on Solutions
Using our findings, we narrowed the web app to the essentials and drafted the ideal architecture for our light, but powerful native mobile app. It needed to consolidate leads in a single feed, allow entrepreneurs to quickly get in touch with their customers, and quickly transact using various methods (invoices, subscriptions, one-time payments, etc.)

Users needed a mobile solution that integrated across different products. Viewing a contact in our app would allow business owners to initiate any type of transaction. The data is tied between the CRM and the Payments application, resulting in a cleaner, more organized experience.

Manually entering card details to transact took up to 2-3 times longer compared to a dedicated POS device. By consulting with experts in the payment processing space, we were able to narrow our focus to a single device for an MVP. The BBPOS Chipper 2x BT would allow our merchants to transact faster, easier, and more reliably by reducing input errors. It also easily integrated with our processing and gateway partners, which made for easier development.

Serving numerous verticals meant having to solve for a breadth of use cases. Refunds had to be flexible – allowing for custom amounts and for the selection of line items from an invoice.

📐 Prototypes
The prototypes encompassed all major user flows that we outlined after our research. This included the ability for users to see different types of leads (phone call, form submission, email, etc.), to quickly process payments from a stored credit card, and to issue refunds of varying amounts.

From wireframes, to initial concepts, to final designs.

Our prototypes included all key interactions to provide accurate testing.

 As we iterated, we tested more and more interactions.

🎨 Visual Language
The guiding principles for the visual design of the app was derived off of the design system that we previously established for the web app. More on this on the Marketing 360® Web App project.

Being the first native mobile app for Marketing 360 meant we needed to build on top of a solid, well-documented design system. A simpler design language was developed off of the web application.

📝 Validation
We conducted usability tests, collected feedback from experts in the payments space, and went through 4 iterations.
• We learned that users needed even less than we thought. We removed actions that were not needed regularly (like editing a payout schedule) from the mobile app. This reduced our scope which equated to lower development costs and allowed us to hone our focus further on what's important.
• We learned about the most important reports that business owners regularly want to see.
• As they review leads, we learned that users typically take notes while listening to a call recording. We made sure to keep the playback going when a user opts to take a note.
 Final Deliverable
Huge buy-in and quick sign-off for development.
When the final designs were presented, the business was ready to fund the initiative. Thanks our research, testing, and validation from multiple sources, the company had complete buy-in to our plans. The fact that we designed alongside key stakeholders helped smooth the process along too.
We sent out an RFP, chose a vendor, and the project is well on its way.
Not pictured in this case study is the best-in-class support that our company developed to support our merchants. We worked with them to expand their capabilities to support the mobile app as well when it launches.
The mobile app is in development and is expected to ship in Q1 of 2022. 

Reviewing different lead types from various sources

Taking a one-time payment using a stored card

Issuing an invoice refund

🙇🏻‍♂️ Thanks so much for your time! Maraming salamat po!

More Projects