Basically we had an old app that was going to be unexpectedly deprecated because of some technical limitations. But the features that were used often still needed to be replaced and/or improved. We were planning to add these features into our new mobile app eventually, but this pushed us to create solutions much sooner and more quickly than we had anticipated.

But it was honestly pretty fun!

The core feature set we needed to add was product sharing, and while there were a few other smaller features that would need to be moved from the deprecated app, those could come later. So we set off to define the new product sharing experience.

1. The previous designs were created with old mobile design patterns
2. They were created a few years ago when the design process at our company wasn’t as strong and mobile design had never really been considered
3. Because of this, understandably, some of the usability and interactions weren’t as well crafted as they could be

I first tried to understand the current system by asking for details about how the previous experience was designed and what the constraints, user data, and other pieces were that informed the decisions. Unfortunately there wasn’t much documentation about how the decisions were made, but we did what we could with what we had. At minimum I was able to explore the current production app so that I could audit the experience and analyze it.

Once I understood those things I started sketching out ideas for potential improvement options with the information architecture, UI and user experience. I wanted to use these sketches to explore with stakeholders about why it might be valuable to make certain changes. I like to use visual assets in ways that move conversations and help people align around a vision and this was a great time to do that.

I started with flows to walk everyone through how I was thinking we could approach the information architecture differently and what we could keep the same.

One area that I wasn’t sure would be received well was suggesting that we use the native Android and iOS share sheets. For unknown reasons, the previous experience was using a totally custom share experience that was confusing for many different reasons. It didn’t surface relevant apps and contacts like the native experience provided and was unclear about what exactly was happening when you shared a product. By leaning into native share sheets and improving our backend structures as well as the front end UI we were able to improve the UX in 2 ways:

1. Using a familiar pattern that people are familiar with when sharing on Android and iOS
2. Helping delineate the behavior of sharing products and creating a product list that would be saved to use later

It was fun to talk about and explore and people quickly realized the value behind the change which was really helpful. The devs especially were excited that we were going to lean into modern Android and iOS standards, and I couldn’t agree more with their excitement!

After the information architecture was aligned between all of us, I started sharing LoFi wireframe sketches with the same groups of people. These wireframe sketches helped us continue to refine the experience together and align project partners on the experience we would create for users.

An interesting part of this project was that we also had recently switched over to Figma (which I had been pushing for since I started and I was stoked!!). Because of the recent switch I was simultaneously redesigning the organization for each file, and trying to advocate for more modern design patterns like prototypes as well as trying to build the HiFi designs for the sharing experience. It was fun to do them all at the same time because the HiFi designs helped inform the structure and organization I ended up using. I worked with the devs to create structure that would work for all of us in this new tool. Here’s what the final delivered file ended up looking like:

This project is also the first one where we built a fully functioning prototype (perhaps ever at Usana, but definitely since I joined) to accompany the design deliverable and help communicate interactions and animations. It was really fun to explore since I had missed using Figma’s prototyping features! But it was also really valuable to the devs and other stakeholders to see not just the way things could look but how they connected and the interactions that made things happen. It really brought things to life.

Also creating the prototype during the HiFi process helped me in 2 key ways:

1. Gaining a deeper understanding of the entire user experience including all the interactions and states we needed to consider
2. Communicating with others about how things worked and why

I’m excited to keep exploring and refining this way of building things and I know the developers have also been enjoying it. It’s different than what I’ve seen any other designers on our team do so far and I enjoy blazing new trails.

As we continued to explore both the HiFi designs and prototype together we were able to solidify the experience through additional review meetings and conversations. We were on track to meet our deadlines with the app deprecation, but there wasn’t too much extra space to spare. Here’s a closer look at a couple pieces of the HiFi designs.