AI case study Slice Squad project overview
Project:

Slice Squad: An AI Case Study

Problem:
Since the launch of ChatGPT, there’s been an influx of tools and services that use artificial intelligence to automate design, writing and research processes. But it can be hard to tell which ones are actually worth investing your time and interest in.

Strategy: Taking a common use case — the design of a food delivery app prototype — chart the pros and cons of the different AI-generated websites and services available.

Tools: LucidChart, Midjourney, ChatGPT, Taskade, WePix, Logo.com, Namelix, SquadHelp, User Persona, Octopus.do, Looka, Smashing Logo, NightCafe, Ideogram, Figma, Adobe InDesign, Photoshop and Illustrator.

Timeframe: 2 weeks.

Impact:
• Empowering Non-Designers:
This case study aims to empower individuals with limited design experience by outlining the potential of AI design tools. It showcases how AI can streamline the design process, making it more accessible for non-designers to create effective prototypes.
Informed Decision-Making: By comparing various AI design assistants, the project facilitates informed decision-making for users seeking an AI solution. They can weigh the pros and cons of different tools to select the one that best suits their specific needs and project type.
• Improved Design Quality: The case study explores how AI can be leveraged to enhance design quality. It highlights features like logo generation and brainstorming tools that can elevate the initial stages of the design process.

Project goals
To highlight both the positive aspects and challenges faced when integrating AI tools into the User Experience design process.
Elon Musk eating pizzaElon Musk eating pizza

(Images generated from prompt “Elon Musk eating pizza” on MidJourney.)

With the AI market expected to reach a staggering $390 billion in this year alone, it’s hard to overstate the effect that ChatGPT has had on the tech industry. It seems like every new app or website now has the magic words “AI-generated” tacked onto its tagline.

But not all of these machine-learning-based services were created equal. In this UX case study, my aim was to test out some of the tools on offer and see whether they really can save designers time or if some of them are simply more hype than helpful

Project plan

To kick things off, I decided to take a common use case — the design of a food delivery app — and follow my usual process through to prototyping. But instead of simply using my intuition and usual choice of software, I would seek out AI-generated wizardry to provide assists at every point along the way.

By actually using each of the tools or services, I was hoping to weed out the ones that are simply jumping on the AI bandwagon and the ones that are really worth knowing. I was also interested to see if the resulting prototype would exhibit that distinctive "computer-generated" aesthetic that sets AI-generated creations apart.

Problem statement: “Evaluating the practicality of integrating AI-generated assistance into the prototype design process, discerning between superficial AI adoption trends and genuinely valuable tools.”

Starting with the structure of the case study itself…

One area that I’ve already found AI useful for has been to give shape to a project from the off, to banish that dreaded Blank Page Fear. So that’s where I started — how does ChatGPT3.5 think I should structure a UX case study on using AI-generated tools to assist in the building of a prototype?

Chat GPT answer

And ChatGPT was more than up for the challenge, suggesting a 12-point plan that included Introduction, Problem statement, Research and Discovery, Solution, Implementation, User Experience Design, Testing and Iteration, Impact and Benefits, Challenges and Considerations, Lessons Learned, Conclusion and Appendices (Optional). It also accurately summed up my objectives with the statement: “highlight both the positive aspects and any challenges faced when integrating AI tools into the UX design process.”

Conclusion: While ChatGPT’s plan provided a good jumping off point, it needed some editing to avoid repetition and produce a more concise study.

Research and Discovery was ChatGPT’s next suggested step but before I could get started with that, my app needed a name.

Name Generators

Can’t think of what to call your great new app idea? Well, there’s a website for that. Or, realistically, there’s lots of them.

Starting with Namelix, a site that generates short, catchy names using a state of the art language model. Enter your idea (the more information, the better) and it spits out names in seconds and even gives each one some basic styling. Unfortunately, nothing jumped out as being particularly clever here.

Namelix homepage
Squad Help homepage

Still looking for solid options, Squad Help’s business name generator came up next in my search results.This site was more helpful, offering “hundreds of AI-generated business name ideas with matching domain name suggestions.”You can also launch a naming contest and receive hundreds of custom submissions from “the world's largest community of naming experts”. SliceSquad came out as my winner.

Conclusion: As far as how useful these name generators are, they can definitely throw up suggestions that you might not have otherwise thought of but they can’t make that all-important decision for you.

Discovery

As part of the Research and Discovery phase, ChatGPT suggested that I mock up some user personas at this point. And my search for ‘AI-generated personas’ threw up a few hits, with User Persona being top of the list. While this site generated profiles very quickly and provided free mockups of each one, each persona was basically the same — male software engineers in their twenties. Unsurprisingly, each had very similar goals, motivations and pain points.

Other ‘AI-powered persona generators’ (Taskade, UX Pressia) turned out to be template libraries that you can populate with your own information or choose from pre-designed options. More useful sites for these kinds of templates include Visme, LucidChart and the Figma community. And, ChatGPT can always be relied upon to generate goals, motivations, etc to fill them in.

Conclusion: Although AI can generate reliable user persona info through ChatGPT, it defeats the purpose of the exercise from a UX perspective. Understanding the motivations and potential pain points of different users keeps these considerations in mind and maintains a user-centric approach.

Competitive analysis

Finding the right businesses to use for competitive benchmarking is another task that AI wants to take the legwork out of. The search terms ‘AI-generated competitors’ yielded plenty of results (including Comparables) but these were more about the finances of competing companies.

While obviously a very useful service to other industries, none of the sites I visited offered substantial UX insights. Instead, a Google search of ‘Pizza delivery service Ireland’ returned all the suggestions I needed to conduct my competitor analysis.

Conclusion: Sometimes a Google search is the most efficient option.

Octopus.do
Octopus.do home

App structure

My next step was to outline the structure of SliceSquad. I was expecting the site map stage to offer plenty of AI options but was surprised to find that I couldn’t find many viable options without paying for them. Part of the issue was that ‘site map generator’ returned a lot of XML options rather than simple visuals.

Octopus.do was a strong contender but there are a limited amount of projects you can do before subscribing. On the plus side, monthly subscription is quite reasonable at $8 (approx €7.50) a month.

Slice Squad structure

Not wanting to pay for another subscription, I opted for a seven day free trial of LucidChart which offers a lot of good templates to take some of the thinking out of it.

Conclusion: If you don’t want to pay a subscription fee for your sitemap (and you have design software experience), using tools like LucidChart, Figma or even InDesign is probably your quickest option. Free site map components are available for each.

Wireframing

While on the LucidChart trial, I also decided to try out one of their templates and adapt it to SliceSquad’s needs. The wireframes seen here were based on a banking app template and took a matter of hours to do. LucidChart’s image and icon finders are especially handy and the connecting arrows are also fun to play with. You can import your work into Figma too by exporting as SVG. Your designs will then be editable as vectors within Figma.

But, when it comes to wireframe wizardry, Figma plugins are miles ahead of the competition…

Slice Squad wireframes

First up was Wireframe Designer. This simple free plugin creates clean and visually pleasing wireframes based on your written command. The more detail you can provide, the better. Again, this tool would particularly suit someone with little design experience but even for seasoned Figma users, it can provide a handy jumping-off point.

Wireframe designer
Wireframe gen

Another impressive wireframe plugin is WireGen. While not as visually slick as Wireframe Designer (the use of Comic Sans as a font is a questionable choice), this plugin also offers the benefit of explaining why each element is on the page. As it is in Beta, the developers are looking for feedback and limit the generations to 25 per month. To get more generations, click 'Upgrade' and get an early access membership.If you’re wireframing regularly, both of these plugins need to be on your radar…

Wiregen screen 1
Wiregen screen 2

When it came to UI (User Interface) design and higher fidelity prototyping, I had less luck with Figma plugins. Promising names like uidesign.ai produced inappropriate colour schemes and very basic styling while Sprouts Design (‘A little AI-powered plugin to inspire you and easily sprout new prototypes in Figma’) didn’t offer any real value to the design process. And with the huge amount of UI kits and templates on offer within the Figma community already, using Artificial Intelligence here doesn’t seem to be particularly helpful.

UI design
Sprouts design

Conclusion: When it comes to wireframing, AI-driven tools really can help speed up your processes. I highly recommend getting to know either of the wireframing plugins above. But in terms of UI and making those wireframes high fidelity, AI doesn’t seem to be of much help. Luckily though, searching within the Figma Community for similar templates and UI kits can prevent you having to reinvent the wheel for every project.

Branding

To add substance to my wireframes, SliceSquad required some branding. Logo generators have been around for a while now so should, in theory, be capable of providing credible design choices. My initial search led me to Looka. This site prompts you to select preferred styles, symbols and colours, and then it generates logo options that you can customise. Your finished logo is available in a brand kit (starts at $65/€61a year) and the services even offers an AI generated website. Unfortunately, none of the options jumped out as distinctly professional or suitable for SliceSquad's needs.
Looka
It was Smashing Logo’s turn next, where you can ‘design a logo you love with no sign-up required’. Again you can choose from types of fonts, styles and colour schemes but their initial offerings weren’t particularly appetising. And the Virtual Designer function was very gimmicky.
Smashing logo
On my third attempt, Logo.com provided a few options that could be modified into something usable. With logo generators only really able to offer font and icon combinations, I opted for a retro ’90s font to do some of the heavy lifting.
logo.com
Slice Squad logo
Conclusion: In the end, I chose an icon that I liked combined with a font I liked, adding the colour in Illustrator. There wasn’t much of an assist from AI in this particular part of the design process.
Although logo generators are some of the longer established AI tools, none of the sites I tried out produced anything close to a professional-looking design. If you’re short on time, an off-the-shelf option from a stock website might be a more viable shortcut…

Image generators

Now onto the prototyping phase. Can AI-generated imagery offer realistic photos for my project? I began my exploration with NightCafe. With email sign up, you get free credits to play with and some of the illustrations are actually quite good. “Pizza delivery logo” didn’t yield anything useful but there were some solid generic images. And, as there’s no initial cost, it’s a good one to start off with if you haven’t played with AI-driven images before.
NightCafe
For specific requests, WePik was more useful. While stock imagery can usually be used for prototyping (FreePik happens to be my favourite), WePik can be good to generate something specific like a fake shopfront. With the correct branding applied, the images below would be perfect for a mocked-up ‘About Us’ page. This site also offers an large collection of free ready-made design templates to customise with their online editing tool — well worth checking out for presentations, slides and even social media posts.
NightCafe shopfront
Although my prototype didn't require images of “Kim Kardashian eating pizza”, I couldn't resist seeing what WePik would conjure up in response to the prompt. AI-generated images sometimes grapple with the intricacies of human anatomy, and in this case, that resulted in Kim appearing to have six fingers in some pics. The hovering slice of pizza is another example of the ongoing challenges artificial intelligence faces in producing convincing photos.
Kim Kardashian NightCafe
Next up was Ideogram. Although MidJourney is the current frontrunner on the image generator front, it tends to get the yips over actual wording. Prompts like “with the words SliceSquad on it” tend to get ignored and the end result can have any old collection of letters on it. Ideogram a new generative AI image startup founded by former Google Brain researchers is currently being sold as the solution to this, using its ‘typography’ function.

Although the standard of artwork isn’t as high, Ideogram is currently free to use so it’s another one to have a play around with…
Ideogram
After exhausting the free options, I was excited to dive into Midjourney and signed up for a month’s subscription for $12.80 or €11.93. The images below were the result of the prompt “3d logo of a pizza delivery app called SliceSquad”. Although they’re cute and colourful, I’m not sure what I’d use them for. Note the absence of “SliceSquad” written anywhere and the misspelling of “pizza”.
SliceSquad on Midjourney
And, of course, I had to check how Midjourney pictured “Kim K eating pizza” as a comparison to NightCafe’s versions. I’m not entirely sure why Kim finds herself in such a romantic, Renaissance-like setting in the images generated, but there's also the curious detail of her having six fingers in these renditions too. For this particular prompt, NightCafe’s offerings bore far more resemblance to the reality star than Midjourney’s.
Kim Kardashian Midjourney
But on to more practical purposes. For my SliceSquad prototype, I wanted realistic photos of the different pizzas shot from above and isolated on white. Although I’m sure I would’ve found suitable pictures to use on a stock photo site, Midjourney provided quick and accurate results to very specific requests. However, the results for ‘Chicken Supreme pizza’ [far right] were slightly disturbing…
Midjourney food pics
Although I found Midjourney handy for quickly generating quite specific photos, it was the illustrative aspect that I found the most interesting. To illustrate this case study, I asked it to generate images of “robots designing a pizza delivery app” and was genuinely impressed with some of the outcomes.

This exercise also provided an opportunity to explore the different artistic styles — check out this article for 50 prompts to try. One notable observation I had about about Midjourney is that unless the gender is explicitly specified, any human figures generated default to male.
Midjourney illustrations
Armed with my logo, branding and AI-generated images, I took to Figma to build my SliceSquad prototype. The ability to generate highly specific photos, like “three sugared ring donuts isolated on a white background” or “a handful of chunky potato wedges isolated on a white background”, proved to be a time-saver compared to searching stock photo websites. I also used ChatGPT here and there (“generate a one sentence description of a Mexican Hot pizza”), whenever I was lacking inspiration…
Slice Squad prototype
To recap, in the end I used an AI-driven logo generator, images from NightCafe, WePik and MidJourney as well as the odd bit of ChatGPT-generated copy. Click through my interactive prototype below...
SliceSquad screens

Key takeaways

After testing out so many AI-driven products, my conclusion was that while some can genuinely speed up your workflow, they all realistically need considerable intervention. In essence, AI tools can be powerful aids in the design process but they work best when combined with the expertise and creativity of a real life human.

Here are my main findings:
ChatGPT: Under certain circumstances, ChatGPT can be a valuable tool for generating copy (with editing needed) and creating structure. In a prototyping scenario in particular, where you don’t have final copy to use, AI-generated text works far better than filler.
AI Name Generators: While far from perfect, they can spark new ideas that you might not have considered otherwise.
User Persona Research: Using templates and ChatGPT-generated motivations, aims and pain points can be a helpful shortcut but shouldn’t replace actual research.
Competitive Benchmarking: Over the course of this study, I didn’t come across any good competitive benchmarking tools and manual research (even simple Google searches) remains crucial for the user experience process.

Elon Musk eating pizza

• Site Mapping: If you need to create site map visuals regularly, Octopus.do could be well worth investing your time in. Otherwise, LucidChart and Figma get my vote.
Wireframing: Figma's free plugins are impressive and ahead of the game. They're a valuable resource for designers, and I'll continue using them in the future.
UI Design: None of the UI and design plugins stood out as particularly innovative. And, between online colour pickers (genuinely useful for choosing schemes), free UI kits and Figma templates, there are plenty of resources available without AI intervention.
Logo Generators: I was underwhelmed by the AI-driven results and recommend considering off-the-shelf options from stock sites if you need a quick and cost-effective logo.
Image Generators: MidJourney stood out for me, particularly for creating captivating illustrations and realistic photos that may not be readily available on stock imagery websites. However, it can be addictive, so be prepared to lose track of time when refining your images endlessly in the MidJourney rabbit hole.

Next project >

I'm always open to collaboration and interesting new projects. Got an idea?

let's chat