What is Sundrop?
Sundrop, a multimodal AI, was designed as part of a design challenge to dive deeper into an industry that interests us. Our design redefines interaction with a focus on accessibility and friendliness. Its mission is to empower users of all backgrounds, making AI a user-friendly companion rather than a complex tool. Sundrop's commitment to inclusivity extends to accommodating various communication inputs, like media, text, gesture, and voice. Ultimately, Sundrop seeks to demystify AI, unlocking its potential for everyone.
Length of project: 3 weeks
Team: Jake Boes, Scott Sherman, Cory Vogel
Role: Research lead, co-designer
Tools Used: Figma, Adobe Photoshop
Data That Drove Sundrop
An initial survey of 30 users indicated an untapped market skeptical of AI's usefulness. Our goal is to create a design that generates excitement, by exploring strategies to demonstrate the practical benefits and relevance of AI in their daily lives.
How much does AI impact your everyday life?
How Often do you interact with AI?
Pain Points Extracted From User Interviews
-
Unsure how to use AI
“I’ve never used AI and I’m not really sure how to. I have heard of others using it, especially in my industry, but I don’t feel like I really need it.”
-
Lack of visual engagement
“I use Chat GPT. Mostly for translating purposes at work. My main complaint would be that it is visually boring. Some times, it is hard to differentiate my inputs form the bot’s outputs.”
-
Lack of accessibility features
“I wish there were more accessibility features on the current AI platforms like text enlargement. It would also be cool if you could interact with a bot in ASL.”
-
Over estimating AI capabilities
“I would use AI to help with everyday activities but I almost feel bad? Like I’m going to hurt it’s feelings. Rationally, I know it is just a robot but it just makes me nervous.”
Designing a Solution
Maximize Impact
We designed multimodal capabilities. Uses are able to interact with Sundrop via media, text, gesture, and voice by using the multimodal toolbar within the dialogue function. Because these inputs are all located in a central location, users are also able to seamlessly switch between modes of interaction at any point to best suit their needs.
2. Enhance Usability
On our home page, we included some ideas users can get started with. This is something that many AI platform have in common. What sets us apart is the addition of contextual tooltips, guiding users through actions to increase usability for users of all skill levels.
3. Increase Approachability
We wanted to prioritize a friendly tone. We approached this goal through a few different avenues:
Creating a Sundrop Mascot, “Sunny”. We incorporated Sunny throughout the design to make users feel like they have their own friendly personal assistant. This way, we can make AI feel less robotic and more personable for users.
Surveying users to find the right wording we would use in the app to describe starting a new chat within the app. Chat seemed too generic and, after all, with our multimodal design, you can do far more than just chat on Sundrop. The word we landed on was “dialogue”, with 60% of users preferring it to interact or exchange.
Using rounded shapes and edges throughout our design to keep the visuals soft and inviting.
4. Democratize Access
We designed an accessibility tab where users can adjust the app to their preferences. We included text enlargement, light and dark mode, and color customization. Additionally, with the multimodal function, users are able to communicate with Sunny based on their preferences. Rather than typing, they can talk to him (with the voice function) or even sign (using the gesture function).
Designing and Iterating
-
![]()
Wireframe
We started by wireframing, just to map out our ideas
-
![]()
First Iteration
Upon completing usability testing we gained some valuable insight into issues with the design. After asking users to complete a series of tasks within our prototype, the overall success rate was 80%. We learned:
1. Users commented the homepage was too busy.
2. We didn’t incorporate a home button, users can’t access the home screen after starting a new dialogue
3. The sharp, rectangles aren’t in alignment with our friendly tone.
4. Feedback suggested that the current set of icons could be improved for better clarity and visual communication.
5. We needed to make the instructions more clear and concise.
-
![]()
Second Iteration
Following insights from recent usability testing, our design underwent targeted refinements to enhance user experience. The home page is now less cluttered, replaced the rectangles with more rounded shapes, the multimodal toolbar appears exclusively in the dialogue function, and we introduced clearer iconography, including a home button for improved navigation. Additionally, we replaced the original instructional microcopy with more concise wording. These iterative changes aim to create a more intuitive and user-friendly interface, addressing specific user concerns and aligning our product with evolving design preferences.
After running usability tests on this iteration, the overall success rate was bumped up to 89.6%, a 9.6% improvement from our last iteration.
However, users still had some concerns. The yellow was not well received. Users commented there wasn’t enough contrast and they just didn’t care for the color yellow much.
-
![]()
Final Design - Light Mode
In our latest iteration, we replaced the yellow theme with customizable color schemes—green, purple, and red—empowering users to personalize their app experience. To ensure accessibility, we conducted a WCAG audit on the palettes. Furthermore, we designed an accessibility screen, integrating familiar features like text enlargement and dark mode based on user feedback about their everyday phone settings. This commitment to customization and inclusivity reflects our dedication to meeting diverse user needs.
-
![]()
Final Design - Dark Mode
Here is a look at our design for dark more.
Final Prototype in Action
In this example, the user asks sunny to help them make a grocery list. Sunny generates a list of common items. However, this isn’t what the user is looking for. They take a picture of their fridge instead. Sunny generates a new list and they are able to open it up in Instacart.