Maluuba needed an overhaul
Maluuba, which first launched at TechCrunch Disrupt 2012, was in need of a major visual overhaul. Since its initial launch, the feature set had grown significantly and Virtual Personal Assistant (VPA) apps had changed dramatically.
Maluuba needed a modern and fresh approach to its VPA that best utilized its unique abilities.
Exploring the space
Multiple results & Daily Feed
A big part of our new feature set for Maluuba 2.0 was the ability for our assistant to return multiple results as a response. We knew early on that we needed to explore design patterns that allowed for easy traversal between these results and that failed gracefully when the top few results weren’t the most accurate.
Another big aspect of our new system was building a daily feed of important events, predictive news, and calendar items that would encourage the user to open Maluuba more frequently. We knew we needed this information to be easily parsable and only show the information that was necessary for the result.
Wireframing the anatomy of the feeds screen
We explored various layouts, styles, and information hierarchies to see what would best utilize our feature set.
Iterations, iterations, iterations
Since our management team put an emphasis on crafting a distinctive style, we needed to quickly go from wireframes to a large set of high fidelity mockups.
The above are just a small sample of all the iterations we explored around the homepage. Each iteration helped start conversations around what direction we wanted our product to take.
A feature set that was too large in scope
After an extensive set of high fidelity mockups and many discussions with management, we landed on an ambitious redesign of our app that included a tabbed style hierarchy and fluid animations to highlight our new feature set.
This solution, however, was built with the assumption that we would have all the new underlying technology to power it. As we quickly discovered, our product and engineering teams had planned to build something too large in scope. Our developers for the various systems started to get behind and became months away from finishing their projects. We still needed to ship an initial version of our redesign as soon as possible so that we could show progress to investors and partners.
This was a designer’s nightmare. Almost all of the constraints, expected feature set, and key differentiators were now not possible and the design of the app needed to be refocused urgently in a short period of time.
Refocusing around discoverability
We quickly shifted our focus to what we found to be the biggest challenge around the adoption of assistants: discoverability. New users just didn’t know what Maluuba could do.
We also realized that we not only needed to share Maluuba’s capabilities as an assistant but also make each feature relatable so that users could understand how and when to incorporate Maluuba in their daily lives.
Most systems have a list of available features grouped into categories. This structure, although well organized, does not encourage discoverability of all available features since users often do not ever bother drilling down into every category. It becomes tedious and uninteresting to do.
The solution we designed instead was to build discoverability right into our homescreen by displaying a series of interesting, fun, and uncommon queries along with colorful icons. As the user scrolls, each icon slightly scales and fades into full color from grayscale, a subtle effect the encourages users to keep scrolling and learning more available features.
Re-designed homescreen focusing on discoverability by showing fun and uncommon queries with colorful icons.
Using interesting and uncommon queries such as ‘I could really go for a donut’ both demonstrated our strengths in processing natural language and taught the user our feature set in a fun way that encouraged them to keep scrolling and discover more functionality.
A new visual style
Another goal was to give Maluuba a much needed face-lift. The new design was minimalistic and modern, inspired by Material design.
Material - but not really material
We didn't incorporate all aspects of Material design, for various reasons outside of the design team’s control, but we did include many things such as the FAB, clean bold colors, and smooth animations and transitions. We were inspired mostly by the Material aesthetic, as opposed to its user experience principles.
We designed our own set of cards for all of our features. Since Maluuba supports over 24 domains, each with its own card style and various states, we had to build an entire library of cards. Click here to take a detailed look at that project.
A playful and responsive speech animation
Finally, another key part of our redesign was to build an attractive and distinctive speech animation that animates in sync with the volume of the user's voice.
This was an important part of the identity of our app. The speech animation often served as the ‘face’ of any assistant and so we needed to make it playful and welcoming.
We went through dozens of iterations until we found something that felt right. Since the volume levels provided by the microphone API aren't reliable, we also needed to develop various smoothing algorithms that could run efficiently and ensure the animation wasn't jarring or shaky. I worked closely with the developers to tweak the algorithm to get the right balance of responsiveness , framerate, and performance.
A learning experience
There's so much more I could discuss about our process, from our user studies, to color selection, to the app's icon design, to various paths we needed to alter due to API limitations, and more.
It was a great learning experience for myself and the entire product team at Maluuba and we grew significantly as a company building this product.