99 Problems and Research Ain't One

Not everyone has the luxury of having a dedicated UX research team, but that doesn't mean that you have to do research on your own. To kick off our design process, we make sure to involve various stakeholders to understand our users through personas and journey mappping. This discovery phase is used to frame the problem, capture assumptions about the project and its users, and the overall goal of the project so that business, product, and development teams are in alignment.

Early stage journey map identifying pain points and opportunities

We create UX documenation that will live on throughout the process, housing competivite analysis, inspiration, feature definition, and various design deliverables. Most importantly, this inital research is used to make sure we are actually solving a problem through investigating and validating our assumptions with our users. User interviews like the one below helped inform product roadmap and strategy, ensuring that we are building the right thing.

Don't just listen to what the users want, use empathy and understanding to build what they need

The ability to "test early and test often" is sometimes looked as a costly and cumbersome process. The truth is, tests can be completed in less than a day as long as there is a good understanding of testing methodologies and a readily available pool of users. My team has done a great job creating a cadence for testing, knowing which type of test is appropriate for each case and who the audience will be.

Lean UX to the Rescue

Our team has successfully integrated Lean UX into our development sprints to help define features early on in the process. Each feature is documented with a problem statement, benefit hypothesis, and high-level acceptance criteria. We use sitemaps to help visualize how features fit in our exiting information architecture.

Pink nodes represent pages and alternate views, blue nodes represent user actions

Potential dependencies across projects or teams are recorded and given an owner. Our initial drawings and concepts are used to flesh out and refine acceptance criteria which will eventually evolve into user stories. Finally, we use user flow diagrams to help product teams and developers understand how users will move through out products to reach the path to success.

User flow diagram for InvadeLA app

The Benefits of Working in Low Fidelity

It is rare for designers to get it 100% right on the first try, so we try our best to remain humble and seek critique (Principle #7) from other team members and collaborators. I encourage the team to hold multiple drawing and whiteboarding sessions, as it is much easier to iterate and gather feedback at this stage than further down in the process. UXers tend to get attached to their designs in the high-fidelity stages, so we try to iterate in low-fidelity as much as possible.

If your drawings don't have smudges, you're doing it wrong

When it comes to visual design, there is the potential for a lot of opinion based feedback so we try to use wireframes as another checkpoint for alignment. Depending on the audience, our wireframes can contain simple boxes with text labels to the final page layout with UI patterns. We'll start introducing UI components from our design system, especially for those patterns that have already been established.

Recreating the landing pages of Uber, Lyft, Slack and Nike using the same components

Having these wireframes ready helps kick off development efforts before completing the visual design. Developers can start estimating work, create the necessary back-end services, and even start some of the front-end development without the need of a final design. This is crucial to working in an Agile, especially if we are iterating based on test results of our wireframe prototypes.

Above is a demonstration I gave to our marketing and brand leadership to show them how quickly we can design landing pages using a Wireframe Pattern Library I created in Figma. Within 10 minutes I was able to recreate Nike's landing page using components from our design system. The componenents have been vetted for best practices and can be imported into any project through team libraries. We have similar team libraries for high fidelity UI kits, icons, images, and personas - all which help keep consistency and standardization across our designs.

Can You Make It Pop?

Once we've established a design direciton, it's time to apply the visual design language to our low-fidelity prototypes. Having a pattern library and style guide is great, but this is where a design system can really shine. Most components in wireframes can be mapped directly to existing UI components in high-fidelity. Visual designers apply typographical hierarchy, color, material patterns, and iconography. They help establish how the transitions and microinteractions fit together to formulate the overall visual appeal.

Color pallette and typographical hierarchy scale for my portfolio

It's important to keep high-fidelity UI patterns standardized and consistent (Principle #4), not just for productivity but to increase trust and familiarity with our user base. Using the atomic design methodology, we can create various digital products that share core functionality but differ in visual branding. Breaking down the anatomy of components and providing design specifications helps developers create re-usable code snippets that match with our UI kits. Below is a side-by-side comparison of my portfolio which uses the same re-usable design and code components, but two different themes.

Retro

Modern

Drag from left to right to see how components are re-used with two themes

Modern

Retro

Have you viewed my portfolio in the modern theme yet? Switch Themes

Be Proactive, There's Always Room for Improvement

After a release, it is almost a crime to not test features after they are pushed to production. This is when we finally have real data to test our hypotheses, and use that data to iterate again! It's also important for UXers to test proactively on their own as its common for pieces of design to get lost in the development process. Recently we introduced expert reviews, a method of identifying user pain points in the production environment which may have arisen due to bugs or technical limitations during implementation of the design.

Expert reviews tag moments in the user flow that are identified as pain points or bugs