DISCLAIMER: This was a personal challenge project and is in no way affiliated with or commissioned by Google/Alphabet.
A brief overview of Bard and the genesis of this project.
Bard is a conversational AI chat service developed by Google and powered by its large language model, PaLM. Bard can be used to answer questions, generate text, translate languages, write different kinds of creative content, and much more.
Bard is currently only available as a browser-based web application. For this project, I asked the question, “What would a Bard mobile app look like?” and challenged myself to adapt the existing Bard web app into a high-fidelity mobile app in Figma.
I had good familiarity with the Bard web application going into this project as a regular and enthusiastic user of the product.
I kicked off the project by taking screenshots of the Bard web app user journey in both desktop and mobile browser modes and transposing them into Figma.
My next step was to familiarize myself with Google Material Design, a design system created and used by Google across all of its products. I studied Material 3 (the latest version of the design system), added the Material Symbols icon plugin to Figma, and duplicated the Material 3 Design Kit open-source Figma community file.
To round out the research phase, I studied and took screenshots of several existing Google mobile applications to get a sense of the consistency and UI patterns used across them.
Since I had an existing web application to work off of, I jumped straight into high-fidelity design of the Bard mobile app.
I designed 7 screens in Figma that cover the primary functionality of the app, as well as a Bard iOS mobile app icon. I created components for reusable elements such as the top navigation bar. I also utilized auto-layout for precise and consistent padding and spacing between elements.
I utilized guidelines from the Material 3 design system to select typography for the mobile app. For colors, I mimicked the colors and gradients of the Bard web app.
While I didn't have specific metrics to measure for this project, overall I am very happy with how the Bard mobile app concept turned out. Bard is a product I use daily, and this was very much a "scratch your own itch" kind of project. I designed a mobile app that I could see myself using and getting lots of value out of.
Have a question, comment or inquiry based on this project? Hit the button below to send me an email and I'll get back to you soon.