Campari: A Case Study Continued

Experimentation with AI Features in Design Tools

I experimented with three Figma plugins using prompts I generated previously to explore making an interactive app for the Italian liqueur, Campari.

Plugins:
QoQo.ai
musho
Wireframe Designer


First, I used QoQo.ai to generate a user journey, using myself as a hypothetical user.

This is not the most ideal research method, but for the sake of exploring these tools, I went ahead with myself as the user.

I then used musho to start building wireframes for the Campari app.

I turned to Wireframe Designer to build better wireframes.

QoQo.ai

Prompt:

QoQo.ai:

QoQo.ai generated a series of phases:
Phase 1: Discovery
Phase 2: Research
Phase 3: Acquisition
Phase 4: Onboarding
Phase 5: Engagement
Phase 6: Advocacy

With corresponding sections:
Tasks
Mindsets
Pain points
Opportunities

FILLED with various experience that might happen at the various phases.

The product somewhat met expectations when tasked with creating a user journey for a hypothetical Campari app, though not entirely as anticipated.

The main issue was that the plugin transformed a relatively straightforward prompt into a more complex user journey than necessary. My intention was to focus on a user journey that highlighted an AR feature allowing users to measure drink ratios. Instead, the outcome was overly focused on users exploring unrelated AR experiences and low-alcohol beverages, which strayed from the core objective.

I believe with some fine-tuning, the prompt could better align with my expectations and serve as a useful tool for designing the Campari app.

The output requires some refinement, whether by adjusting the initial prompt or through further editing by a designer, before it reaches a stage suitable for presentation.

I'm open to using this plugin again in the future. It sets up a basic structure, but to effectively capture a user's journey, significant adjustments are necessary. The plugin lays down a framework, but I need to ensure it accurately reflects the specific experiences and challenges we intend to address.

musho

Prompt: Create a landing page for Campari, a classic Italian liqueur, using pinks, oranges, and yellows

musho:

It took me a moment to understand how the prompting worked for musho, and after many prompts I was asked to rework or rewrite my input before musho would create anything.

This simple landing page does basically what any landing page for a brand might do. Some photography, some mission-y statements, some CTAs.

Some of the icons that were generated didn’t really have anything to do with the concepts written below them.

Images were repeated RELENTLESSLY. I found this consistent with musho when using other prompts as well.

Prompt: Campari, a classic Italian liquor, using pinks, oranges, and yellows.

musho:

Once I got a touch for the prompt structure, I was able to have musho generate this landing page.

I still have some problems with the images chosen in certain areas. One in particular had a vaguely scientific feel, which could convey that Campari was, in fact, full of chemicals.

I’m not sure how useful this tool would be in my everyday design practice. Even when working with small businesses, who have straightforward requirements, a template on Squarespace can accomplish a lot of the design labor done here with musho.

This plugin required multiple prompt reworkings to even have it generate a basic landing page.

The resulting generations would also require quite a bit of editing before this was presentation ready, much of the photo sourcing would have to be done manually.

I don’t think I would use this particular iteration of musho. I could see how it would be useful to someone just beginning to design web pages, but even using Figma in the first place suggests understanding of design tools and access to developers. I don’t see how this would be more useful than a product like Squarespace or Wix.

Wireframe Designer

Prompt: Prompt:
create wireframes for this app:

Project Title:
"Campari Cocktail Creator"

Objective:
Create an interactive design project for the brand Campari that engages users in a creative and immersive experience, highlighting the brand's iconic cocktails and their unique flavors. The project aims to educate users about Campari's products while inspiring them to mix their own Campari cocktails.

Project Components:

Interactive Website:

Develop a visually appealing and user-friendly website dedicated to Campari.
The homepage should introduce users to the world of Campari, its history, and its range of products.
Include a visually striking image or video background showcasing Campari cocktails being prepared.
Cocktail Recipe Generator:

Create an interactive tool that allows users to explore and customize Campari cocktail recipes.
Users can select their preferred type of cocktail (e.g., Negroni, Americano, Campari Spritz) from a menu.
Provide options to adjust the strength, sweetness, and bitterness levels of the cocktail to match individual preferences.
The tool should recommend specific Campari products and ingredient quantities for the chosen recipe.
Ingredient Showcase:

Build an interactive section where users can learn about Campari's key ingredients and their origins.
Include engaging visuals, interactive infographics, and brief descriptions for each ingredient.
Virtual Mixology Class:

Host a series of live or pre-recorded virtual mixology classes featuring professional bartenders.
Teach users how to prepare Campari cocktails step by step, emphasizing techniques and presentation.
Allow users to interact with the mixologists by asking questions or requesting personalized tips.
User-Generated Content Hub:
 
Encourage users to share their own Campari cocktail creations and experiences.
Create a social media feed or dedicated section where users can upload photos and videos of their cocktails.
Hold contests or challenges with Campari-themed prizes to incentivize participation.
Augmented Reality (AR) Experience:

Develop an AR app or feature that allows users to virtually place Campari cocktails on their surroundings.
Users can "try out" different cocktails in their own homes using their smartphones or tablets.
Gamification:

Incorporate gamification elements such as quizzes, challenges, or trivia to test users' knowledge about Campari.
Offer rewards or badges for completing challenges or achieving certain milestones.
User Engagement Analytics:

Implement analytics to track user engagement, time spent on the website, and the popularity of different cocktails and content.
Use this data to refine and improve the user experience over time.
Social Media Integration:

Integrate social media sharing buttons and encourage users to share their favorite Campari cocktails and experiences on their profiles.
Mobile Optimization:

Ensure that the project is responsive and optimized for mobile devices to reach a broader audience.
By creating the "Campari Cocktail Creator" interactive design project, the brand can engage with users in a fun and informative way, fostering a deeper connection with the Campari brand and its products while also encouraging them to enjoy Campari cocktails responsibly.

Wireframe Designer:

Wireframe Designer allowed me to input a massive prompt generated using chatGPT.

The resulting wireframes were much more in alignment with the original idea of a “Campari Cocktail Creator.”

Prompt: create wireframes for an interactive companion app for the brand Campari: Augmented Reality (AR) Experience Wireframe:
- Mobile app interface with a camera viewfinder for AR placement.
- Cocktail selection menu with 3D models of Campari cocktails.
- Interaction buttons for placing, rotating, and resizing the AR cocktails.
- Tutorial or guide overlay for first-time users.

Wireframe Designer:

I expanded on the first prompt to explore the original idea of an AR feature within the Campari app.

I believe this was much more successful than musho, almost designing effective wireframes for an AR feature, with some image scaling affordances.

This plug-in was much more useful to me. Although it did not provide images within the wireframes, I think the ability to give a much more in-depth prompt allowed the plugin to work much better.

Its understanding of the UX over the UI is much more robust than musho and really reflects the original idea much better.

I did not need to refine the prompt very much, which was originally generated from chatGPT. So in effect, using the two in tandem was a fairly straightforward process. Generate a list of wireframes in chatGPT, then generate wireframes with Wireframe Designer. If this was a real product that would need to be fully designed, I’m confident that breaking down the list of wireframes from chatGPT and inputting them individually into Wireframe Designer (like I did with the AR frame) could produce a fairly competent series of wireframes, that could then be built into a prototype.

I think that this output is presentation ready for the right audience. An internal presentation to your team or to stakeholders who are already involved at production times before UI is finalized, would be appropriate. There are other stakeholders who would want to see a higher fidelity mockup or prototype.

Where this product fell short was the sense of visual fidelity. I’m not particularly bothered by this, because I enjoy doing this last phase of design. Choosing fonts, colors, and photography seems like an area of design that would require fine-tuning regardless.

I would absolutely use this tool in the future. Combined with a pre-existing design system, this tool could greatly speed up the wireframing process.