Pillar
Pillar is an iOS app I designed to help small business owners kick start their business by providing access to mentorship and viable financing options.
Pillar is a case study I completed as part of my UX/UI design bootcamp at BrainStation showcasing a full product design process from research to hi-fi prototyping.
Overview
The Client
This project is a case study performed in an education setting during the BrainStation UX/UI design bootcamp I attended in 2022.
Project Brief
Identify, plan, research, and design a hi-fidelity digital mobile solution that addresses a problem space of your choosing.
Team
Matei Anghel: Product Designer
Timeline
10 weeks
The design approach
I wanted to leverage design thinking and marketing driven design methodologies to create a solution that addresses a pertinent socio-economic issue that impacts Canadians. By applying a the double diamond approach shown below, my goal was to create a minimum valuable product (mvp) that is usable, useful and potentially marketable.
Source: The Fountain Institute
Inspiration
In 2011, I founded a non-profit organization called Everton Volleyball Club. Our mission is to grow the sport of volleyball in the Montreal region by making it accessible to all audiences.
I was general manager and then president of the organization guiding it through a high-growth phase until 2020. Today the club is one of the largest in Quebec offering coaching services to over 300 athletes every year.
Credit: http://www.guillaumeguardia.com
Startup struggles
In our first years, we struggled to recruit players, hire staff and find affordable gym space. This greatly slowed down our growth and there were times were we believed we would never make it.
Thankfully, we found community partners willing to provide us with free gym time and coaches that agreed to volunteer their services to help us get started.
Discovery and ressearch
Research & market sizing
I wanted to investigate if other Canadian businesses experienced the same struggles as I did at Everton. I wanted to ensure there is a large enough market for a solution addressing this problem space.
80%
of small businesses fail due to lack of initial funding & poor business management
70%
of the total private labour force in Canada is employed by small businesses
new businesses are founded in Canada each year of which only 20% survive past their first 12 months
95 000
User interviews
In order to further investigate the struggles of Canadian business owners, I interviewed 4 businesses owners from different fields who had varying levels of success with their ventures. They were all first time business owners and had started businesses in the last 5 years.
My objectives were to determine business owners’ motivations and pain points, what their start-up journey looked like, and what were the determining factors of their success or failure.
Source: Chau Fitness
Source: Unsplash
Source: Unsplash
“I struggled to be profitable for the first 2 years because I did not have the necessary skills in sales or marketing to be successful.”
-Chau Ngo (Chau Fitness)
“We could not access bank loans or financing because we were a new business. We were forced to borrow from family to start our business.”
-Wellness Center Owner
“It took us about a year to get the hang of proper scheduling and cash flow management before we became profitable.”
-Rémy Saminadin (Café Chato)
Problem space synthesis
Key findings
Based on my research and interviews, I was able to identify 3 areas of opportunity worth exploration. These represent the critical pain points first time small business owners experienced which I identified as the determining factors for the business sucess.
A lack of funds and business skills curbed our business owner’s ability to be successful during the early years of their business journey.
Providing sources of capital could help them increase their visibility & remain open long enough to become operationally efficient and viable.
Providing industry-specific mentorship or consulting resources could help them upskill quickly, plan for success and avoid common pitfalls.
How might we provide small business owners with viable financing and mentorship to enable them to grow their businesses and become profitable.
Problem statement
Persona
To help guide my design decisions, I created a proto-persona based on my research findings that accurately depicts a stereotypical customer. I wanted the persona to exemplify my target user base which is: a first time business owner at the start of their journey who is passionate and knowledgeable about their target industry, but might lack the experience and business acumen to be successful without assistance.
Market analysis
To ensure the solution I design is not a duplicate of existing and established products, I performed a marketing analysis into existing products aimed at small business owners.
As can be seen below, the markets of accounting/budgeting automation, marketing automation, and point-of-sale (POS) & customer relationship management (CRM) are already well serviced by competitive products.
Opportunity for a new product
However, there is a lack of solutions in the start-up financing and mentorship space. The existing products are ill fitted for first time business owners with limited experience, business history or funds. Finding and applying for financing is extremely complicated and difficult unless you have a high degree if financial literacy and an understanding of the Canadian grant system.
Competitive comparison: Existing grant & loan Solutions
User stories
I then began to put myself in Alice’s shoes in order to start ideating user stories. These user stories would eventually become the functions and task flows of the app. Given the lack of business history of our target persona, as well as a the findings identified earlier from business owner interviews; it felt right to focus on the grant search & application process.
Task flow
Based on the focused user epic of simplifying grant applications, I developed the task flow below that will guide the rest of my solution design.
Develop a solution
Solution sketching
The development process began by drawing upon existing products and compiling a UI inspiration board in InVision (see link below). Using this inspiration as a starting point and following the sequence of events established in the grant application task flow, I began sketching out a potential look and feel for the product.
Mid-fidelity prototype
I then translated my sketches to a mid-fi prototype using Figma. Throughout these initial design steps, I always stayed mindful of our person, Alice. She is busy trying to get her business started, thus I wanted to make the grant application process as intuitive and painless as possible despite its inherent complexity.
Usability testing
In order to perfect the solution and make the grant search & application task flow as simple and intuitive as possible, I performed 2 rounds of usability testing with 5 users each. I observed the users during their interaction with the app and asked a series of questions to help me identify improvement opportunities.
Home screen changes
The home screen changed throughout the usability testing process based on issues with accessibility and clarity of information. As I iterated on the design based on my users’ feedback, I added cards and subheadings to help identify and explain the functions available to users.
Grant filter flow changes
The grant filter flow is intended to help our user narrow down on their search criteria ensuring only applicable grants are displayed. Usability testing led me to simplify the questionnaire as much as possible while allowing users to go back on their selections at any time in the search process.
Deliver a minimum viable product
Brand identity
To develop the brand identify, I began by brainstorming moods & themes that would be relevant for the app’s mission. I wanted to evoke a feeling of calm, stability, and resilience since this is what we are hoping to provide our users through the app. This lead me to the creation of the Moodboard in InVision (view link below) used to inspire the visual identity of the product.
Brand development
As I was brainstorming on themes & visual identity, ancient Greece and Rome themes stood out as a good fit since I was creating a product helping business owners set foundations for their long term business success. This is how Pillar came into being alongside its colour theme evoking a Greco-Roman vibe.
Colours
I used beige, black and gold throughout my designed applying the 60-30-10 % rule throughout each screen to create an accessible and pleasing experience. I used white for text and CTAs applied on a dark backgrounds and vice versa to ensure readability.
Logo
I chose to create a very simple logo integrating a stylized ancient time pillar icon into the base of the ‘P’. I created two logos which are intended for use on different backgrounds - the gold logo with dark backgrounds and the black logo on light backgrounds.
Typography
In selecting the typography I wanted something very simple and direct that would evoke simplicity and efficiency. I also wanted to design for accessibility and make scanning screens and text as pain-free as possible considering that some content would undoubtably be very text heavy.
I chose Arsenal for the headings and CTAs for its wider stroke and classical look making it both easy to read and consistent with the ancient Greece theme.
Montserrat was a great pairing since it sports a thinner stroke with a wider lettering and more roomy spacing. This made it great for body copy and text heavy paragraphs.
Accessibility
Using the coolors.co contrast checker, I verified that my colour pallet would be as accessible as possible.
The black text on beige background and white text on black background were no issue. However, the gold and black could cause problems to certain audience unless the text is large font. For this reasons, I utilized gold on black only sparingly and made sure the text was as large as possible in these instances.
High fidelity prototype
Having assembled a UI library and visual identity, I built out a hi-fi prototype based on the final version of my tested prototype. As I was developing this final mvp of the product, I made sure to consider accessibility and ease of use for our busy persona.
Conclusion
Key learning 1: the first diamond
Throughout my time at BrainStation as well as in the execution of this student project, I felt the most important lesson I learned was that empathizing with the target user and defining the problem space is critical to the success of the design. Without this solid base, any solution you develop will fall on the wayside of your target market and never be adopted by your customer base; no matter how good looking it is!
Next steps
If this project was to be executed in the real world, the next steps I would undertake are as follows:
Build out other functionality flows
Correct accessibility issues mentioned above
Perform further usability testing
Promote the project & test the market
Partner with developers to build out the app on both mobile & desktop
Go-To-Market
Key learning 2: accessibility beyond colours
As I was showcasing my design with friends and family, I received multiple questions and negative feedback into my opening screen design choices. Why the half nude Greek marble man on the home screen? What do the tiny pictures of Greco-Roman sculptures have to do with financing and mentorship?
As I delved deeper into these issues, I discovered that some people were uncomfortable with these design choices and/or found they did not identify with these visuals. Consequently, it actually turned them off the app & the project! This made me realize that unconscious choices we make as designers can have a great impact on user experience; especially when we are designing for a wide audience. Taking into account differences in race, gender, culture, socio-economic status, etc. is extremely important in the design process. I will strive to do better in future projects!
Source: Unsplash