Maluuba's Search Cards

Establishing a distinctive design system for search result cards

  • #android
  • #search
  • #assistant

Establishing a Distinctive Look & Feel

When we were building Maluuba 2.0, I was tasked to craft together a design system that created a distinctive look and feel for our application. Our management received feedback from investors that we needed to differentiate ourselves from Google’s search cards and so made it a priority. It was also important to them to ensure it was clear which domain or intent each card belonged to so that potential evaluators of our technology could see how fast our queries performed.

This was challenging since our application lived only on Android and so moving too far away from material design guidelines would make it look foreign and could potentially also cause usability issues. I needed to balance the request from management to move away from the norm with making a sensible and usable design that conformed to the norm.

Using color as a differentiator

After some research and sketching together various ways that we could differentiate our visual identity and ways that cards could identify themselves, I landed on using color as the primary way to indicate domain.

This decision was not easy to make. Not only is color not a good differentiator because of various people’s vision capabilities and because of the screen quality of various android phones, color cards also breaks the Material Design style guidelines that state that cards should remain white. We moved forward because I felt that it gave a bold look and feel to our cards while not being too overbearing like the heavy use of icons and other variation explorations would. We could then use layout and type as better ways to differentiate and standardize card layouts to encourage learnability. Trying to balance business needs and product needs aren’t always easy but it’s something we needed to decide and move forward with.

Organization & System Settings Cards

We started off working on the simplest set of cards we had; our organizational & system settings cards. This would help us start testing our assumptions and start building towards a common design language

Card design

Our final design used a small icon, domain color, and a standard set of action layouts to establish a design language that scaled well for all domains within organization and settings

The layout for each Organization and System Settings cards
A sample of some cards from our Organization and System Settings cards

The first set of cards were a success. They were distinctive and using bright colors started to make our app feel playful. At the same time, the use of color wasn’t distracting and even if the color was removed, the use of layout, iconography and type helped distinguish each action.

Interactive Cards

Now things started to get tricky. We knew there would be a set of cards that would introduce much more interactivity that our Organization and System Settings cards such as Music or Communication cards that require text input.

The card's layout should be immediately obvious

After playing around with various solutions, we realized that one of the key strengths of our Organization and System Settings cards were how layout defined the domain. We continued with that idea and after some sketching we realized that we should put a significant emphasis on using layout in a way that makes the card’s domain immediately obvious.

For example, we could have designed the interactive card for the Music domain to have beautiful cover art and minimal controls. However, with our chosen approach, since the music controls such as play and the time scrubber are so essential to music, we would make those controls front and center, giving the entire card immediate recognition of its domain.

Card designs

For each interactive card, we had to identify the layout and essential controls that would help users recognize the domain of the card immediately. Refining down to only the essentials is never easy and required iterations and debate.

A sample of some of our interactive cards

The final designs were effective while keeping the solid and bold colors from the other domains. Our design system was beginning to take form and was starting to scale.

Search Cards

Up next I was tasked to design cards for search that had two stages: the results list and the detail page. We worked with third parties to obtain the data for many of these domains so incorporating their branding was important as well.

The format of our simpler cards didn't work for search

We tried and tried to make our search cards work with our existing format but nothing felt right. None of the designs felt like they belonged with our other cards even when using our solid color backgrounds.

A sample of failed attempts to design for search domains. Restaurant domain shown here.

We realized that it was the itemized list, heavy information density, and thumbnails of real life photos required these cards to be designed differently.

Card designs

We knew we needed to design something different for search domain. After some iterations, we were able to design cards that felt like an extension of our design system rather than breaking away from it.

The layout for each Search results card

We came up with a design that used a photo as a top header which acted almost like a hero graphic. We then laid the list out on top of a solid color background that made it feel much closer to our other cards. We kept the list a much lighter color so that the text could be darker which made the dense information on the card much easier to read.

A sample of some of our search cards

Using a combination of photos and solid color cards proved to match our aesthetic while respecting the needs of search cards.

Detail screen designs

Since Search was the only domain that had two stages, we also needed to design the detail screen.

A sample of detail screens for the Movies domain.

For detail pages, were appropriate, we used a header graphic but tinted it with the most common color found in its movie poster. This helped the detail pages feel closer to our aesthetic of solid colors while keeping to photos to represent the movie.

Weather Cards

Our design system was starting to scale well and worked for many scenarios. We were able to adapt many more domains but there was one in particular that didn’t feel right: weather. Perhaps it was the trend of using large full screen graphics and animations (iOS Weather, Yahoo Weather, etc.) that illustrated the current weather condition which made our weather cards look stagnant. Whatever it was, the cards just didn’t feel right in our format. This was especially important because Weather was one of our most popular domains.

Card designs

We decided to break our design system here for Weather. We would use solid colors that would represent the condition. To ensure they didn’t get too unpredictable and match other domains in our set, we kept the overall color set for the Weather domain limited to a family of blue tones.

A sample of our weather cards that we chose to break our design system that matched color to condition

This resulted in arguably our most beautiful set of cards. The colors matched the condition and the icon and made the entire card feel consistent. This was an exception and certainly not the rule and, since our other layouts were more versatile, we’re confident that we will not need to do something like this often.

Only the beginning

Crafting Maluuba’s design system for their search cards were challenging and not traditionally how I would approach design. We were given constraints from our investors and needed to make the best usable design we could. I think our final result was successful for a first iteration and gave Maluuba distinctive look while keeping consistency when possible. We learned a lot from the experience and gained conviction around our design decisions through iteration.