Platform
Android & iOS
Project Type
Multiple Designers
My Role
UX Designer
Tools
Sketch and Figma
Timeline
Oct 2021 – Spring 2023 (Launch)
Spell Materializing
Some of the magic for this spell is still materializing in this dimension. For now, enjoy all the beautiful sketches and other visuals below. ✨
Intro
Details
The Problem
Details
Quote
Details
Exploration & Research
Details
Takeaways
Header
1
Details (up to 2 lines)
2
Details (up to 2 lines)
3
Details (up to 2 lines)
After this I started creating flows as a visual tool for communicating how I thought we could improve product sharing.
For unknown reasons, the previous experience was using a totally custom share experience that was very confusing. I didn’t know if I could communicate the value of native ones but i knew that if we could get buy-in to switch to native that it would be a game changer for the development and user experience.
I guess it worked cuz everyone really liked the share sheet! The devs were especially enthusiastic that they didn’t need to build something custom.
By leaning into native components like the share sheets and improving the architecture and UI we would be able to make a better user experience in 2 ways:
- Using a familiar pattern that people are familiar with when sharing on Android and iOS
- Helping delineate the behavior of sharing products and creating a product list that would be saved to use later
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 our vision.
LoFi Design
I started by trying to audit the current experience. I was pretty confident that there would need to be quite a few changes but wasn’t sure yet what they would be. Unfortunately there wasn’t much documentation from before, but I was able to explore pull some details together.
After the audit I confirmed a few things
1.
The previous designs were created with many old mobile design patterns
2.
The design process at our company wasn’t as strong when they were created and there wasn’t really a system for any of it
3.
Much of the UI, UX and interactions weren’t well crafted or considered holistically
After this I started creating flows as a visual tool for communicating how I thought we could improve product sharing.
For unknown reasons, the previous experience was using a totally custom share experience that was very confusing. I didn’t know if I could communicate the value of native ones but i knew that if we could get buy-in to switch to native that it would be a game changer for the development and user experience.
I guess it worked cuz everyone really liked the share sheet! The devs were especially enthusiastic that they didn’t need to build something custom.
By leaning into native components like the share sheets and improving the architecture and UI we would be able to make a better user experience in 2 ways:
- Using a familiar pattern that people are familiar with when sharing on Android and iOS
- Helping delineate the behavior of sharing products and creating a product list that would be saved to use later
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 our vision.
HiFi Design
After exploring in the LoFi realm for a while and aligning with the devs and stakeholders we moved on to high fidelity to keep refining. I had been pushing for us to switch to Figma since I started working at Usana and this was the first project after we made the switch (so I was stoked!). This allowed me to improve how I organized the files and what was delivered to the devs as well as start building prototypes, which is one of my favorite parts cuz it really brings things to life.
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.
Header
1
Details (up to 2 lines)
2
Details (up to 2 lines)
3
Details (up to 2 lines)
Also
- Gaining a deeper understanding of the entire user experience including all the interactions and states we needed to consider
- Communicating with others about how things worked and why
Details
Details
Handoff
Details
Details
Outro
Details
Spell Materializing
Some of the magic for this spell is still materializing in this dimension. For now, enjoy all the beautiful sketches and other visuals below. ✨
Intro
Do I want to split this up into Auto Order and have a separate one for sharing? What about the other mobile stuff?
Alignment, Flows, Req Gathering
I joined this project part way through as a new hire at Usana and some of the pieces had already been decided. I really liked having a project that was easy to jump into and start asking questions without needing to define everything from the beginning. Although I do enjoy the process of defining and creating all the pieces from nothing, it was helpful as a new hire to have something solid to land in while I was still learning about the business as a whole and other details.
Something that wasn’t quite decided yet was what the first phase of this new app would be. There was a large majority that were trying to make Usana’s subscription services the first phase, but some people wanted it to be our regular shopping experience instead. Because of this I took on the task with my managers help of figuring out what the alternate shopping experience could like like. Heres a link to that case study if you wanna dive in of the details. My manager and co-designer had already defined a pretty solid LoFi for the subscription option (at Usana we call it “Auto Order”, but it’s a subscription for Usana products. I also helped continue to refine the LoFi designs and helped with the move into higher fidelity, but let’s start with the LoFi.
Research
I used a research platform called Baymard which houses a massive collection of UX research around shopping/ecommerce experiences. I also dove into other shopping apps to gather some competitive analysis of what other people were doing in their shopping experiences. It helped too that I was new at the company and not burdened by past experiences and ideas as much. This helped me to be more open to questions and to be a little more bold sometimes in exploring ideas that others might not have wanted to. Here’s some of the ideas I was exploring.
> Probably split up the shopping project and Auto Order project, but maybe include links to each one as a reference.
Sketches and Lofi
Like I said, LoFi had pretty much already been decided, but in areas where I could help improve the user experience I made sure to speak up about and ask questions. I was nervous cuz I was totally the new guy and nobody really knew who I was or what I had to offer, but I pushed ahead trying to add as much value as I could. Here’s some of the LoFi work
More LoFi Stuff
HiFi
Most of this project though is gonna be focused on the last portion of the journey, the HiFi!
More Hifi Stuff
Handoff
handoff details
More Handoff Details
What I Learned
Stuff Learned
More stuff learned
#### Summary?
Content
Alright so I started working on a stupid mobile app and basically poured my soul into it, only to get shafted by the company I gave so much energy and resources to. Which ya know, that’s capitalism for ya, and we keep supporting it. Yikes
But moving on to the app.
When I joined Usana, work had already been started on trying to define some of the strategy and the wireframe and other low fidelity designs. I quickly dove in to the project cuz I really enjoy just diving in and learning as much as I can while I go. It was a wild ride, but also a ton of fun. I had a lot of ideas to try, but I quickly learned that many of them wouldn’t be possible due to our limited resources and fragmented brand.
Usana is a legacy company (just celebrated it’s 30th anniversary while I was working for them) and they have a lot of moving parts. Their digital presence is also fairly outdated, but it’s been growing quite a bit since I started and it’s been cool to watch the transformation.
There was still some disagreement about what part of our digital experience to deliver in a mobile app first. Some people wanted to focus on our subscription service called “Auto Order” and others wanted to focus on our shopping experience including checkout, a cart, etc. The subscription had more traction so the designers were already starting to move towards that experience, but I volunteered to do research and exploration into how we could support the shopping experience. We knew that either way we would be developing both pieces of the experience eventually and so all work done would be used and valuable.
#### Shopping Exploration
#### Subscription Designs
While I was researching the shopping experience and creating sketches I was also helping support the work for the designs being worked on for the subscription service. I like to keep my process really open and often hop back and forth between sketches, research, and more high fidelity designs because sometimes one option matches better the flow I need. So even though we were working on some designs that were already defined in a low fidelity state I was trying to keep exploring and pushing the ideas a little further. I always enjoy exploring lots of options and pushing things past what might already be accepted as “the way” and was trying to do that here.
I came up with some ideas that were accepted and others that people liked but that didn’t seem feasible to support because of different limiting factors within the company. One of these was that our brand wasn’t well defined in a lot of areas including illustration and I wanted to see if we could start building that out cuz I knew that it would really push our mobile experience to a different level if we had custom illustrations that aligned with the brand. Here’s some of the ideas we explored.
Pushing for illustrations didn’t go where I wanted it to, but it did start to open up the conversation a bit more and I could tell that there were multiple other people who wanted to use illustrations. We started to try and define what our illustrations could be and I started to learn more about the people at the company who were involved with the brand and also began to see how much work we needed to define the brand more solidly. It was a really helpful experience being new to the company and team and I’m really glad that even though the reason I started the conversation wasn’t accomplished, that I still learned a lot of valuable things that I may not have learned so quickly if I didn’t dive in and push for something that interested me.
That’s a guiding principle I have which is to lean in to the things that make me feel energized and excited cuz that’s how I can really get in the zone and make amazing stuff (and my speed of work increases too). So I was really proud of myself for digging in to the illustration stuff even though it was pretty unprecedented and new for Usana and people seemed kinda confused and unsure about exactly how to approach the conversations I wanted to have.
With all that exploration happening we were also moving on with solidifying the designs and coordinating with stakeholders, devs, and other partners to make sure what we were creating would match both the business needs and user needs as best as possible.
People were really excited about what we were building but thankfully the app wouldn’t come in to the spotlight for a while which helped us to really focus on narrowing down the experience as deeply as we could. This was helpful because while Usana has built 2 apps in the past, neither of them were created with UX design helping to guide the process. They were using buggy tools that made it difficult for the developers to keep supporting the code, and they were very excited that for these apps we were really honing in building experiences for both iOS and Android that used native components and elements. It was really important for use to have space to consider all of this newness and to build a better process then we had in the past. It also helped us have space to start building component libraries for mobile which was a new things for Usana too. Basically just about anything that needed to be updated in our process, needed to be, and it was a really exciting (and sometimes stressful) time to be part of something so big and impactful!
I had been using Figma for a couple years as my primary design tool and was really enjoying the robust features that it offered, but sadly when I joined Usana they were using Sketch. Which was okay, but ultimately lacked a lot of the same features that really made Figma feel magical and fun for me. I championed out Android component library in Sketch and learned the ins and outs and constraints that Sketch had pretty quick, but I definitely was hoping and suggesting a switch to Figma as often as I could.