Cora Chatbot — a Case Study

A landing page design case study.

shay.
shay.
Nov 16, 2019 · 7 min read

Project

Cora is a community-based support platform operating via an AI-driven chat application, which is designed to help users cope after an illness or injury, both physical and mental, accessible anywhere, anytime. Much-needed design updates are required for the landing page after more contents and features have been added to the website and the chatbot, respectively.

Weird mockups Cora website in perspective.

Backed by a panel of experts, Cora brings together the extraordinary stories of real people, the knowledge of psychologists and experience of healthcare experts to create an inspiring, informative and relevant back-to-health program that is designed to aid users through their recovery journey and as easy to use as texting.

Description by Half Machine.

The Basics:

Agency: Half Machine

My role: UI Design, Motion Graphics & Video Editing

Duration: 3 months, part-time

Tools: Sketch, Invision, After Effects, Premiere Pro, Photoshop

Website: https://cora.chat/

Process

It’s January 2019. I receive an email from a client that I’ve worked before. “I like those guys.”, I think. They’re looking for someone to help with UI work, some video editing and an explainer video for Cora; a chatbot belonged to TAL, Australia’s leading life insurance specialist. I have a week to update the design for the website.

Obviously, I say yes. (the thought of “what was I thinking?” definitely crosses my mind).

Since the timeline is tight and the team at Half Machine already know what they want, I decide to stick to the already-established visual style and wireframes provided while making an attempt to improve the accessibility and usability of the site instead.

Analysis

There are 3 pages in total, the homepage and the content category pages, which will be built upon a template. Initially, the one-page website only had a block of text in the hero section, a couple of videos and a link to the chatbot, with no sub-pages.

As an iteration, we need to add a home for the new video content and improve the currently-bare-bone visual elements, making the page look more inviting. This no doubt increases SEO scoring while creating more values for the website and the brand Cora. The 2 category pages consist of tab design to further split the videos into sub-categories.

Homepage

UI design speaking, the original design for the desktop breakpoint was done in a 1440px-wide artboard, with 135px-wide margins and leaving the main container at 870px. Odd choice of numbers but I also have made these questionable decisions before, so who am I to judge?

The giant margins.

Another issue is the main heading text takes over above-the-fold, but due to how tight the main container is, the text element doesn’t feel like it connects to anything, simply floats. Furthermore, if you view the website with anything wider than 1366px, you would have massive gaps on the sides, make the page feel even more unbalanced.

The first step obviously is to create a new grid for the new design with a much wider main container, so our new elements have more space to breathe.

The second issue is the contrast of the text against Cora’s distinctive aqua colour. A quick check with the Contrast app tells me that this pairing definitely fails WCAG 2.0 standards. To improve accessibility, I changed the text colour to a darker aqua tint. Our site is now complying with AAA standards.

WCAG what? Read Contrast Guide for a TL;DR

I also want to add human elements to the site. In the original design, there’s this clever use of the bubbles from the Cora logo to create the background. I thought it could be interesting to reuse this somehow. In the end, the bubbles become the mask for a photo.

Hero section.

The next step is relatively straightforward. I design the components for the video content section, this is where it will lead to more videos. Users can always open videos in a lightbox if they want to view any of these videos directly on the homepage.

Video in a lightbox.

The first section is presented in a controlled carousel, in the end, introducing the mentors, who took their time to share their experience. Right underneath are 2 more categories to expose the values of the content straight-off-the bat.

Below the video content is the value props section, prompting people to use Cora, the main hero of this site. With Cora, you can track your moods, access smart tasks so you can cope better and set up regular check-ins with the bot.

To spice the page up, I add some illustrations remix from avataaars. After tidying up the download and footer section according to the grid system, I reach a stopping point. I proceed to send an email to my client to check in on my progress and make sure that there are no surprises. They’re happy to move forward with most of the changes to the design except the illustrations, we go for a more direct approach with the UI of the chatbot in iPhone mockups. Simple but effective.

Value props.

Content categories

Moving on to the second part of this little project, those pages where all videos will live. This template is, again, fairly straightforward. We explore a few different visuals for the tab bar.

We’re also keeping the value props and prompt to download the bot sections on this page.

Tab card component.

Responsive design

I check in again with our lovely client. He’s happy to move forward to the responsive screens. I adjust the tablet designs, starting at 768px, to fit by reducing the number of videos shown on each row.

For mobile design, I change the arrows as a way to navigate between different videos for the first section to pagination dots to save width real estate, having the videos fluid and stretch across the screen to put the focus on the content.

To polish up the other components, I stack them for easier consumption due to the limitations of a mobile screen. This page is designed to fluid on mobile from 320px to the next breakpoint at 768px.

Mobile design.

Handoff

All designs are uploaded to Invision for comments and review. After everyone is happy with how it looks, I edit the UI styleguide with new typography specs, grid and components with their various states.

One last step is to make sure that every asset is exportable ready for Zeplin so our new can be built into a final product.

UI chatbot components and videos

After getting back and forth for a couple of times using Invision, we decide to move ahead with the new design. The deadline is met. Everyone is happy.

In the 2nd version of the chatbot, Cora is now capable of demonstrating your mood progress in a timeline using emojis and data that the user put in during their course of using the bot. A few challenges include making sure the chart fits into a small screen while the text needs to be legible. When an emoji is tapped on, a little bubble comes up showing the notes that the user associate with the mood.

Explainer video

An explainer video is an effective way to introduce a product to an audience without making them research and look at a bunch of screenshots (not unlike ones I include here). The directly I first go with is more prevalent among designers with the bot’s UI on phone mockups moving in 3D space along with the copy.

Unfortunately, the client looks for a more straightforward approach with a phone mockup, focusing on the UI and the copy instead.

Another hiccup I encountered is due to the notch, I have to figure out a way to mask the screen while applying motion effects to the phone mockup. Another reason for me to dislike the notch. When will this madness end?

In the first version of the video, I manually apply masks to each frame and animate, which becomes a giant pain in the butt. On top of that, since the footage provided has some personal details, it is tricky to fake all the effects on native iOS in After Effects. For the second version of the video, I create an overlay of the header in the mobile UI instead, which reduce the time of producing the video significantly.

Interviews

I proceed to edit all interviews to be more coherent and improve the quality by making the dialogues flow better. After polishing, introduction cards are added before each video. These also act as thumbnails viewed on YouTube.

Takeaway

It’s November 2019. Looking back at the project months later, I could have taken it a step further and push back more instead of constraining the scope using what was there.

In saying that, having worked as a freelancer in a part-time capacity for an agency prevents me from having control over the direction of the design and products shipped.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

shay.

Written by

shay.

designer-writer & maker of all things digital. my words have appeared on UX Collective, The Startup, Design+Sketch, P.S. I Love You & more. | myagender.info

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade