Background

CASE STUDY

Heartbeat was a transformative and innovative Quick Left legacy product that tracked the status and health of various projects. When Quick Left became acquired by Cognizant and project teams had to start running differently from when we were a smaller scale consulting company, some of the tracking requirements needed to adjust and grow. While there were some crucially important aspects from the legacy product that provided insight and collected important feedback, a redesign was necessary to fit in with our group’s vision for growth.

Specifically, important goals of the redesign would allow for better scaling as we added the number of projects and people participating in those projects. It also needed to fit more cohesively alongside the Cognizant brand, particularly because of the possibility the app may grow outside of use from just our former Quick Left group. Lastly, we needed to ensure there was flexibility within the modularity of the layout in order to accommodate the growth of features over time and customize the availability of certain features depending on user and device types.

BRANDING

Legacy Heartbeat was emblematic of the startup culture it was born in. Bright pastels didn’t hesitate to catch your eye and cartoon-like bold, rounded strokes held a lot of zest, playfulness and youth.

With Heartbeat 2.0, we wanted to communicate more structure and authority but still wanted to retain some of our youthful roots. In order to tie the new brand closer to Cognizant, we borrowed some accent colors from the brand guide and put our own spin on the brand font Interstate. The logo kept the symbolic heart, but gave it more structured lines and a bold red color. We dropped the rounded corners, and used the authoritative black weight in sentence case. The simplified and more iconic heart shape is very scalable to small sizes, and the strong contrast in shapes is a bold statement of project health.

ui design, branding, redesign, heartbeat

For interface elements, a subdued blue-gray was chosen as the background for the header bar and the Accelerator orange was chosen for a splash of personality and to tie a connection back to the Cognizant Accelerator group. White cards keep with the serious tone and add slight dimension.

SCALABILITY

When Quick Left was an independent consulting company, there were only a handful of projects happening at any given time and the design is representative of this lack of constraint of needing to grow and scale much farther beyond that.

In the screenshot below, we have the project view of Heartbeat 2.0 and you can see the rectangular bars above the title line. The elevated bar in the middle is to signify the “you are here” state. There are two projects on either side of Heartbeat. When projects would get added or removed, the size of those bars would adjust to become full width within that div. It’s easy to see that if there were 20 or more projects, it would be very difficult to navigate through them. Lack of hover states also didn’t provide clarity on which bar belonged to which project.

ui design, ux design, scalability, wireframes, user flow, heartbeat

Taking this feedback, a new solution for Heartbeat 2.0 made use of arrows on each project page with rollovers. It was important to keep the ability of switching from project to project because Heartbeat is used during a meeting where tech leads get together with the Director of Engineering to discuss project status. The arrows between projects prevent extra clicking by having to back out of each project in order to re-enter a new one. By removing the bar designs, the project page UI isn’t affected at all if the number of projects changes. The addition of breadcrumbs helps with navigating within a project’s various pages as well as getting back to the landing page.

ui design, ux design, redesign, heartbeat

In addition to the project page, several things were adjusted on the landing page. In Heartbeat 1.0, all current and past projects were listed on the same page without filtering. Because the Accelerator runs ten new projects every six months in addition to projects that continue with funding and other internal projects, it was important to incorporate filtering. This way a user could sort by active projects, archived, or projects they are associated with. Also, because there was only one team of developers associated with projects in Heartbeat 1.0, only one status color needed to be associated with the project. In Heartbeat 2.0, we have multiple teams associated with each project. The established lead of each team will associate a color status, so it was important to incorporate the ability to see multiple colors associated with each project. These are the dots you can see to the left of each project title.

ui design, ux design, redesign, heartbeat

MODULARITY

One important and new requirement for Heartbeat 2.0 was to incorporate better modularity. The explanation behind this was that with the increased numbers and types of users who are going to be on-boarded as the Accelerator grows, as well as the variety of projects coming through the program, we need to be able to customize various widgets with more ease. Because we used the React-MD framework (more on that below), it was easy to design using the Google card style.

ui design, ux design, material design, redesign, heartbeat

REACT-MD TESTING GROUNDS

There was a further initiative than just redesigning an existing app during this process. Because the Cognizant Accelerator’s main focus is with vetting, developing and testing new business ideas, much of the product design focus is on the user experience of the applications. To alleviate some pressure on spending too much time making beautiful interfaces, our design and development team was interested in testing out a new framework. With a UI framework, we could potentially standardize using it in future projects that were an appropriate fit. By experimenting with customization on the available components, we learned this framework was a great fit for our needs in many cases. Find the framework here.