Slice Squad: An AI Case Study
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.
(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?
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.
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.
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.
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…
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.
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…
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.
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
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
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…
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.
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.
• 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 >