Dairy Market
Developing a full-stack iOS application to create a solution to quality, affordable marketing information for small businesses.
The Overall Goal
Our Dairy Market team initiated the development of an AI-integrated application for iOS devices with the objective of assisting small businesses that lack marketing resources to generate customized social media content. The application was constructed using XCode and incorporates the OpenAI API and a Firebase database, resulting in a fully operational iOS application. To ensure optimum user experience and brand development, we employed industry-standard design software such as Adobe Illustrator, Adobe Photoshop, Figma, and Canva.
Tools Used
Adobe Express, Adobe Photoshop, Figma, Canva, HTML, CSS, JS, Xcode, Firestore, Open AI API
Skills + Fields
Technical Consulting, Asset Creation, Product Strategy, Branding, UX/UI, Front-end Development
Role + Timeline
Technical Consultant and Strategist, Worked with 4 individuals, Duration: 5 months
The Challenge
Creating an AI Product With a Cross Functional Team
Our team faced several complex challenges, including mastering new AI technology, effectively integrating diverse skill sets, and delivering tangible business value. We tackled the challenge of leveraging our team members’ diverse backgrounds in Computer Science, Advertising, MIS, and Journalism by drawing on each member’s unique expertise for different deliverables and optimized our efforts with effective communication. Additionally, we grappled with the integration of cutting-edge AI technology, conducting a thorough exploration of its potential and optimal use cases. Our difficult goal was to create a tech product that would not only provide business value but also establish a robust brand identity, which necessitated navigating technical constraints and user requirements. Our team remained committed to achieving our objectives, continuously monitoring emerging trends and innovations in the dynamic technology field.
The Solution
Becoming a Dynamic Team Member to Fill Gaps & Lead
I started off the project by helping my team establish a strategy from a prompt we were given. For the rest of the project to go smoothly, we needed to solidify a framework of what our vision for the actual product looked like. Our prompt was very general: use AI to make marketing easier. So, to create our vision, I started gathering research and energizing our team by imagining the future state and how we could get there. What pain points exist in the world of marketing? What AI platforms exist in the world of marketing? How would we integrate AI into a native mobile application?
With a background in MIS, I leverage technology to deliver business value in a big-picture context. Thus, when our group developed a unified vision for Dairy Market, I worked primarily as a bridge between our branding and development subgroups to ensure effective communication. That is a corporate talk for I wasn't the best at anything, but I had experience in both coding like our CS girls and design like our advertising and journalism. And most importantly I was able to recognize what talents my amazing teammates could bring to each area of our strategy to reach this end state. So, I had to be fluid and ready to do various roles outside of the direct scope oof my teammates. As this bridge, I wore several hats throughout our semester-long project. Thus, explaining my contribution, I will speak specifically to my role in each checkpoint.
The Researcher
During checkpoint one my primary role was to conduct research to develop a course of action for how we would make this product.
In order for the rest of the project to go smoothly, we needed to solidify a framework of what our vision for the actual product looked like. Our prompt was very general: use AI to make marketing easier. So, to create our vision, I started gathering research. What pain points exist in the world of marketing? What AI platforms exist in the world of marketing? How would we integrate AI into a native mobile application?
Marketing Research
In order to know how to automate the process, I needed a better idea of what the existing process is. In terms of people, I research a lot about the roles within a marketing agency and what business value they deliver. In terms of process, I studied the elements of a creative brief and how each element lead to the product output. In terms of technology, I learned about different marketing platforms used to help the marketing efforts. From this research, one of the main takeaways was the value of a creative brief.
Essentially, this creative brief distills all of the relevant information needed to do most marketing jobs into one comprehensive diagram. This discovery led to a breakthrough for our idea. If we could get access to the information central to the creative brief’s value delivery, we could use this as a jumping off point to prompt the AI — reducing high marketing costs and difficult, time consuming brief development.
Now, we knew what a marketing agency inputs and what it outputs. From here, we needed to understand more about AI technology and its constraints and how we could model this process of inputs and outputs
AI Research
At this point in the product ideation process we knew what we wanted to make but we didn’t know how to make it. To do this, we focused on the newly release OpenAI API. Here, I did a lot of research on existing use cases and capabilities of the API.
Following this research, I developed a simple web test of integrating the AI on the web platform. Here, I was able to establish proof of concept for feasibility and I learned a lot about how we could customize this technology to make it work for us. I got a key for the OpenAI API and used their tester files to investigate the code itself. Here the code essentially consists of two parts: a Next.js front-end and a serverless API function. The front-end takes the user input, state management, and form submission using React hooks and then fetches data from the serverless API function, which in turn is encorporated in a request to the OpenAI API using the “openai” package. The serverless function generates a contextually relevant prompt and calls OpenAI’s GPT model to obtain a response.
One thing that stood out to me during this process was prompt customization. With the prompts generated in the serverless API function, you can direct the AI technology to output specific, tailored information. Combined with my new knowledge of the creative brief we arrived at a potential value proposition.
If we could gather information from our users about their business, focusing on the key information industry marketing professionals use in creative briefs, we could use simple user input and enrich it to give the AI a hyper-specific task of creating marketing deliverables. So, our application would act as a marketing agency, allowing customers to only worry about what they know about their brand. By going straight to a ChatGPT or an industry rival, you would have to know the behind-the-scenes marketing information we enrich our prompt with.
The User Experience Expert
During checkpoint two my primary role was to use my research to develop an optimized prompt based on our research and the incoming feedback we got from user testing.
Here, I fought to find the balance between holding onto the value of a comprehensive marketing brief and limiting complexity to reduce bounce rate of overly confused users. To do so, I spoke to people with no industry knowledge and asked them if they found it confusing and conducted a lot more research.
In order to set our product apart from simply using an AI bot directly, I included personalized research in the field of marketing and usage guidelines with different social media platforms. Our research covers the type of content that should be displayed on Instagram, Facebook, and Twitter. By giving this information, we supply the AI prompt with specific guidelines for how to assess the creative prompt it is receiving. Each social media guide we have been testing out with the OpenAI API is listed below. Here, we supply the AI prompt with specific guidelines for how to assess the creative prompt it is receiving. Each social media guide we have been testing out with the OpenAI API is listed below.
To make sure these efforts were not in vain I spent a long time testing the guides, the prompt, and assessing outputs. Here, because the same foundational technology is used to create to assess the prompts, I could do a lot of testing now to avoid unnecessary rework down the road as our team began to code.
- Here is what you received:
- Inputs: (Result of Survey)
- Here is what we want you to make as the output
- I want you to make 10 ideas for facebook post, 10 ideas for instagram posts, and 10 ideas for twitter post. These posts ideas need to adhere to the previously stated rules for each platform. However, be sure to keep each idea unique and creative with respect to the platform. Use additional information you have to enhance the recommendations for the content creation.
- Additionally, I want you to make a guide for how often and what type of posts the brand should make in a weekly calendar format using your recommendations for the 10 posts.
- Here is how i want you to format it:
- Give a 3 sentence summary of your overall guidance for your brand vision. The header will be: How We Recommend You To Milk It.
- Under the header “Our Quick Pitch” I want you to write “Insta Inspo:” then the list of the 10 instagram ideas. Next, I want you to write “Facebook Recs:” then the list of the 10 facebook ideas. Finally I want you to write “Twitter Ideas:” then the list of the 10 twitter ideas
- Then, I want you to format a table from Monday to Sunday with the calendar you generate.
The Front End Developer
During checkpoint three, we reached a new opportunity to grow and learn how to respond to changes on the fly. Following hearing news of another group having to disperse, we onboarded a new developer with a CS background. Here, I had to adjust. With a lot of manpower working on application development, I now used the opportunity to do front-end work on our website. For me, this was an opportunity to explore aesthetics and brand design.
Thus, I used Adobe Photoshop to make SVG graphics branded with our style guides, mockups of our products, and used color replacement features to inject our brand into our assets. I also used Adobe Illustrator to help workshop our logo ideation, develop custom icons, and use our brand vision to guide these efforts when needed. Additionally, following the creation of our style guide, I learned on my feet how to implement and stay consistent with brand guidelines.
Developing The Core Product
During checkpoint four, development continued to make strides, and I continued to update the website while helping out where I could.
Here, I made a dynamic slide deck and helped write the script for our final presentation with an emphasis on delivering the “so what” for why our audience should be excited about Dairy Market. For our development group, I helped the development team work out some bugs and workout limitations on character counts for prompts. For our design group, I helped make more product mockups that highlighted our key features and created a plan for app deployment.
