Dairy Market

Developing a full-stack AI iOS application to create a solution to quality, affordable marketing information for small businesses.

See The Full Project

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

Overview

In this project, our team tackled complex challenges including mastering new AI technologies, integrating diverse skill sets, and delivering significant business value. We utilized the expertise of team members from Computer Science, Advertising, MIS, and Journalism, optimizing each task 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.

With an MIS background, my role in the project was to leverage technology to deliver business value from a strategic perspective. I acted as the key connector between the branding and software development teams for our Dairy Market project, ensuring effective communication and alignment between both groups. Additionally, I contributed as a frontend developer, implementing user interface designs that enhanced the user experience and aligned with our branding goals. My responsibilities included facilitating discussions, translating technical jargon into actionable insights for non-technical team members, and helping to maintain a unified direction throughout the semester.

To frame this process, I structured the Dairy Market product within a product management framework shown below. Feel free to click a stage and jump to where you are most interested!

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?

Market 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

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.

Unique Value Proposition

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.

In the design phase, my primary role was to harness our research and the valuable insights gleaned from user testing to craft an optimized prompt. This process was iterative, demanding a keen eye for detail and a commitment to understanding our users' needs. By closely analyzing the feedback, I was able to refine our approach, ensuring that the prompt not only met but exceeded our users' expectations for clarity, ease of use, and engagement.

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.

User Experience

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.

In the development phase, we encountered a prime opportunity to adapt and evolve our approach to rapid changes. When we learned that another team was disbanding, we welcomed a new developer with a solid CS background onto our team. This shift required me to pivot my focus. With ample talent now dedicated to application development, I seized the chance to delve into front-end work on our website. This new direction allowed me to immerse myself in the visual aspects of our product, exploring the intersection of aesthetics and our brand's identity.

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.

In the delivery phase, as development surged ahead with momentum, my role expanded to include continual updates to the website and providing support across various team functions. I stepped into a managerial position, acting as the conduit between design and coding, sharpening our business case in the process. With our core values as a guiding star, I crafted a series of dynamic presentations that focused on conveying the 'so what' – the compelling reasons our audience should be excited about Dairy Market. Each presentation was designed not just to inform, but to spark enthusiasm and convey the unique value proposition we bring to the table.

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 functional plan, timeline, and promotional assets for app deployment.

Within our development group, I played a hands-on role, helping the team troubleshoot existing bugs, working on quality assurance, and offering new ideas as for existing constraints. For our design and copywriting group, my contributions included creating additional product mockups that showcased our key features and devising a strategic plan for app deployment.

Digital Marketing Assets

Following the revisions from user testing insights, we wanted to create posters and videos that would serve as a platform for us to communicate how we could help our users feel more confident about their retirement. We aimed to alleviate their retirement fears and offer them support. One of the most important steps in this process was to get out into the community and let people know that we are there to help. So in this phase I created three main assets for our project presentation: poster, a product trailer, and detailed product presentation.

In conclusion, throughout the course of this project, we successfully developed and demonstrated a functional iOS application that leverages the OpenAI API. This application serves as a powerful tool for small businesses, transforming their marketing requirements into actionable strategies. By utilizing this technology, small businesses can effectively engage with top social media platforms, significantly enhancing their ability to expand their reach and grow their customer base. This achievement not only highlights our team's dedication and skill but also underscores our commitment to providing innovative solutions that meet the evolving needs of today’s businesses.