AI-Assisted Front-End Development and Metrics

Developing a brand identity and refining an AI-generated website while evaluating hosting and performance metrics.

Learning Studio

HTML, CSS & Bootstrap

Google Analytics

ChatGPT

CONTEXT

Class Project

ROLE

UX Designer, Lead Programmer

TOOLS

ChatGPT, HTML, CSS, Bootstrap, Google Analytics

DURATION

3 Weeks

(December 2025)

This project taught me how useful AI can be in the coding world, but also how designers can use it as a tool and not a crutch. I was able to utilize AI to generate my website and then either change specific things myself in the code or ask AI to until I was happy with the results. My partner and I completed this project together.

My Contributions

CODING, PROJECT ORGANIZATION

Front-End AI-Assisted Software Development

I prompted AI multiple times to generate a 3 page website for my brand. I them used AI to target specific aspects and refine the website. After I was satisfied with the AI work, I went in and coded aspects of the website that the AI couldn't get right or that I needed to upload manually.

The Problem

For this project, we were challenged to come up with a unique idea for a startup and then create brand guidelines and a three page website. As part of this, we had to research the feasibility and value of our business. We were also tasked to research and measure our analytics and hosting options.

The Solution

Perk energy - A coffee shop that sells lotus energy drinks as well as other coffee products

Our Brand Identity

To create our brand identity, we first iterated and sketched what we envisioned the company to look like. Because this was a company born from our imaginations, we had a lot of creative freedom. Our vision statement for the company is:

To fuel everyday momentum with high-quality coffee and energizing drinks crafted for people who never slow down.

From this vision statement and initial sketches, we decided to hone our brand image into something exciting and full of energy with lots of bright colors.

These colors, logos, and icons that you see on our style sheet were directly used and implemented into our site. We were able to upload our style sheet to the AI when prompting it to create our website, which made it easy to implement.

The Finished Website

The following five features are research-backed opportunities designed to address the core user needs of fragmented tools, manager overload, and data inaccessibility.

Homepage

The homepage prominently features a hero image with a version of our mission and a quick link to the menu page, as that is what most people visiting the website will want to see.

Menu Page

The menu page has categories to sort the different types of drinks. We added a lot of javascript onto this page so that you can like a drink and it will populate into the liked drinks section with a picture of that drink.

About Page

The about page is relatively simple and just shares our mission and vision for perk energy, as well as our hours and what lotus energy is.

The Process

1. Secondary research

Idea Generation

Our Goal: Outline our startup business ideas and iterate on our goals, feasibility, and market plan.

Summary Plan: We fleshed out everything that was necessary for us to successfully start this business, including aspects such as goals, market, and communication distribution environments. From this, we were able to move forward with the design aspects.
Public Online Presence: We found in our research that it was extremely necessary to have a strong online presence, especially on social media, and through a website. This reseach help us identify what design aspects we needed to focus on to develop our brand guidlines and in turn our website.
Persona: We created a basic persona for our ideal target user. This allowed us to better understand who we were targeting in the creation of this business and what aspects we needed to focus on.

Our Goal: Outline our startup business ideas and iterate on our goals, feasibility, and market plan.

Summary Plan: We fleshed out everything that was necessary for us to successfully start this business, including aspects such as goals, market, and communication distribution environments. From this, we were able to move forward with the design aspects.
Public Online Presence: We found in our research that it was extremely necessary to have a strong online presence, especially on social media, and through a website. This reseach help us identify what design aspects we needed to focus on to develop our brand guidlines and in turn our website.
Persona: We created a basic persona for our ideal target user. This allowed us to better understand who we were targeting in the creation of this business and what aspects we needed to focus on.

Key Findings:

In this phase, we identified what our business was and what it was all about. We also conducted preliminary research into our target market and the value of our website.

Key Findings:

In this phase, we identified what our business was and what it was all about. We also conducted preliminary research into our target market and the value of our website.

2. Google Analytics

Analytics Plan

Our Goal: Develop an Analytics plan for the measurement of UX metrics and dimensions, and discuss the rationale for the measurements.

Analytics Research: We developed an analytics plan to go over our target ratios for metrics, retention, conversion, and the baselines for the industry. This also included developing a strategy for our bounce rates and what we could include to keep users engaged. Additionally, we implemented Google Analytics into our site to track other UX analytics.

Our Goal: Develop an Analytics plan for the measurement of UX metrics and dimensions, and discuss the rationale for the measurements.

Analytics Research: We developed an analytics plan to go over our target ratios for metrics, retention, conversion, and the baselines for the industry. This also included developing a strategy for our bounce rates and what we could include to keep users engaged. Additionally, we implemented Google Analytics into our site to track other UX analytics.

Key Findings:

In this phase, we researched and implemented our analytics plan and went in-depth into Google Analytics.

Key Findings:

In this phase, we researched and implemented our analytics plan and went in-depth into Google Analytics.

3. Design

Development of Brand Guidelines

Our Goal: Create a detailed brand guidelines sheet to influence the design and creation of our brand, as well as a brand logo that could be implemented throughout the company.

Sketching: We sketched and ideated different concepts of our brand identity on a whiteboard before moving into our full brand identity design.
Brand Guidelines: Using Illustrator, we created a detailed brand guideline sheet, including our new logo, brand colors, fonts, and more.

Our Goal: Create a detailed brand guidelines sheet to influence the design and creation of our brand, as well as a brand logo that could be implemented throughout the company.

Sketching: We sketched and ideated different concepts of our brand identity on a whiteboard before moving into our full brand identity design.
Brand Guidelines: Using Illustrator, we created a detailed brand guideline sheet, including our new logo, brand colors, fonts, and more.

Key Findings:

In this phase, we fully developed our brand guidelines, allowing us to use them in the creation of our website.

Key Findings:

In this phase, we fully developed our brand guidelines, allowing us to use them in the creation of our website.

4. Web Development

AI-Assisted Front-End Development

Our Goal: Develop a fully functional website for Perk Energy with the help of ChatGPT, using HTML, CSS, JavaScript, and Bootstrap framework.

AI Prompting: We prompted AI to generate our website for us. After multiple iterations and prompt re-writes the results given were satisfactory.
Web Development: Following the generation of the website, I went in and changed and reordered things to my liking. I also had AI fix and debug itself, especially on the menu page.

Our Goal: Develop a fully functional website for Perk Energy with the help of ChatGPT, using HTML, CSS, JavaScript, and Bootstrap framework.

AI Prompting: We prompted AI to generate our website for us. After multiple iterations and prompt re-writes the results given were satisfactory.
Web Development: Following the generation of the website, I went in and changed and reordered things to my liking. I also had AI fix and debug itself, especially on the menu page.

Key Findings:

In this phase, we learned how useful AI can be when developing a website, but also how important it is to understand the code and know what you are looking at.

Key Findings:

In this phase, we learned how useful AI can be when developing a website, but also how important it is to understand the code and know what you are looking at.

5. implementation

Hosting and CMS Management

Our Goal: Discuss the hosting options for our static website and develop a plan to transform the static site into a CMS supported site.

Secondary Research: We looked into different hosting options and plans for our website, taking into account what would be best for our potential business. We also discussed the benefits of Content Management systems and identified future possibilities.

Our Goal: Discuss the hosting options for our static website and develop a plan to transform the static site into a CMS supported site.

Secondary Research: We looked into different hosting options and plans for our website, taking into account what would be best for our potential business. We also discussed the benefits of Content Management systems and identified future possibilities.

Key Findings:

In this phase, we found that there are numerous options and opportunities when launching your website, and the benefits can depend on your business.

Key Findings:

In this phase, we found that there are numerous options and opportunities when launching your website, and the benefits can depend on your business.

6. transition

Future Actions

Our Goal: Provide the next steps for this project and what it would take to make this imaginary startup a reality.

The primary thing this business still needs is a physical location, wherever that might be. Additionally, we need to finalize our hosting plan, secure a domain name, set up a social media presence, optimize the site for mobile users, and prepare a marketing plan.

Our Goal: Provide the next steps for this project and what it would take to make this imaginary startup a reality.

AL

AL