Mobile App Design Web Design

Legacy Suite

Precoa’s purpose is to enrich life through meaningful connection by creating impactful consumer experiences. That being said, we wanted to explore new and innovative ways to enhance those experiences while also differentiating ourselves from our competitors. Legacy Suite is one of the ideas we came up with to address that purpose.

My Role: I worked with another interface designer to create the initial scope and experience of the iPad version and then took over the project’s creative by reformatting the content and experience on iPhone. I also designed a logo for the app, a web version for consumers, an admin site, and built a product landing page.

What is Legacy Suite?

Legacy Suite is a set of tools designed for seniors to record videos of their memories, thoughts, and advice for their loved ones. These recordings are saved securely online in a personal album for each client until the time of their passing. At that time, the client’s family is presented with a copy of these recordings (as a digital copy or DVD) for loving remembrance, providing comfort, and much-needed healing.

Legacy Suite included an iOS app with unique experiences for both iPad and iPhone, a web version where users could watch and manage their videos, an admin-facing site where administrators could manage accounts, and a marketing page designed to attract new app downloads and give a brief overview of how the app worked.

Legacy Suite iPad

Legacy Suite iPad

Sprint to the finish

As much as I would love to tell you that we spent months researching our users and developing personas (yes, I’ve done that before), we hit the ground running with a few brainstorming sessions, some sketching, wireframes, and then on to digital mockups. Because we were working in a sprint mentality, we wanted to get up and running quickly so we could test the experience with real people.

Mobile App Interaction

Mobile App Interaction

Working with developers in other time zones

Strangely, the most difficult and satisfying part of the whole experience was working with a contract iOS developer in Singapore and a web developer in another part of the United States. I worked in conjunction with a project manager and a software developer at Precoa to communicate our intentions with the remote developers via Slack and Bitbucket.

As you’ll see in some of my screenshots, sometimes the best way to explain something would be to print it out, mark it up, take a photo, and send it back for discussion. I can even recall typing up a list of HEX values and locations to find web fonts for one of the developers since he couldn’t pull the values from the software he used.

Mobile App Interaction

Legacy Suite Icon Artboards

When testing → expect revisions

Our contract iOS developer would ship out routine beta releases of the app using Test Flight. We would then update the iPads and hold community events in hotel conference rooms, funeral homes, and even in pizza joints across the country to test the app. Our people in the field would then report back on their findings and we would plan and build out new iterations to better improve the experience. We would test out the iterations again and repeat the process. Welcome to the wonderful world of design sprints.


You’ll see below that we even thought about the thumb zone when reformatting the app’s content for the iPhone.

Legacy Suite Finger UI/UX

Legacy Suite Finger UI/UX

What else did I do?

With my unique skill set, I also had the opportunity to design a logo for the app, a web version for consumers, an admin site, and build a product landing page.

Legacy Suite Icon Artboards

Legacy Suite App Icon

Legacy Suite App Icon

Where did we miss the mark?

Now that the dust has settled, I have a few thoughts on what we could have done better:

More cohesive branding — If you look at screens from both the app and the website, you’ll notice that there are different UI elements and different amounts of color. Example: the app uses a light orange boldly in most of the screens. On the website, we barely use any orange. The same can be said about some of the UI elements such as buttons.

Real design can get messy — Any designer can attest to this, but when you’re working with multiple people trying to get work out the door, it can be easy to miss little things that turn into big things. Example: we weren’t as strict early on with enforcing the visual spacing of certain UI elements and when it finally came time to request cleaning up the interface’s details, we didn’t have the resources to make it happen.

Convoluted tasks between app, web / admin: The app edited, saved, and played videos in a totally different manner than the website did. We could have made tasks more similar for the user, creating a more cohesive experience.