Generative AI Assistant

Qualcomm Snapdragon • 2024

An interactive AI interface demo featured at Snapdragon Summit 2023.
‍
The Challenge: Designing the visuals and interactions of an AI assistant for Snapdragon Summit in 2 weeks time. How might we best showcase the capabilities of our on-device AI through an easy-to-use and reusable demo application?

Update: Designs previously under NDA have just been released (see below)!

My Role
Lead UI/UX Designer

TimelineSep 2024

Team
2x UX Designers
4x Devs

ToolsFigma

ContributionsCompetitive Analysis
Objective Gathering
Interaction Design
Rapid Prototyping
Prototype Testing

The ClientQualcomm's yearly event introduces and demonstrates new, exciting technology to both shareholders and public alike. One such innovation is their on-device AI technology, which paves the way for more secure, private processing of a user's queries.

Project Goals
What does success look like?To tackle the challenge, we set a few key goals. First, we wanted to build a simple, no-brainer AI application with intuitive controls. Then, we focused on creating a user path that could be easily replicated for demo purposes. Finally, we aimed to collaborate closely with both the marketing and development teams to ensure everything was ready in time for the summit.

User Research and RequirementsWhat can we learn from our users & other solutions?After discussions with developers and managers, we distilled the features of this app to 3 main functions.

Interchangeable InputsThe assistant should support both voice and text input and output, similar to how Siri and ChatGPT enable users to interact using either mode.

Chat History
A chat history feature allows users to revisit previous conversations and rate performance, akin to how iMessage and ChatGPT function.

Travel PluginInteractions with a travel-focused AI for trip planning and filling out travel information should help redirect users to a flight booking site once all information is acquired.

MockupsWhat should these screens look like?Once we identified internal users as the app’s target audience, I leveraged the existing design system to swiftly craft the mockups below. While numerous iterations were created, only a select few can be shared due to NDA restrictions.

Home ScreenChat Options: Stakeholders wanted seamless switching between regular AI and travel AI, so I proposed ann Assistant Mode and Plan Trip Mode, allowing users to easily switch via the home screen.

History: While continuing conversations was not possible due to limitations, I added a shortcut for starting new chats within the history screen.

Chat InteractionChat Modes: In listening mode, the assistant responds out loud while in typing mode, user inputs query themselves.

Mute and Stop: Users can mute the assistant at any time with a dedicated mute button, or use the stop button to halt responses and processing.

Travel OptionsTrip Planner AI: This mode prompts users for details to complete a Skyscanner flight information form, maintaining all the functionality of the Assistant AI but tailored for travel.

Skyscanner Plugin: Similar to ChatGPT plugins, the AI can collect sufficient information and seamlessly transfer users to Skyscanner.

PrototypeHow does the final design look?This animation showcases how this prototype was going to work. This was done so that our developers would be able to understand each interaction would work.

*Note: Red coloring was implemented last minute due to a final request from marketing. (see improvements)

A useful designWas the design successful?To measure the success of the app design, the app needed to perform seamlessly on the show floor and meet all specified requirements. Feedback from demo participants confirmed that the app was both well-made and highly usable. Users praised its color-coded interface, chat history, and the overall simplicity of its design.

Snapdragon Website Showcase My app design is fully showcased in the "Mobile AI Solutions" section on Qualcomm's website.

See the website ➡

Updated NDA DesignsMy new designs (previously under NDA) have recently been released on Qualcomm's AI site.

See the website ➡

Room for improvementHow could I improve this?For the next project, I was tasked with improving the design. I gathered feedback from both our developers and demo participants, compiling a list of key improvements to implement.

Color Palette
Marketing chose red to match Snapdragon’s branding. In a redesign, I’d follow brand guidelines for a more cohesive color strategy. Instead of using color to distinguish Assistant and Plan Trip modes, I’d find clearer, less cluttered alternatives.

SkyScanner Integration
Right now, the app just links to the website—simple but not polished. Embedding interactive cards in the chat would improve engagement and streamline the experience. Adding contextual suggestions would also make interactions more dynamic and intuitive.