Loading...

Gro

Built a guided experience and resource hub for non-business savvy entrepreneurs to jump-start their idea to launch a business.

A web/desktop app that will assist you to develop your business idea to launch your actual real business. Consists of step-by-step educational modules, lessons, interactive assignments, informative videos, and resources.

My contribution: Branded the UI and developed UX flows for the app. Since there was an enormous amount of content embedding into this web app, I had to develop ideal layout options to create an effortless user experience; making the content more approachable, also interactive.
Client
Gro

Tools
Adobe XD, Lucidcharts, Shortcut, InVision

My Role
Product Designer

Team
1 Product Manager
1 Lead Developer/CTO
7 Developers

Hypothesis

In the general public, it’s very common for people to have the dream to one-day own a business. Although one of the main business foundation questions when starting is, what are the steps in order to fulfill my ultimate business dream? With unlimited internet resources, varying from video tutorials, blogs, research articles and etc; it’s understandable that starting a business can get overwhelming. For any new business owner, especially those who are experts in their industry but not necessarily business and legal savvy. For that broad common use case, an ideal scenario would be if the business planning was simplistic, straightforward and preset. So they can focus their energy on the industry field they specialize in for their new budding business.


Origin
Background

Gro was previously called 'Wicked Start'. It was a web app integrated within the NYU Stern website. They wanted to build a stand-alone app with a similar base idea of helping people start their own business.

Old designs

This was the old designs, prior to me joining. These are for visual purposes to capture the main ideas of the potential app. In order to pitch design candidates in the hiring process.


Understanding the User

Always hunting for info online

For newcomer business owners learning about how to start and launch a successful business, there are resources sprinkled all over the internet; such as blog articles, business mentors, ebooks, and videos from gurus in your industry. It can be very daunting always searching and figuring out for that information is best for your certain business industry. With Gro you don't need to leave the app to grasp the knowledge (specific in your industry) of how to start your business. Gro is an all-in-one guided journey and resource hub, so you don't feel lost or confused. So you can focus on your dream of being a business owner.

Why does new business entrepreneurs need Gro

Three in five Americans have a goal and dream of owning a business. Many don't know how to start, Gro helps a budding entrepreneur understand everything that goes into creating a business before they invest resources carelessly — Which can result in a failed business. "According to data from the U.S. Bureau of Labor Statistics, about 20% of U.S. small businesses fail within the first year. By the end of their fifth year, roughly 50% have faltered. After 10 years, only around a third of businesses have survived." After launching a new business, it's best to surround yourself with a great team, such as lawyers, accountants, designers, and etc. Which can be expensive for new business entrepreneurs starting off. Gro can help you figure out the finance, branding, pitching to investors, and etc. so you can make smart decisions in steps when creating a team. With tons of information online on how to start a business, info is sprinkled everywhere — which can be overwhelming. Gro is an educational app that breaks down everything and it's a hub resource for all your needs for creating a great foundation for your new business.


The product

Goal

To help users launch their dreams of being a business owner, with an all-in-one guided journey that’s effortless and easy to follow.

Experts

Gro gathers robust content, data and insight from experts and business owners in different business industries for the app. You will be learning from the best in the industries. With the collaboration of expertise in multiple fields related to specific business industries, it gave Gro the upper hand on becoming a mega-hub web app for an all-in-one experience for new business entrepreneurs.

Product Lifecycle

From business idea to launch

  • Have a business idea
  • Sign up to Gro
  • Customize with your needs and industry
  • Start your journey with Roadmap
  • Access useful lessons, assignments, resources
  • Finish Roadmap
  • Get funding
  • Launch your business


Branding
Testing out colors

Tested out different color combinations for the visual design of the app based on the company’s color scheme. Since this is a learning app with a lot of content, I didn’t want the user to be visually overwhelmed and distracted from the app colors. Ideally, they should focus on the content (text, assignments).


User Journey
flow chart
Wireframes

Created a series of low-fidelity and high-fidelity wireframes, which helped paint a visual picture for non-technical team members.

Your path

Ideally, I wanted the experience of the Roadmap to flow similar to a journey showing your path from point A to point B. To give the user a sense of accomplishment, as you check off each module display path and numbered chronological order timeline.


Layout Challenges
Roadmap sketches

Brainstorming on which layout would be best for the roadmap.

Roadmap layout

Figure out which layout of the roadmap is the best solution for the user. Which is more approachable? Which direction better (horizontal or vertical)? What do I want to accomplish with this layout direction. Gro was part of an incubator, so we sent out an A/B test of the roadmap layout to get feedback from people outside of our team. Tested out multiple layouts and directions to display the modules/steps, so it's not overwhelming and easy for the user to comprehend. Since there's a decent amount of information within each module display in the Roadmap. I wanted the user to focus firstly on their current module they left off on, as soon as you jump in the Roadmap and secondary or the status of an uncompleted or new next lesson within their current module or lesson so they can jump in quickly using a call-to-action button. To give a simplistic experience to navigate through the main purpose of the app; for users to gain knowledge through lessons and assignments. The Roadmap is the main hub of the app.

Roadmap layout before and after

We ended up with the horizontal layout. The vertical layout seemed more like a to-do list VS the horizonal layout is like a journey/road to your destination.

Lesson's additional resource placement

Within each lesson, there is a vast curated amount of resources to benefit from relating to each lesson or lesson's assignment. Resources such as advisors, documentation, books, blog articles, related podcast episodes & series, and editable templates. These lesson resources are also included in the main Resource hub screen (which can be filtered by lessons). For the isolated lesson resources, it was overwhelming the main lesson's page, (since the lesson alone is has a lot of important content and assignment); so I crafted up a designated additional lesson's resource sub-page/screen which organizes the hierarchy of the mandatory lesson and assignments, separating the bonus lesson's resources.


Onboarding launch challege
Onboarding solutions

“New users don’t sign up for your product because they are excited to learn how your product works…”

Came up with a last-minute solution for the tutorial flow for new users. Ideally, I wanted an interactive walk-through (circle or highlight the features of any screen that's they are in for the first time). Displayed via live-code and show an overlay panel with a short amount of text on it to explain how to use that feature. While clicking through features in the walk-through. Unfortunately, the dev team could not produce that method in time for that version of the app. We definitely needed an tutorial solution for launch, so users can get a full understanding hot to use the app. The dev team suggested having an image slide tutorial overlay. I think that some users would click through the tutorial flow fast/skip through without comprehending. I wanted a method to grab attention especially for the most impatient users, so I created a video walk-through using moving prototypes and we used a voice actor to explain and show the app features per first time visiting a screen.


Prep
Project management

We had weekly stand ups via Clubhouse.io every Tuesday to see how's everyone's doing and what have planned for the week. Also discussed which issues are blocking anyone, went over upcoming tasks, bugs, and any backlog entries. The sprint length for the MVP was about 8-10 weeks; and 2-3 weeks for any new features.

Assignment scenarios

Laid out how assignments would display and interact based on how the user inputs/answers questions within the assignments.

Design systems

Once the visual designs and layout structure is approved, I had to make sure the dev team has all the design specs. So they have anything they need to make the app pixel perfect. That way the visual and architecture of the app is aligned closely to how it was meant to be.

Menu icon scenarios

With a lot of lessons per module/step, I wanted the user to have a visual cue on the status of the lesson. To achieve this, I designed different icons assigned to a different status.


Final Product
Roadmap

Overview of all the modules with a timeline and details, so you can see where you are in your business journey.

Modules:

  • Your Business Idea
  • Market Research
  • Naming Your Business
  • How It Works
  • Building the Team
  • Branding & Marketing
  • Product Development (MVP)
  • Incorporation & Legal
  • Operations & Logistics
  • Financial Planning
  • Business Pitch Deck
  • Business Funding

Lessons assignments and lesson resources

Each lesson has a different interactive assignment and additional resources.

Assignment examples

Mocked companies are used to help the user visually understand each assignment for the industry they are in. Examples are provided in each assignment.

Additional examples
Altra Media
Fresh Snack
SleepMate
Spiked Cafe

Dashboard

Display weekly inspiration, announcements, your roadmap overview breakdown. To see how you are progressing towards your goal.

Resources

Helpful resources from entrepreneur advisors, such as service providers, article posts, podcasts, books, and document templates.

Community

We’re entrepreneurs who share experiences in a supportive community. You’ll be able to ask questions, get answers, and learn from your peers.

Export deliverables

As you progress through the curriculum and complete lessons, you’ll get valuable business planning documents, which include: 1-page business brief, business pitch deck, branding style guides & projected income statement.

Mobile/responsive version

Adjusted the layout for users to view the web app through their mobile or on smaller screens.


Outcome
Partnership with Entrepreneur

We successfully launched Gro and made it available to a number of entrepreneurs looking to establish their business idea into an actual launched business. As a result of the successful launch, Gro partnered with Entrepreneur, white-labeling the platform for their own SYOB (Start Your Own Business) app. As part of the partnership and white-label requests, I had to make sure to use Entrepreneur branding schemes (colors, fonts) to customize the new app for Entrepreneur.

Where are they now

Since Covid-19 impacted the global economy, and the drive to start a new business; unfortunately Gro is no longer in business.