Design Book | Product • UI/UX • Interaction • Strategy

I'm convinced that good design starts with a passion for making the world a better place.

Meta (Formerly Facebook)

Facebook, Instagram, WhatsApp. Surely you've used one of these apps so you kind of already know what goes on but, trust me it's a lot of work.

Ox For Zoom

Don't go into a meeting thinking you're just going to remember everything. Let AI help you!

Desert Financial Credit Union

Everyone uses a bank, right? So that means, user experience is important and compliance is key.

Website Design

Web Design has probably been the most consistent practice I have held since I first began my career. It's just something that as a designer, you truly never really get away from. Here are a few of some client websites I had the privilege of designing and building from scratch.


Mobile Design

Mobile design comes in many forms, you have mobile design in response to websites that are responsive and then you have mobile design for applications that are specifically for mobile devices. The interaction is similar yet also very different. I have a keen sense of systematizing my designs to comply with the many factors and complexities of mobile-first designs. Here are a few mobile design projects that I've worked on in conjunction with other designers and engineers.


Clients I've worked for...

Over 12 Years of Experience

Ox for Zoom

Ox, Inc. | Zoom App, native

Does AI help or is it a distraction?

Video meetings are pretty much the standard now with remote work being a very necessary and accepted way of doing business. And meeting fatigue is also a real thing so it can be hard to remember everything and think of the best way to respond to customer's questions. Insert Ox for Zoom. An AI companion that listens to your meetings and makes suggestions based on some basic information that you provide. But we did have to ask ourselves, "How might we utilize AI in a way as to not cause a distraction during meetings?"

I would often run virtual design workshops with my team in order to define any problems that our users are having during their calls in hopes that our solutions involving AI are relevant to what is actually needed.

Those workshops would result in feature building and through a series of discussion we were able to pull out simple wireframes with enough information to build out a minimal prototype of screens that would help convey what it is we were building.

Activities | Design thinking • User research • Competitive analysis • Focus group • KPI development • Persona development • Trend Analysis • Market research

A high-fidelity result!

With our analysis finished and our basic concept agreed upon I was able to visualize what this product could actually look like so that we'd have something to show our potential users. The thought was to create visuals that weren't very intrusive but gave enough help that a customer service agent could quickly see what was going on and use this tool during their calls without too much distraction.

During the meeting a user was able to use the AI bot to detect specific words or phrases based on the actual scenario of which their call was about. And then throughout the meeting the suggested responses would help give the user a way to quickly and efficiently respond to their client without having to think of a response or shuffle through notes. In the backend the meetings were recorded and the transcripts were saved and could be accessed at any time which you will see next.

Activities | Content creation • Content strategy • Wireframing • Design Sprints • Focus Groups • Rapid Prototyping • Iterative design

Quick alternative

This result was too complex to introduce to our customers. The learning curve and data gathering we found was more confusing than helpful. Although we did still build this into the admin section but the plan was to turn off what we wouldn't need until the appropriate time.

How do we evaluate this data recorded from each meeting?

With all these recordings, what can you actually do with them? Well that was day 2 of our workshop, we asked ourselves what data would be relevant to dissect on a larger scale that would help educate the user about the call they just had? We looked at and designed a system that stored each meeting, that you could go back and rewatch, see the AI analyzed score based on different predetermined data points, view the transcripts, and even dig in deeper by cutting up each meeting into smaller moments. This was definitely a phased approach.

This is only a portion of all the work and iterations that went into building this out completely but I want to point out all of the different areas of action we could pull from each meeting and how intricate a user could dissect just one meeting to gain valuable information not only for their job now but to then train others, reference for later or share with their team. This phase of the concept is built but with limited functionality thus far as introducing everything in the beginning would have been far too overwhelming for a user and therefore not adopted. This also gave us a way to hear from the user what is working for them and what they'd like to see.

Activities | Content creation • Design strategy • Visual design • Web application design • Rapid Prototyping • Feature release planning

Content Liquidity, Story Creation

Instagram | mobile app, native

Where did I just post this? Is it clear?

SITUATION
There was a New York Times article that was released about someone who was posting stories to their Instagram account and without their knowledge was at the same time posting these same stories to their connected Facebook account. This user complained about how it wasn't clear that the two accounts were even connected or how to turn that off. So as I was hired on to the growth team that would be tackling this problem, we had to act fast. Below you'll see our most immediate, subtle yet critical change as a result. Not everything is shown in this website but you can at least get an idea for how we came to the conclusion.

TASK
I was tasked to improve the visibility of the way a user is able to quickly change where they are cross-posting their stories on both Instagram and Facebook platforms. Upon discovery, the reels team had also been looking at this from the perspective of creating a quick link of the sorts to the account center that didn't take them out of the creation process. So I tapped into that team and cross-collaborated.

ACTION
Now to Instagram's credit. There was a way to turn this off but let's just say, it wasn't as straightforward as it could have been. The approach to this, especially working in a Growth team as a product designer is to iterate quickly, test, iterate, test, and so-on, and that's exactly what I did. Through a quick series of daily standups with engineering and content and then by involving the right reviewers immediately, we were able to test the solution shown below.

Activities | Content strategy • User testing • App research • Pattern discovery

RESULT
After many iterations and close work with a content designer and engineer on the team, and with buy-in from the overall cross-functional team the addition of allowing access to the account center within the creation flow provided a way for the user to make a decision on the fly without disrupting the actual creation of their story. Meaning, that as we evaluated and worked through some of the research we realized that even though we may have mentioned settings we didn't provide a way to it. Which is what we solved for.

Activities | Interaction design • Design review • Rapid prototyping • Pattern discovery • Engineering

Spin-offs

Once we were able to solve for the direct problem, there were still indirect effects and edge cases that began mounting up because of the broader experience of the app as a whole. More questions came about about other ways we need to provide clarity and transparency. I've captured a few of those design solutions below.

Here you'll see a series of small iterative design solutions centered around content liquidity that focuses on transparency around the destination of ones shared content. The idea was to test different mediums in which a user could be faced with wondering if they are sharing to their intended audience and cross-posted account, as well as how to change it, and turn certain upsells off, etc.

Activities | Interaction design • Design review • Rapid prototyping • Pattern discovery • Iterative design execution


Shipping, Visual Cues

Facebook Marketplace | Mobile app, native

Can we make it pop?

SITUATION
So those aren't really the words designers like to hear but in this case, it kind of rang true. We wanted to be more bold, which was one of our core values and it felt as though we weren't challenging ourselves in our visual design because of our extensive design system that is the go-to for all the visual cues throughout the app. But what if we combined our bold vision with another core value and that was to focus on impact.

In the effort of boldness I designed and iterated on a concept that cut the touchpoints in half by removing the drop-downs and bottom sheet drawers by way of replacing them with selective tab buttons that can easily be turned off/on and feels more app-like rather than operating like a mobile website. The challenge was not so much user-centric as it was working internally across teams and with the design systems team as a whole. Because these patterns were net new, there were a series of reviews we had to go through in order to test these tabbed buttons. The end result was positive but in the effort to make this change and introduce this new concept came at a high engineering cost and design systems cost that was not currently pushed as a priority into the backlog. It did achieve an eventual evaluation of how we can create better controls and visual cues to help a user ship their item faster.

Activities | User research • Cross-functional collaboration • Storyboarding • Design systems • Visual design • UI design

Does it help?

INTERACTIONS
It looks nice but is this something that will truly decrease amount of time a user is spending on the shipping set up? Well, I created an interactive prototype to prove how easy it was to tap a button on and off which gave the user much freedom when determining if this was truly a time-saver.

The above prototype helped mimic the user interactions that would take place during the "add shipping" process. To reduce time, the tabbed buttons made the most sense as long as there was accompanying context for each. The challenge was how much this would disrupt the design system. There were no other areas in the app where large tabular buttons were used. So this brought on a whole new set of patterns that had to go through a rigorous approval process. Even with my product manager and director on board, the design and tech investment in building these into the system where they may not ever be used anywhere else eventually became the deciding factor to not immediately build this feature. The good thing is that it started a discussion that led to more exploratory projects about how we can push the envelop with some of our systematized design structure.

Activities | Prototyping • Storytelling • Presentation design • Iterative design • Interaction design