Build a Foundation:

Learn How to Start a Business

App and Responsive Website

Case Study:


Build a Foundation: Learn How to Start a Business

App and Responsive

Website Design

Project Overview

The problem

Many minority and marginalized individuals who want to become business owners and entrepreneurs want to learn how to start a business, but found many tools are too complicated, cumbersome, and do not have audio options.

The goal

Design an app and responsive website to help people learn how to start a business. The plan is to drive positive change in minority and marginalized communities through education of the steps to business ownership and entrepreneurship.

The product

Build a Foundation is a non-profit organization focused on educating minorities and marginalized individuals who want to become business owners and entrepreneurs in order to improve their communities. The organization needs an app and responsive website to help people learn how to start a business that is simple and accessible on the go because primary users are very busy with multiple responsibilities that take most of their time.

My role

UX designer leading the app and responsive website design from conception to delivery

Responsibilities

User research, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs, determining information architecture, and responsive designs.

Project duration

December 2021 to January 2022

Understanding the User

I conducted preliminary interviews with a few established minority business owners and entrepreneurs to gain general information about their experiences. I was able to develop interview questions for users who need help learning how to start a business. Most of the interview participants reported feeling overwhelmed and lost by the complexity of steps to start a business from some agenices and websites. Some participants gave up in the process of learning the steps altogether. The feedback received through research made it very clear that users need a simple and easy-to-use tool to help learn how to start a business.

Persona & Problem Statement

Roselyn

Roselyn is a busy wife, mother, manager, cook and baker who needs a simple website that helps her learn how to start a business that has clear instructions because she wants to be a restaurateur of traditional Puerto Rican cuisine and share her culture with the community.

Sherrod

Sherrod is a busy single man, legal guardian, PhD student and non-profit associate who needs a mobile tool that helps him learn how to start a business that offers audio options because he wants to be an entrepreneur with lots of financial freedom and develop an at-risk youth foundation for the community.

Competitive Audit

An audit of a few competitor's services provided direction on gaps and opportunities to address with helping minority and marginalized individuals to learn how to start a business.

View the full Competitive Audit and Audit Report

Ideation

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on simplifying a layout for steps on how to start a business while displaying video and audio options.

Starting the Design

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Build a Foundation: Learn How to Start a Business app. Based on user feedback, these designs focused on offering the user a quick start button along with video and audio options.

Usability Findings

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing the title of each step and selecting the "Learn More" button to read all the information about that step while offering video and audio options. Also providing clickable page numbers on each screen as another way to navigate through the app.

View Build a Foundation's (Learn How to Start a Business) low-fidelity prototype

The low-fidelity prototype was used in an unmoderated usability study with five participants. Below are the major findings revealed by the usability study:

1. Uncluttered Layout

Users want clean and concise information that allows them to easily understand what to do.

2. Menu Flyout

Users like an easy way to know the contents of the app, so they can quickly access what they need.

3. Call-to-Action Buttons and Headings

Users need clear indications of how to start learning with buttons, page numbers and topic headings.

4. Video and Audio Options

Users preferred an alternative way (instead of just reading) to learn the steps while they are on the go or when they are unable to look at the text directly.

Refining the Design

Mockups

Based on the insights from the usability studies, I applied design changes to the menu flyout and all screens in the app, especially by making the bottom navigation cleaner by removing repetitive items.

Additional design changes included adding page numbers to each screen which provide an easy and quick path to each screen.

Accessibility Considerations

1. Hierarchy

Clear hierarchy for users that rely on assistive technology such as screen readers.

2. Text with Images

Short sentences, graphic cues, and combining text with images which enables access across all literacy levels.

3. Video and Audio Options

Video and audio options provide alternate ways for users with learning disabilities and literacy challenges to access the information on the app.

Refined Designs

High-fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View Build a Foundation's (Learn How to Start a Business) high-fidelity prototype

Responsive Design

Sitemap

With the app designs completed, I started work on designing the responsive website. I created a sitemap to guide the organizational structure of each screen's design to ensure a cohesive and consistent experience across devices. Also providing users with a clear pathway to get what they need from my site.

Responsive Designs

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

View Build a Foundation's (Learn How to Start a Business) Mobile website

View Build a Foundation's (Learn How to Start a Business) Tablet

View Build a Foundation's (Learn How to Start a Business) Desktop

Going Forward

Takeaways

Impact

Users shared that the app and website made learning easy and engaging. They felt comfortable navigating through the screens. One quote from a study participant was that "the app and website are useful tools and both are organized in a way that makes learning how to start a business simple."

What I learned

I learned that users prefer challenging subjects or tasks, especially when learning something new, to be simplified and specific so they know exactly what, how and when to do it. They also want information to be presented in a manner that is empowering and motivates them to continue the task.

Next Steps

1. Team Collaboration

Collaborate with engineers to add animation to video and sound to audio

2. Testing

Conduct another usability study

3. User Feedback

Compile all data and feedback from usability study to make future enhancements