case study:
catapult
TIME ROLE
2 weeks Visual Competitive Analysis
Web Design
Branding
Prototype
AI is rapidly advancing and many individuals are harnessing its capabilities to improve their work and outcomes. One example of AI is Catapult - an open AI platform crafted to aid in the development of strategies and marketing plans, ultimately enhancing your clients' businesses.
High-fidelity prototype of Catapult
INTRODUCTION
Catapult is a product of Build Up Labs, a start-up studio that conceives new ideas for B2B and transforms them into startups. Catapult is one of them and it is a platform connecting OpenAI and the Bullseye Framework. It helps freelance marketers and small marketing agencies in developing comprehensive marketing plans and strategies for their clients.
PROBLEM
The platform is already working, facilitating a chat interface between the user and the bot. The bot generates tactics that the user can implement to improve their client's business. The screen is currently divided into two parts - on the left side is the chat and on the right side are the results.
Current screen of Catapult
..
The platform has undergone testing by its owner and has garnered valuable feedback from users. Based on this feedback, there appears to be significant confusion caused by the screen division, with the amount of information on both sides. Additionally, there are walls of text that reduces readability, and repeated information is presented on both sides.
Current screen of Catapult
VISUAL COMPETITIVE ANALYSIS
I have conducted research on competitors to see how they are displaying their platforms. I found a couple of companies, but my primary interest lies in ChatGPT, Perplexity and Scalenut. ChatGPT and Scalenut have a more minimalistic design, with clear information display that avoids confusion. Perplexity, on the other hand, presents a lot of information on the screen, but they still try to organize all the information into cards.
ChatGPT, Perplexity and Scalenut
HOW MIGHT WE
I have been presented with a challenge by the company to address:
How Might We, visually, demonstrate and deliver our unique selling proposition on Catapult?
Taking into account user feedback, research findings, and insights from competitors, I then worked on finding a solution to resolve the issue.
LOW-FIDELITY
I have decided to split the current screen of Catapult into two separate pages - one page for the chat and another for results. This way, users can focus on one aspect at a time.
In the chat, they will receive concise results with only a title and a brief description. From there, they will be directed to another page where they can access detailed information about each tactic. On the tactics screen, users will have easy navigation between each of them.
Low-fidelity
MID-FIDELITY
After conducting user testing, I received feedback suggesting that having one button for each tactic the bot suggests would be better. This way, users can directly navigate to the tactic they are interested in. I attempted to enhance the organization of the chat as well by adding more space between messages to improve readability.
On the tactic screen, I moved features such as rating, download and share into the three-dot menu.
Mid-fidelity
BRAND ATTRIBUTES
While designing the logo for Catapult, I aimed to establish a connection between the name and the icon, incorporating elements like the target and Bullseye Framework.
Catapult stands for curiosity, creativity and trust. With these qualities in mind, and considering the AI nature of the platform, I chose purple as one of the primary colors, representing creativity, and green to evoke freshness. To enhance the creative vibe, I included illustrations. For a clean and modern look, I chose the Lato font, known for its readability and contemporary style.
Branding for Catapult
HIGH-FIDELITY
Following the high-fidelity design, I decided to make a couple of changes based on feedback received during the mid-fidelity stage. First of all, I added an option to create a new chat and introduced tabs for current searches. Second of all, I increased the visibility of results received from the bot since they are the primary focus and purpose of the platform.
On the tactics page, I included an "Ask details" button to ensure users don't miss this option in the three-dot menu. For the information under "Generated Guides," I divided the content into different cards due to the extensive text. This allows users to choose which section to expand and read. I highlighted crucial information and improved the visual presentation for better readability, easy navigation and a more pleasant viewing experience.
High-fidelity prototype of Catapult
High-fidelity of Catapult
MOBILE VERSION
As the website needs to be responsive on mobile devices, I have created a mobile version. In this version, I introduced a chat feature where users can view a sample chat and start a new one. Following that, there is a screen displaying results, allowing easy navigation between tactics.
Mobile version of Catapult
NEXT STEPS
As the next steps, I would like to create a dashboard showing all metrics and past searches. Additionally, I plan to develop a workspace where users can create and edit projects, tailoring them to their clients' needs. Furthermore, I would like to improve the homepage to provide informative content for first-time users and implement an animated, step-by-step tutorial for newcomers.
