Reimaging a brand identity can do wonders for a company’s marketing team. Less obvious are the wonderful opportunities that arise for elevating existing UI.
By the time Participate, an adult learning platform, released its updated branding in early 2021 its cards were in need of a major overhaul. While the cards needed a visual update, it was crucial to make them more functional. As a startup, the platform had been through several rebuilds, but the cards always remained the same—clunky, nondescript, and without a nod to responsiveness. However the brand release was a catalyst to polish the platform and elevate our product. I rolled up my sleeves, excited to bring some life to our old cards.
Sketching, prototyping, UX testing, code pairing, high fidelity UI
Layla Namak, Graphic Designer
Matt Harris, Software Engineer
As I set out to redesign our cards I had a few things to figure out. First and foremost, their purpose. As I audited the ways we used them, several patterns emerged:
“All of them look the same when we are in a hurry.”
UX test participant
“I feel like your screen gets filled up pretty quick and you have to scroll around.”
UX test participant
I used our pain points and goals as a lens for my next step—looking into the wild to scope out popular patterns. Investigating Amazon, Zillow, Airbnb, material design, Wakelet and others revealed that all cards include some basic information: images, a headline, supporting text. Often they included tags, the ability save/bookmark/like, and data snapshots.
.png)
It was Airbnb’s cards that resonated with me. Their hybrid approach between a traditional rectangular card and a list was the combination I was searching for. Because our users tended to look for specific information, organized in a homogeneous order, a list view was conducive to reducing a user's cognitive load. It would get them to the content they wanted to engage in, in a mobile friendly manner. With that being said, I still wanted a design that captured the benefits of a card—something that brings together similar information and leads to a broader page.
It was from this point that I began iterating on what our future cards could be. I began with wireframes and sketches for initial internal feedback and then moved into a high fidelity design to test with users. Refinement was taken even further once I paired up with our graphic designer and front-end developer. Together, we infused the new brand into the cards and paid close attention to responsiveness. Through code pairing we were able to quickly iterate and modify the design to ensure it worked as a base component across the platform that could then be modified depending on the context.
List/card hybrid design to help users quickly scan data and reduce cognitive load when exploring; accommodates both homogenous and heterogeneous information
Experimented with shapes to distinguish cards but ultimately chose other visual cues to achieve this goal
Based on user feedback, updated card label to larger text and color UI to bring attention and hierarchy to the card
Icon overlay to help users quickly identify card type and added gray tags to lower hierarchy and keep attention on main card content
Replaced the heart with a star to better represent quick access/bookmarking as opposed to "liking"; modified tag design to include a tag icon so users could better understand their purpose
The end result was a new type of card that transformed our platform’s look and feel. More importantly, however, final rounds of user testing were full of user delight. We achieved our goals of creating cards that were easier to browse, were visually distinguished from one another, and could be viewed across devices.
“I like that it's very simple and not bogged down with a lot of information. The information is easy to find and you can click on the card for more information.”
UX test participant
“It’s really appealing to my eyes… the colors, the images. It's not only text and white background...it’s like the perfect balance.”
UX test participant
“I think it’s a pretty good size. It’s not too small and it’s not too big. It’s not taking up too much of the page.”
UX test participant
.svg){kind=icon}
.svg){kind=icon}
