Blog

Design it Right the First Time with the Right UX Partner

Understanding your UX partner’s design process can maximize excitement and minimize heartburn on the way to launch. Here’s ours.

Design it Right the First Time with the Right UX Partner

The average tech founder can boast many talents, but user-experience design is typically not one of them. Even the most design-aware entrepreneur, one with a clear vision for their end-stage digital product, often struggles over the practical steps necessary to get there. Within the product-development journey, UX is the first taste of your digital product that you, your team and potentially millions of users will have, so getting it right is a high-stakes, potentially nerve-wracking endeavor.

You can put away the Tums, because working with a qualified UX design team is a reliable way to turn anxiety into excitement and vision into reality.

Given the number of well-branded, well-established design firms in the marketplace, choosing the right one can be paralyzing. Depending on your tech team, basic and internal systems may be handled in-house, but more complex products or features for the business or consumer market are best handled by specialists–ones who have delivered over and over and over again. You can narrow your options by knowing your own needs and, perhaps most importantly, knowing your potential partner’s design process.

“Loka’s design team has helped launch products for healthcare disruptors, unicorn startups and Fortune 500 companies over the last 18 years, and in that time we’ve developed a design process that’s immensely successful–and repeatable.”

The design process is exactly what it sounds like: a systematized way of bringing a digital product from planning stage to screen. It creates the look, feel and flow–the visible, interactive side, rather than the machinery running unseen in the background. As you might guess, it’s not an easy formula, but Loka’s design team has helped launch products for healthcare disruptors, unicorn startups and Fortune 500 companies over the last 18 years, and in that time we’ve developed a design process that’s immensely successful–and repeatable.

When it comes to product development, we know what works and what doesn’t and we don’t waste time on the latter. Designers can whip up the framework for the wildest idea, but hand an impossible construct to a DevOps lead and they will throw it back in your face. Loka, however, only builds stuff that works. Collaborating with our internal engineering and development teams leads to a holistic, end-view perspective on product development, so everything we design can become a real product that users can fall in love with.

Below is a step-by-step breakdown of Loka’s design process, annotated by our unflappable Head of Design, Pedro Gil. As you can probably tell by our impulse to share, it’s within this design process where we find much of the thrill of our work: creating a beautiful and functional something from nothing! We offer this information humbly, in the spirit of transparency, edification and, most importantly, collaboration.

“Designers can whip up the framework for the wildest idea, but hand an impossible construct to a DevOps lead and they will throw it back in your face.”

Setting the Stage: How We Work

Loka’s design team typically operates in two-week sprints. Sprints peg specific tasks to a pre-approved timeline and allow the team to ship quality work faster and more frequently, with more frequent feedback from the client. We build in flexibility to adjust timeframes as necessary, with client approval.

Two-week sprints are the industry standard, and we add weekly check-in calls with the client for further syncing and peace of mind. All our teams operate in this manner, so these two-week sprints become the connective tissue between Loka and the client as the client moves through all stages of product development. We find that clients appreciate this consistency.

Pedro says: Our design process at Loka is more collaborative than the average partner’s. We’ve learned that syncing with the client on a weekly basis is more effective than the standard bi-weekly format. And we’re not just presenting to the client, we’re working together, asking and answering questions to understand product requirements, while the client makes the decisions.

I see this relationship like a game. There are two squads, but it’s not a competition–they’re working together to achieve a common goal. Like that racket game you play on the beach, where two people try to keep the ball in the air as along as possible. You're working together.

With that explained, let’s dig in!

design

Part 1: Discovery

1.1 Project Introduction and Setup From the outset we work closely with the client to analyze the market for their product, establish potential use cases and designate team members. Starting now, every decision in the design process is meticulously documented.

1.2 Research and Concept We further research into the desired user base, charting possible problems and enumerating features. Moodboards provide a visual, big-picture sense of the overall look and feel of the product for the client. Usually we do two or three of these, e.g. Look and Feel, Tables and Inputs and Charts.

The original moodboard for RealTicket – an NFT-based ticket platform developed in LokaLabs, our internal incubator.

Part of our documentation includes what’s called a "Product Description," which is created by the Project Management team and combines product requirements with technicalities from the industry/vertical and unique selling proposition. The Product Description is critical for every team member to read and digest.

Additionally, if the client has already conducted research, we synthesize that information, and if not we go as deep as needed to understand the product and industry. That means we can do user and stakeholder interviews, analyze data and competition and build a persona of the target audience.

We put everything on the table at the outset so our team and the client are always organized and on the same page. This entails a lot of willing communication, which sets the tone for the entire design process. We tend to ask A LOT of questions, but we do so within an intentional and structured context, allowing room to explore but always keeping an eye on results.

“We tend to ask A LOT of questions, but we do so within an intentional and structured context, allowing room to explore but always keeping an eye on results.”

The goal here is for us and the client to agree on project scope, requirements, roles within the team, decision-makers, specialists and so on. Also we want to be aware of any previous information or research so we don't work under assumptions or reiterate work that’s already been done.

Pedro says: When I work with a client and I can feel their excitement, their joy at seeing their dream come to life–for me that is a very cool feeling. If it’s not fun for us both, that means we aren’t doing it right.

Part 2: Define UX

2.1 Architecture and User Flows Based on our research and discovery, we draw up user-flow diagrams for each feature and the ways in which they connect with each other. This is the nature of website navigation: A doctor moves through a health app differently than a teen moves through Twitter. Defining this flow is key to understanding tech requirements, how the user moves step-by-step until reaching their goal.

RealTicket
The MVP user flow for RealTicket’s scanning ticket system.

2.2 Wireframes and Prototypes We develop each screen in low-fidelity, defining the structure without details like colors, images or other types of visuals. The wireframe conveys the 30,000-foot view of the idea of the product, while the prototype behaves similarly to the final product.

Pedro says: Our working style–and all of Loka’s–is to be in consistent conversation with the client, not only to determine their preferences and needs, but to also steer them toward making the right choices. They’re the experts in their product’s purpose; we’re the experts in UX design and functionality.

Part 3: Define UI

3.1. Design Patterns We want to ensure consistency across the entire product, screen by screen and function by function. This is a rubric of sorts, or a key to the language, look and functionality of the project.

3.2. Visual Style We develop custom and consistent icons/illustrations, apply various forms of typography and implement visual storytelling, all tailored to the product’s specific parameters. In this phase we also define typography and colorways, which we package in a style guide.

visual style
The visual style for the mobile app used by event-goers.
visual style
The visual style for the RealTicket landing page.

Pedro says: During this stage we create the foundation of the design system, which groups all the components used in any given project–typography, colors, buttons, widgets and other interface elements–into a consistent pattern that can be reused in later iterations.

And to add important perspective: There’s a misconception that designers are artists. I think we’re more creators or craftspeople. For me, form follows function. I prefer clean, minimal aesthetics that first and foremost perform efficiently, then also look good doing so. It’s not a matter of taste but a right way to do things based on testing, design theory and professional experience.

Part 4: Scale Up

4.1 Atomic Design During the scaling stage we apply the principle of atomic design, a workflow methodology that breaks down a digital product into smaller parts, such as components, variants and tokens, so they can be easily reused and reapplied.

4.2 Design System From here the next team joins the effort (Development or QA), unless the client request is for design only before seeking funding, in which case this is the end of our work. Handoff includes passing along the design work and design system we compiled during Phase 3 as well as all documentation to ensure that whoever engages with the project next has all the information they need to carry on as if they were part of the journey from Day 1.

Packaged design system for the RealTicket app.

Learn → Design → Build → Test → Repeat

All the best products continue iterating over time, subject to new technologies and user testing. This process is no different. Loka’s design team stays tethered to the client at every stage of the design process, even after launch, making sure the client can run the project entirely independently if that’s their goal.

In fact even our own internal processes are in constant state of refinement. The above approach wasn’t arrived at all at once but over thousands of hours spent mind-melding with clients, zoning in solo at home and Slacking eagerly with colleagues. Check back in a few months and we’ll likely have some improvements for you. The impulse to innovate never sleeps.

Pedro says: There's a saying that goes, "Do it like you will want to sell it.” It means you don't just make it look good, you make sure everything is spot-on so the next person who accesses these files will feel empowered and confident to pick it up from there. That’s our guiding principle throughout the entire design process.

Loka's syndication policy

Free and Easy

Put simply, we encourage free syndication. If you’re interested in sharing, posting or Tweeting our full articles, or even just a snippet, just reach out to medium@loka.com. We also ask that you attribute Loka, Inc. as the original source. And if you post on the web, please link back to the original content on Loka.com. Pretty straight forward stuff. And a good deal, right? Free content for a link back.

If you want to collaborate on something or have another idea for content, just email me. We’d love to join forces!

“Loka’s flexibility and breadth of capabilities are incredibly valuable to any firm, especially a fast-growing startup like Sentropy.”

Dev Bala
Sentropy CPO

“We’re fortunate to recruit talent from the likes of Apple and Facebook. Loka’s engineers fit right into that mode of high performance. Loka is indispensable for us at Sentropy.”

John Redgrave - Sentropy Co-founder & CEO
John Redgrave
Sentropy Co-founder & CEO