App Design: Tips to Design a Beautiful CommCare App

Is your app’s design hurting user engagement?

Building apps that end users love is one of the core tenets of our design philosophy, “Design Under the Mango Tree.” Based on our experience supporting more than 500 projects, we found that app design is often directly tied to user engagement. By putting in extra time in the design phase, a CommCare app becomes more than just a job aid for end users: it becomes an invaluable resource that is both useful — and enjoyable — to use.

If you are looking to boost your app’s user engagement, consider a design refresh. Creating a beautiful app interface that delivers engaging content to your end users is easier than ever in CommCare today. Upgrade from black-and-white survey questions with the five tips below for beautifying your app.

1. Add icons to help users understand the workflow.

Using CommCare to submit forms and track data should be intuitive for the end user. Images and icons can be a great visual way to direct users from point A to B to C. Don’t have a designer? No problem. One place you can find images is on the Noun Project, a website with a monthly subscription for unlimited access to over 1 million icons, royalty free.

Where should you add these icons? A good place to start is to add icons to your menus. Icons create visual cues to help group workflows together. For example, you could group by color, making all supervision icons green and lab tests icons blue.

Icons are also useful inside forms. Imagine the possibilities. Try using the icon with a required question. If the response is incorrect, use display logic to show a warning icon, and signal to review the data entered and its impact on the next step in the workflow. Images can act as a cue to action inside a form, for example, as a way to remind users to communicate a counseling topic to a beneficiary.

Tip: remember, symbols need to be relevant for a local context. For instance, a modern western hospital bears little resemblance to a rural clinic.

2. Use images as buttons to make content more engaging.

In order to collect data in CommCare, questions within forms need to be submitted. A key skill that CommCare users must learn is how to navigate across screens. Users of all technical backgrounds need to master how to swipe, tap, scroll and submit. Keep in mind, some users might be colorblind, others might not read at all, and visual clues can serve as helpful signs.

Here are some tips:

• To improve forward navigation, use images to create colorful buttons. As mentioned above, though, don’t make this your only visual cue as some users might be colorblind.
• To make it easier to answer questions, replace “yes” and “no” choices with symbols.
• To ensure the user submits their form, add an extra screen at the end to indicate the end of the form with a positive image, and if possible, a clear next step.

3. Optimize your media for the appropriate device.

To improve readability on CommCare, design around the device you plan to use. To optimize visual content, you will need to know the screen density. Newer devices have more pixels, meaning smaller pictures will look stretched on these bigger screens.

To measure your device’s screen size and to ensure your media will look correct after uploading it to your app, install the CommCare Toolkit or look at your device specs. The Toolkit allows you to see the scale of an image size on the phone. If you build the content with one screen density, you can set it as an app setting and CommCare can automatically scale images between devices.

The most common multimedia in CommCare is icons. Try to design transparent icons with your device and screen density in mind. Before you release the app, look over your multimedia and validate that the images have the correct file type and are mostly the same size. Go to the Multimedia Reference Checker, and you can see the pixel size of your images and the size of audio and video files.

4. Format text for easier reading.

Once you know how big your images should be, you can start to lay out how the screen should look.

Question lists allow you to connect a series of labels or questions in order to combine different types of information on one screen. This feature is a great way to put your own spin on a CommCare screen and make important information pop!

Tip: create a template question list that you have formatted to your form. Use the copy and paste function to carry forward your enhanced experience throughout.

To get the idea, imagine four labels combined on one page: an audio clip, a heading with a color image, a label with formatted text, and a required single select question with a big navigation button. Always test these on the device to make sure the button is wide enough to be activated even if the touch is a bit off. Too much text can be overwhelming, so strike a balance and limit the number of screens that require scrolling.

5. Know your audience, and observe your app being used.

Before too long, test your app with users. One key is to not assume your users are tech experts. Treat app building likes it’s their first time ever using this technology.

At the start of user testing, start with a short list of basic actions in CommCare. Before you step in to show them how, observe their behavior. Where do they look? When do they make mistakes? Identify these usability challenges upfront, to heed off potential issues.

If the app is used across different job roles, gather input from all the key stakeholders. The best practice is to have at least five user tests per set of actions. Sure, there are many clever tricks to make your app more engaging, but first and foremost: invest the time to get to know your audience and what works really for them.

In Summary

How you experience an app is often directly correlated to usage and users’ engagement. Creating beautiful content can take an app from a job aid to a truly enjoyable experience.

Design decisions are critical to improving device navigation and the user experience! When you are building your app, remember to take time to listen and work with future users. Be open to their feedback and criticism. After all, the end goal is to have a CommCare app that people love to use.

Let us know if you have tips too! Happy app building!