Transforming e-commerce with artificial intelligence.

Given 48 hours, we developed a web app to reimagine GenAI to be conversational and feel like the in-store, retail experience.

Project Submission by Team OSC 

UF/Verizon AI Hackathon

October 2023

View the Devpost!

My Role

I acted as the UX designer and provided a background in communication applications to tailor the ask for Verizon. 

  • Created Vivian Verizon through prompting AI to build her image and the initials prompts for her personality.
  • Managed to complete a full presentation deck within the 48-hour timeline, including a SWOT analysis and KPIs for the company to position the AI chatbot strategically to consumers.
  • Wrote the submission copy and completed a full product development lifecycle.

Problem Statement

The AI Days UF/Verizon Hackathon asked participants to rethink how to leverage conversational GenAI and other technologies to provide optimized navigation with tailored products, services and/or educational experiences.

Solution

We created Vivian Verizon, a recommendation system to suggest smartphones by evaluating the user’s purchasing behaviors, preferences and interaction history with the chatbot.

Considerations

By using artificial intelligence to simplify the navigation process, it will create a tailored prompt for the customer, providing one-on-one conversation suggestions for purchase, and will lessen the number of clicks from landing on the homepage to checkout.

Team OSC was made up of five students representing the UF Open-Source Club.

As board members for a computer science student organization, all of the team members also volunteered during the event and were part of the planning process. (This inspired us to then create our own hackathon as a student organization the following semester!)

Team members:

 

We divided the work by playing on our personal strengths. Conde is a front-end developer wizard, so he led the efforts with coding the interfaces. Iyer debated with ChatGPT and constructed Vivian Verizon’s functionality. Kornberg, given his statistical skills, compiled the data for identifying the products that the AI can suggest. Mesa became a UI/UX designer over the 48 hours we worked on this project and coded a responsive website that is visually appealing and aligned with Verizon’s brand voice. Weinstein used her experience in communications to give Vivian Verizon a personality, tone of voice and created the presentation deck. Having a person on the team with a background in public relations helped us with establishing a creative platform, researching demographics for strategic purposes and providing a SWOT analysis for Verizon.

What it does (the functionality)

Vivian Verizon is a friendly, digital sales representative created with artificial intelligence. She offers insights into Verizon’s plans, promotions and deals with a positive attitude. Her job is to help Verizon customers purchase the perfect phone in the most efficient way. Vivian Verizon is dedicated to assisting customers with purchasing a phone and tries her best to support purchasing products without the need to go to a physical store.

How we built it

We collected data on Verizon and its products to prompt and train our model, which uses GPT 4.0, the newest and best publicly available large language model. Then, we created a React.js application as the front-end for the user to interact with. We made an interface between GPT and our website to allow Vivian Verizon to interact with users more dynamically than a typical chatbot. To facilitate communication with our data, the user and the ChatGPT API, we created a Flask backend. Finally, we connected the front-end to the backend to present Vivian Verizon to consumers.

Languages and development tools: Jupyter Notebook, TypeScript, Python, HTML, CSS, JavaScript, JSON, React-Bootstrap

Challenges

Vivian Verizon Rickrolled us

Vivian Verizon understands her job description, but in some iterations, she developed a sense of humor. About 12 hours before submission, around 5 a.m., we asked Viv for help purchasing a phone. She provided us with a URL to Verizon’s website that did not actually exist, so we asked her to try an embedded video. She gave us a link called “Click here to watch!” and it redirected us to a video of Rick Astley singing. It was a needed reminder for our team as it helped us recognize the developer’s responsibilities to have an ethical AI thinking model and cleared Vivian Verizon’s context. 

Agile development process

Verizon prides itself on providing a fast and reliable network; therefore, we are proud that our software performs on par with the company’s mission and values. This software is another simple solution from the company to connect customers effortlessly to Verizon’s products. 

Taking into consideration the intense timeframe of this challenge, we were still able to simulate a proper product development life cycle. We started at the initial idea stage with conducting user interviews to provide insight into consumer behaviors, applied multiple forms of prototyping and ensured we performed quality assurance testing.

Lessons learned

The power of artificial intelligence grows daily, which in developing this project, we were fascinated by the actions the AI took. We learned how to use technologies and softwares that we had no prior experience using, like Flask, React-Bootstrap, GPT API and Figma. Also, we began understanding large model theories to grasp concepts we would have never otherwise considered. While we are all members of the Open-Source Club, the five of us did not work together in a team setting before starting this hackathon, so we learned how to work quickly to create a solution and leverage our individual skills.