Framework

Designing a Generative AI website for small business owners.

Framework

Background

Overview

As a class project, we were given the assignment to create a service (Website or Mobile Application) that utilizes the capabilities of generative AI.

The Harris Poll found that 92% of potential entrepreneurs in the US didn't follow through with their business ideas.

-39 % didn't know how to get started.
-29% didn't have access to business tools.
-26% weren't sure how to work with the tools/technology needed to run a business.
-25% didn't have enough time for a new venture.

Companies like Wix help you create a website, but do not allow users to create branding.

Team

(Myself) Ryan Anderson, Molly Wolcott, Chris Heredia, Jasmine Ochoa

Role

Brainstorming
Ideating
Designing
Wireframing
Prototyping

Ethos

“To empower individuals with big ideas by providing them with the tools and resources to launch their businesses quickly and efficiently, saving them valuable time, energy, and money through our generative AI brand-building website.”

Problem

Original: Individuals need a way to kick start their business idea through a generative AI program that saves them time, money, and energy.

Design Challenge: How might we help small businesses stand out in a crowded marketplace by providing small business owners with a unique, compelling, and professional brand identity that is cost effective, timely, and easy.

Users

Small business owners who are just getting started.

Role

UX Designer
Graphic Designer

Scope & Constraints

In Scope

Designing a high-fidelity prototype of a website that builds the users brand identity as if created with generative AI.

Out of Scope

Building this website and actually implementing generative AI.

Constraints

We are a limited team to create an entire website and we are limited to how ever detailed and refined Figma can get.
The amount of time we have to complete the website.

The Process

Brainstorming

Design Brief

We then wrote out a design brief that included most of what I discussed in the background of this project.

This also would develop and not be completely true to the final design of
our website.

User Flow

I then sketched out a user flow starting from the "Welcome" page, answering questions that are specific about the business the user is starting, then the AI generating business branding with the ability for the user to edit themselves.

We then wanted to personify our target user.

Persona

Becky is a stay-at-home mom.

She loves baking and does it for

birthday parties and bake sales.

She's always been interested in

starting a baking business, especially

with the support of her friends

and family.

However, she doesn't know where to

start. She wants a logo and branding

that looks professional but doesn't

have the tools or skills to do it herself. She also doesn't want to hire a professional for every piece of branding. So, she goes to the internet to find a site that builds her professional branding that knows more about branding than her and represents her business.

Wireframe & User Flow

I set out to design every page, or type of page we might want for our website. This included logo editing, image selection, and selecting values. I then compiled pages together that would make the most sense for a user flow.

Version 1

By answering questions about their

business, the AI is able to use its

database to create branding that aligns

with the user's answers. What the user

is selling, their values, and who they are

selling to are what help drive branding.

The profile page serves as a space to view all the aspects of the user's branding, allowing them to see its cohesiveness. From here, the user can then rework and change aspects to give them the look and feel they want and will succeed in the industry in which their business resides.

Version 2

In Version 2, we condensed the questionnaire to only 3 questions, the essentials: Who, What, and Why.

We didn't want to overwhelm a new user with questions they may not know the answers to. This also just simplified the sign-up process.

This also included a navigation menu with the elements of branding we felt were most necessary. This would navigate the user to each page, where edits could be made. The user could also "Preview" their cohesive branding.

The "Preview" page gives the user a look into what their branding could or will look like based on the limited information the AI has been given. It displays a name, logo, values, colors, fonts and even imagery using the users answers in the initial questionnaire, as well as the values that were selected on the "Values" page.

Brand Inspiration Board

We then put together an inspiration board of other websites that inspire us. This included the way they looked visually, as well as their user interface and how they worked functionally.

Design System

Style Guide

Framework needed a complete style guide for consistency across our website. We wanted colors and a font to emulate professionalism to ensure our user's that they'd be receiving professional branding from us.

Components

We also built out a component library for every component we might use on our website to keep the integrity of our company and consistency.

We used standard measurements as well as icons from an icon library to ensure consistency and the professionalism we were going for.

High Fidelity Mockup

This is the time where we made the biggest changes to our design. I added a huge aspect that took our design to the next level and became the core of our website. I added a chat, much like ChatGPT that would make the edits users ask it to, as well as answer questions they have. Users' personal assistant.

Interactions

For our final mockup, I added more interactions, like transitions between pages, smart animations, and scrolling. Implementing these made the website interaction as real as possible and gave us a clear view as to how our website would work.

Final Prototype

After helpful feedback, I simplified the process even more.

I better aligned components.
Removed distracting design.
Removed the navigation altogether.

The biggest aspect of simplicity that was changed was the "Preview" page. This now became the "Home" page for the user's branding. From this page, every aspect the user wanted to change or adjust could be done using the AI chatbot on the bottom of the page.

An editor toolbar was then added to the right of the page for easy self-editing that the user might want to do.

The user now only has one page where everything they need is located. They are able to just let the chat know what they want changed, or even ask suggestions if they need help.

Framework's AI will make changes that it knows will work in the industry of the user as well as that align with their values.

This final prototype makes the most sense for our user, who has no knowledge of design or design tools and will give them their branding in one place for a better experience and look into the cohesiveness of their personalize branding.

Then what?

Becky can then pay to download all of this branding as high-fidelity, usable assets onto her computer. She no has her entire brand identity for all her baking endeavors.

Outcomes and Lessons

Outcomes

In the end, we ended up with a website that makes sense, works, and tailors to the user experience of our target user.

We were able to put together a website that utilizes generative AI for people who are just getting started with their business and need professional branding that will be fit for their business's market.

Lessons

I learned that getting to the prototyping stage doesn't mean you're done. Much of our final design came from iterations and changes in between our final prototypes to make sure our user was at the center of our design.
I also learned a lot about building a component library, components, auto layout, and the full capabilities of prototyping in Figma.
Lastly, I learned how much time it takes to build out a working prototype in Figma.

BACK TO TOP

Framework

We then wrote out a design brief that included most of what I discussed in the background of this project. This also would develop and not be completely true to the final design of our website.

We then wrote out a design brief that included most of what I discussed in the background of this project.

This also would develop and not be completely true to the final design of
our website.