Designing an App for Small Businesses — A UX/UI Case Study
Given my desire to put the lessons I learned from my online courses into action, my friends and I decided to make a concept project to allow us to learn more about the process behind making digital products. The sudden influx of small businesses in Metro Manila due to the pandemic inspired us to design an app that would bring these businesses to the hands of the users more easily.
The Challenge
Design a mobile application that will give online small businesses a platform to sell their products to users in a more simple and direct way. At the same time, the application should help users explore more options and navigate a market catered to them individually.
My Role
I led the project by taking point and working hands-on throughout the entire process, starting from conceptualization until the creation of the prototype.
Project Goals
- To create an avenue for online small business owners around Metro Manila to sell their products.
- To create a simpler and more direct means of searching for, purchasing, and receiving products for customers.
- To promote certain small businesses to specific users to cater to their individual wants, as well as their location.
Target Audience
E-Commerce is a two-way process that involves both the buyers and sellers. For this project, we decided to conduct a survey on both small business owners and buyers to create a great experience for all users of the application.
The Design Process
We decided to follow this design process to ensure that all of our work and design decisions were backed by a strong understanding of the users, their difficulties, and their expectations. We allotted three weeks for this concept project.
Want to read this story later? Save it in Journal.
Research
To further understand the highs and lows of the experience for both sellers and buyers, we conducted a survey through Google Forms. The survey was a mix of both quantitative and qualitative questions to allow us to get an insight of the user’s demographics, use of technology, and experience with buying or selling products from small online businesses.
Competition Analysis
As we searched and asked around for apps frequently used by small business owners in Metro Manila, we found out that there was no application centered on online privately-owned businesses. We also found out that the most common applications used for small business transactions are the social media platforms — Facebook, Instagram, Twitter, and Viber. Grab also released a new service called Grab Merchant, where small businesses owners with no physical stores are encouraged to sign up to become merchants and partner with Grab to promote, sell, and deliver their food.
We then analyzed the different features each application brings for both buyers and sellers. This information would later help us identify key features to add to our application.
Survey Results
We made use of Google Form’s feature that allows the participant to go to a specific section based on his or her answer to a question. The first section of the survey immediately asked whether the participant owns a small business or not. Through this, we were able to separate the buyers from the sellers to ask them different questions.
22.9% of the survey participants owned an online small business. Majority of them sold food online. Other business owners sold clothes, kitchen ingredients, hand-painted bibles, accessories, and bags.
We also used the survey to determine the number of customers each seller has in a week, the common payment methods used, the common platforms used to sell products, and the rankings of different factors that affect their choice of platform. We learned that sellers use Instagram the most to market and sell their products, with popularity and method of communication leading the factors that affect their choices.
The survey also helped us determine the participants’ frequency in buying products online, the platforms he or she uses, and the different factors that affect their choice of platform. The results showed that food is also the most common category these participants buy from. Instagram is also their most used platform for buying from small online businesses. While popularity was the most important factor in choosing a platform for the sellers, the results showed that market saturation was the most important factor for the buyers.
Quotes from the Small Business Owners
“Promoting baked goods is difficult considering that the market is already saturated with tons of other sellers of the same products that I sell.”
“Very easy to talk with [buyers] through IG and Twitter DM. I think the only problem is they both require wifi / mobile data to use, so if I don’t have either, I wouldn’t be able to communicate with them.
“[Communicating with buyers] on Messenger got a bit difficult because messages get pushed down or moved to spam.”
“[Receiving payments is] difficult for BPI (bank transfer) because it does not really specify in real time who is paying you.”
Quotes from Buyers
“…I would say it’s pretty easy to find small businesses… Hashtags are pretty useful and you can also refer to an account’s “following” to possibly help you find more businesses to support.”
“It is very easy to find something that is accessible to me since my chosen platform (Viber) is created solely for the Alabang community. Two features that I like about Viber is that you can easily message the group for something you’re looking for, or you can search in the chat.”
“It’s difficult when there are businesses that have the same listing pictures, but reviews say otherwise. Also competing with a lot of buyers on a first to mine basis is hard because you have to be speedy.”
“The problem with online ordering is that the reply of the seller is not immediate. But in regards to sending messages, it is easier, especially since [Facebook] also has ‘recommended questions’ that pop up when you open the chat box.”
“[Paying] would sometimes be difficult for me as I have to shift from app to app.”
These direct quotes allowed us to understand and identify the pain points and gain points of users when selling and buying from online platforms.
Understanding the Users
Due to the COVID-19 pandemic, our team was not able to meet up physically at any point during the project. This drove us to use Trello, a list-making application, to consolidate the different insights we got from the user surveys and interviews into empathy maps.
We created one empathy map for the sellers and one empathy map for the buyers to allow us to focus on one target audience at a time. The empathy maps were made by analyzing the answers of the different survey participants and interviewees. The answers were then separated and sorted into what the user sees, hears, says, does, thinks, and feels, together with the pains and gains of the user while shopping online.
Personas
We were able to create four personas based on the empathy maps we created for both buyers and sellers. The empathy maps allowed us to create short persona biographies, give them goals and frustrations, and understand their wants and needs when buying and selling online. We made two buyer personas and two seller personas to give us different insights from four different possible users. This allowed us to have a more humanized and real user figure to base our work and ideas on.
How might we…
We were able to find common frustrations and pain points from the users after carefully analyzing the empathy maps and the personas. These problems helped us in developing “how-might-we” questions — questions we ask ourselves to identify ways to solve the users’ problems.
For example, one key frustration we were able to find from the buyer was the difficulty he or she faces when keeping track of orders. This led us to formulate the question, “How might we help the buyer keep track of his or her orders?” From this question, we were able to come up with two different solutions. First, the buyer should be notified with an alert that announces a “delivery today” or “delivery tomorrow.” Second, the buyer should be able to see his or her pending deliveries in one section of the application.
A dating app… but for online stores?
After determining the must-have features, my teammates and I started to brainstorm to come up with a unique feature in our application that would set it apart from the others. My jokes about being single and ‘dating my food’ eventually became the foundation for the swipe feature of this application. We wanted to incorporate the swipe left and swipe right features of dating apps like Tinder and Bumble into our application.
We originally thought of using this feature as a means of onboarding. However, we realized that it could be more than just that. Eventually, we decided that the feature should become one of the main gimmicks of the app. The Swipe Mode would be used as a means for the user to swipe through different products and businesses if he or she were too tired to manually search for something or just simply wanted a more fun and unique way to find products to buy and businesses to support.
User Flow
After listing the features we wanted down, we had an idea on how to start the flow and how we wanted the app to work. We wanted to incorporate the must-have features without overwhelming the user, thus, we came up with this flowchart to guide us and allow us to properly distribute the information and features throughout the different screens of the application.
The biggest challenge we encountered while making the user flow was identifying what options should be present on the navigation bar. We identified the home option as a non-negotiable component of the navigation bar. The team went back to the personas and empathy maps to review what the most important features are to the users, and from there, we were able to determine that messaging and notifications were crucial to the navigation. We also decided to add a menu option, similar to that of Netflix and Facebook. This would allow the user to navigate the app more freely.
Since we also decided to make the swipe feature one of the main gimmicks of the app, we added the “swipe mode” option to the navigation bar to give users easier access to the feature.
Wireframes
The impulsive side of me wanted to go straight to designing screens. Perhaps the old me would’ve done that. Thanks to the different online courses I took prior to this case study, I understood that wireframes were essential to get an idea of how I wanted the app’s layout to look. This saves me from the hassle of changing designs every now and then. I used different Figma tools and shapes to build the layout and structure of the application. Every shape and text followed an 8pt grid to keep the elements organized and structured properly.
Branding and Style Guide
I had already set branding keywords at the beginning of the project. The visuals were meant to be minimalist, modern, and clean. These keywords guided me as I created the branding and the style guide for the application.
Spprout
We came up with the name Spprout by thinking of words that represent our business. We wanted to help small online businesses grow by creating a platform for them to sell their products to buyers in a more simple and direct way. The word “support” came to mind upon discussing our desire to support these small businesses. I also realized that sprout is a word related to growth, at the same time, can be a play on the word “support.” From these, Spprout was born.
Logo
I decided to work with a logotype to bring focus to the name of the application. I wanted growth and support to be the central theme, therefore, I found it important to keep the logo centered on the name.
The leaf represents the sprouting of the business after it has been planted. Like a seed in a garden, everything big starts as one small leaf. I incorporated this leaf into the logotype to give more life to it.
Typography
To follow the minimalist, modern, and clean brand that I set out for, I used a sans serif typefaces — Montserrat and Circular Std. I decided to use Montserrat for headers, subheaders, and buttons to show emphasis. I used a geometric typeface, Circular Std, for the body to give users an easier experience reading blocks and groups of text.
Colors
From the moment we decided on the name Spprout, I already knew that the color green would be the base of the design. I decided to go with an analogous color scheme centered around the color green, then added a complementary color — purple. Since we wanted to go for a minimalist, clean, and modern vibe, I chose colors that weren’t too strong.
Prototype
…and finally! Designing the screens was the most enjoyable part of the case study. Having wireframes to work with made it so much easier, since I only had to focus on the design of the screens rather than thinking of the design and the layout at the same time. I made a few changes to the layouts of the original wireframes to match my designs.
I used gradients to make the design look modern. At the same time, I left a lot of white space to keep it minimalist and simple. Most interactive components have shadows to help the users understand that they are, indeed, buttons.
Some parts of my design were inspired by applications like Grab and Foodpanda — specifically the designs for adding products, setting delivery times, and viewing the user’s basket. The illustrations were downloaded from Undraw, which I then edited to match the colors and branding of Spprout.
…Now what?
The next step would be to make a working and interactive prototype to get potential users to test it out. User testing is one of the most crucial parts of the UX journey and is essential to making sure that the product we release is user-centered. The process we chose to follow calls for multiple iterations and adjustments to the design and flow of the application based on feedback from user testing. Due to the COVID pandemic we’re facing right now, the team opted to delay user testing and wait for the pandemic to pass before continuing. This way, we’d be able to more accurately test and determine the user’s journey as he or she works to accomplish a task in the application.
Conclusion
I’m overall satisfied with how my first case study worked out. We were able to accomplish most of the goals we set in a short span of time (during a pandemic!) and I, personally, learned a lot from the experience. Setting a strict schedule for this case study together with my school work, my online courses, and other deliverables helped me finish the case study in the time frame we set. This was also my first time to use Figma (I used to be more of an Adobe XD guy), so I’m really happy with how my designs turned out.
What I Learned
I learned a lot from the process and the experience. Here are the most important things I learned:
- Be specific with your problem. We often think we know what we want to solve, but research and surveys will help understand that there are a lot of aspects to a certain problem.
- Research is key. Before starting the surveys and interviews, I initially thought that I knew what I wanted for my users. I knew what problems to solve and I knew what things to focus on. Conducting surveys and analyzing their answers reminded me that I am not my user. I may use the product, but I don’t know what others really want. I also got perspectives on how buyers and sellers currently work around different problems and challenges. Interviews are also important because they let you see problems the users don’t think they have.
- Personas are important! While taking my online courses, I learned that most people skip persona making because it’s a “waste of time” and making fictional characters won’t help. Experiencing it firsthand made me see that understanding the users and solving their problems become way easier once we have a persona to work with.
- MAKE. WIREFRAMES. Don’t skip it. Designing becomes easier. Seeing the “undone-ness” of low-fidelity prototypes prevents you from thinking that a layout and design is final, thus giving you more freedom to make changes.
- Understanding the user is always at the core of a project. All my online courses would talk about user-centered design and how every decision should be based on research. This case study allowed me to see those concepts in action.
Thank you!
Thanks for taking the time to read my first ever case study! If you have any suggestions, questions, or inquiries, feel free to email me at cjatienza61101@gmail.com.
Let’s connect on LinkedIn!
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
