X icon
hamburger icon

Bard Mobile App

Product Design

UX/UI

Mobile App

AI

Figma

A fictitious banner add of the Bard mobile app.

DISCLAIMER: This was a personal challenge project and is in no way affiliated with or commissioned by Google/Alphabet.

Project background

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.

Problems

  • Bard is currently only available as a browser-based web app

  • The Bard browser experience on mobile has ease of access difficulties and UI limitations

Goals

  • Design a functional and visually appealing mobile app version of Bard

  • Create cohesiveness across the Bard web and mobile experiences
A screenshot of the Bard web app.

Research


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.

A screenshot of the Bard web app on a mobile sized browser.

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.

A screenshot of various Google mobile app products.

Design process


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.


A feature of two main screens from the Bard mobile app design. A feature of four main screens from the Bard mobile app design. A feature of two main screens from the Bard mobile app design. A feature of four main screens from the Bard mobile app design.

Results


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.