We unexpectedly needed to design and develop a new product sharing experience and only had about 6 months

On one hand, we were very happy because the app was both difficult to maintain and not a good look for the brand. On the other hand, we were hoping to focus on other feature sets in the app, like shopping. Regardless, we pushed those dreams aside to make way for this imminent change!

With these all these ideas and info in mind I started creating flows. I like using visual assets to share what’s in my head and help other people share what’s in theirs. In this way we work towards alignment on the direction of the project. I do this at every step of the design process, but during these early stages I feel it’s much more critical in establishing a strong foundation for the project.

While going through the flows I tried to focus on 3 key areas that I thought would be most impactful for both the user experience and developer experience.

The discussions were a big success and we all felt like we had a strong cohesive vision for the project and improvements we wanted to make. I’ll share more about how we handled these 3 focus areas later in the article.

While sketching I ensured we were thinking holistically about the app experience and not just the current product sharing feature set. One example of this can be seen in the image below where I explored how we might support both shopping and sharing, which are both very important product related actions. I asked questions like:

• Could they exist in the same space?
• How could we structure sub-navigation elements like product categories to support both product sharing, shopping, and the already developed product subscription features?
• What could we do now to prepare both the user experience and technical foundations to be strong and long lasting?

Thinking broadly about the app and talking openly with developers and stakeholders allowed us to reduce technical and UX debt and create a reliable experience that people could enjoy now and not need to relearn when new features launch.

I was also able to finally build a really solid component kit using my favorite Figma features like Auto Layout, and start building prototypes! 🤩

The Magic of Prototypes

Here’s a few pieces of the prototype I created for product sharing broken up into different feature sets.

For some reason interactive design prototypes aren’t something people used much at Usana and it confused me a lot. Here’s the main reasons I prioritize creating prototypes as much as possible.

Whatever the reasoning is for a lack of prototypes at Usana, it was really fun to blaze new trails and showcase how awesome design can be! ✨ The devs and other stakeholders really enjoyed using the prototype during this project and I hope it catches on more in the future at Usana.

But like I shared previously, Usana had been using a totally custom interface for sharing products instead of using the native one. No one at Usana seemed to know why, but here’s what that custom interface looked like. It didn’t offer apps or contacts suggestions like the native share sheets do and was a much more clunky user experience.

Since I was able to communicate the value of the native ones, it was full steam ahead and it was a huge win for not only the user experience, but also the devs experience. They would no longer need to worry about supporting clunky and outdated code and they were pretty excited!

That made me happy because part of the design process for me is including devs and stakeholder needs with user needs.

Like most projects there were a few unexpected design changes during development, but nothing we couldn’t handle. 💪

The devs were able to update their code to use modern languages, libraries, and components that are much more stable for them to maintain into the future. It’s launched in all 23 markets and many users have been enjoying the feature set and complimenting how much of a game changer it is for them. We’re very happy about the impact it’s having!