UXpin's Blog, page 71

8 Inspiring Examples of UX Design Portfolios That You Just Must See

Creating a portfolio is a crucial first step for any UX designer. It’s where you showcase your best work and let your skills, as well as your personality, shine through. 

Recruiters and potential clients will all want to see your portfolio website before hiring you. This is true whether you’re new to the field, or a senior looking for your next step.

The work you present in your portfolio will ultimately determine how employers and clients view you, and whether they’ll consider you for the job. But when it comes to UX design, it’s not just about what you present, but how. Your website is, in fact, a part of your work.

These 8 inspiring UX design portfolios are perfect examples of what any UX designer should aim for.

1. Alex Lakas

Alex Lakas is a UX designer with over a decade of experience working on products everyone uses. He took part in rejuvenating LinkedIn’s feed and gave Google Maps search pages the modern look they have today.

Lakas makes his caliber clear the moment you arrive, with a one-line bio that presents his experience.

A short scroll-down and you’ll find a short but precise list of clients, most of whom are major household names. This isn’t just name-dropping, it’s an important part of any experienced designer’s portfolio. Piquing your visitors’ interest right away with something familiar is the best way to motivate them to check out your work. 

While boasting impressive credentials, the website doesn’t rely on that alone. After a few short lines, you’re met with the most important part of any UX portfolio – case studies. Lakas’ case studies present the thought process behind some of his most well-known work, in a clear-cut, easily digestible fashion.

Complete with a slick design that mirrors his UX work, Alex Lakas’ portfolio website is a great example of what any designer should strive for.

2. Olivia Truong

Olivia Truong is a product designer. She makes that clear the moment you enter her portfolio, in a simplistic fashion that runs through her website, as well as her work. 

Truong’s UX portfolio doesn’t offer quotes or credentials. It simply displays four of her projects, in a beautifully designed, minimalistic presentation. The way she presents them, by raising questions such as “how do I manage my events onsite?”, is exactly the thought process a UX designer should have. She asks a question, referring to a common problem, and offers a solution in her case study. In this case, she presents Ticket Manager, an app developed to manage event ticket sales.

The case study is a perfect example of how UX case studies should be. She walks us through the problem she set out to solve, presents her research, and details her design process with a lot of imagery.

Olivia Truong’s portfolio pinpoints what a UX designer should present. It’s a great inspiration for designers just starting out, as it does nothing but highlight her process. If you have even one complete project, this is how to present it.

3. Ed Chao

Ed Chao is most well-known for his work with Dropbox. He’s designed their web interface, followed by their mobile app, and finally their desktop app UI.

What works best about Chao’s portfolio is the minimalizm. There are very few images and even less text. The few case studies he offers are short and don’t go into too much detail. However, what they do present is the key features and ideas behind his Dropbox UX design. This shows that Chao understands what’s important, and what can be cut out, a great trait for a UX designer.

One small, but important aspect that Ed Chao nails is the contact information. The first thing you’ll see when you arrive at his portfolio is links to his email, LinkedIn and Twitter. This is arguably one of the most important functions of a portfolio website, ensuring potential customers and recruiters can get in touch as easily as possible.

4. Jung Hoe

Jung Hoe is a UX/UI designer at Wix.com’s Playground. His portfolio website catches your attention immediately with a greeting that rapidly switches languages. 

But what keeps visitors interested is the humor. With a backdrop of beautifully animated yellow blobs bouncing around, he presents himself as a “genius baby” transformed into a “fully grown design nerd”. The personality in these lines creates an immediate connection and willingness to discover more.

Scrolling down, it’s clear that this portfolio belongs to a talented and playful UX designer. As a visitor, you can flip a switch between UI/UX work and “Fun Work”. Both of which present a wide range of apps and products he’s designed. Clicking on any project will lead to a detailed case study that includes his research, thought process, and final, as well as scrapped designs. 

Whether you choose to browse UX projects, or simply look at Hoe’s “Fun Work”, you’ll eventually reach an eye-catching call-to-action to “Make somethin’ fun together!” with a playful “Hit Me Up!” button leading to his email.

Jung Hoe’s portfolio is an example of how designers can showcase their personalities, as much as their work. But still, maintain a perfectly professional UX portfolio website.

5. Jamie Choi

Jamie Choi’s website is another example of a great UX portfolio that does exactly what it sets out to achieve, and nothing more.

The simple illustration of Jamie herself, the autumn color palette, and the simplicity in which her projects are presented make scrolling down her website a soothing experience. 

The case studies she offers, such as her work designing an online platform for a local bakery, are perfectly precise and detailed. She walks the reader through the challenge, research, analysis, work process, and ultimately design ideas. These case studies go into extreme detail, which is what any recruiter or client would want to see.

What completes Choi’s portfolio website is her about page. Like her case studies, this section includes all the detail it needs to keep you interested, while never being too overbearing.

Jamie Choi’s UX portfolio perfectly balances two of the most important things a portfolio website needs. It provides an in-depth look into her professional work process, while simultaneously creating a feeling of personal familiarity.

 6. Liz Wells

Liz Wells is a Brooklyn-based designer and senior product designer at Squarespace. Her UX portfolio site is stunningly trippy.

The homepage displays five case studies, with nothing but unique typography. You’re only met with an image when you hover over a project, an image which is then smeared across the page as you move your cursor.

What makes Wells’ portfolio truly impressive is her case studies. Her “Sidewalk Toronto” case study, for example, is summed up into a short video. If you wish to know more, you can scroll down to find a hand-drawn sketch of the site map, followed by a project description, as well as the UX challenges and solutions. The case study is accompanied by visuals that give life to her process.

Liz Wells’ UX portfolio leaves nothing to be desired, while perfectly presenting her personality as a designer.

7. Jeremy Stokes

Jeremy Stokes is a product designer at Duolingo and a former UX design intern at Google. But what’s most special about his work is his passion project – Cultivate. 

With Cultivate, Stokes sets out to design a new way of understanding mental health, specifically in the African American community. The project is laid out like any other case study, providing some background into the issue and detailing the process behind building and designing the platform’s concepts.

Another aspect that shines through Stokes’ portfolio is his ability to present himself. His About page is full of imagery and references to his favorite things – video games and cartoons. But he doesn’t settle for just a bio. His portfolio includes his stunning resume, which is as much a part of the portfolio as his case studies.

Jeremy Stokes’ UX portfolio walks a thin line between professional portfolio, and personal website, and does it excellently. Showing visitors your personality can make the difference between being considered for a job, or being forgotten among dozens of other UX designers.

8. Siriveena Nandam

Siriveena Nandam is a UX designer with an analytical twist. With a background in psychology, Siriveena creates “data-driven solutions that elevate human experiences”, as her website states.

Her portfolio makes it clear that data is the key parameter that runs through her work. The design has a much more technical feel than many other UX portfolios.

As expected, scrolling down her site reveals several case studies. These are the highlights of Nandam’s portfolio, and they’re incredibly detailed. 

“Our National Conversation”, a non-partisan news aggregator, is a perfect example of the type of issues Nandam tackles, and the case study includes everything a case study should. It provides a short summary, before diving into her research, analysis, wireframes, and UI designs, all with great detail, as expected from such a technical product designer.

Siriveena’s UX portfolio is an inspiring demonstration of how designers can take serious subjects and technical information and present them in an interesting way. The lack of playfulness doesn’t hinder the visitor’s experience at all and does a great job at differentiating her from the competition.

Design Your UX Portfolio With UXPin

If you want to design your UX portfolio, why not sign up for a 14-day free trial? By the end, you’ll have another design tool to add to your portfolio!

The post 8 Inspiring Examples of UX Design Portfolios That You Just Must See appeared first on Studio by UXPin.

The Guide to Lightweight UX Documentation

UX documentation is a crucial part of the UX design process. It serves as a reference, giving context to the product’s lifespan from the initial concept to the current iteration.

Good UX documentation is detailed yet lean. It should be highly focused, actionable, and purposeful. 

UXPin lets you store UX documentation, prototypes, design systems, and style guides all in one place. Try UXPin for 14 days to discover the world’s most advanced UX design tool.

What is UX Documentation, and Why is it so Important?

UX documentation is a working document of a product’s journey from inception to the current release. This documentation is essential for several reasons:

Organizational memory—serves as a historical reference for user experience design decisions, workflows, research, and other processes teams have tried, including what’s worked and what hasn’t. UX documentation can prevent teams from making the same mistakes or exploring avenues others have already tried.Onboarding & handovers—UX documentation is helpful when onboarding new team members or handing a product off to a new team. If the product or company is acquired, UX documentation will help facilitate a faster, smoother asset transfer.Single source of truth—a single reference means every team and department knows a product’s history and how it got to where it is. No person or department can distort the facts to push an agenda or retry something that’s failed.Fosters better communication & collaboration—effective design documentation allows every stakeholder to read about the UX design process and how the product has evolved.A valuable R&D and IP—good UX documentation is a valuable intellectual property asset describing a product’s research and development. This asset can help develop future products or increase a product’s value when it comes time to sell.What to Include in UX Documentation

What to include and how to create UX documentation will depend on your product, industry, company, research, and design processes. 

Here are several elements of the user experience design process you must consider when compiling your docs.

IntroductionUser ResearchInitial Concepts & SketchesInformation ArchitectureWireframes & MockupsPrototypesUsability Testing ReportsDesign SystemIntroduction

The introduction or brief should summarize your UX documentation and include the project’s goals, objectives, and vision. Your introduction must be easy to digest and understand for all stakeholders (including non-designers) who may not want to delve into the granular design details.

User Research

User research is an essential part of any UX research document, including user personas, empathy maps, user journey maps, interviews, market research, and any other information that pertains to the customer. 

User research is one part of UX documentation where you can afford to include all the information you have to avoid speculation, guesswork, or misinterpretation of the results.

Initial Concepts & Sketches

Including a summary of initial concepts and sketches can help teams understand how the product’s journey began and the thought processes behind the product’s features.

You can also include sprints and brainstorming sessions reports to understand how various teams have solved user and design issues.

Information Architecture

Information architecture is an essential piece of UX documentation because it gives a bird’s-eye view of a product, navigation, and user flows. You can also include the architecture’s changelog so readers can see how the product has grown and evolved.

Wireframes & Mockups

Static wireframes and mockups allow stakeholders to inspect each screen to understand the product’s details. Wireframes provide context for the structure and hierarchy of each screen, while mockups highlight colors, typography, iconography, branding, and other visual elements.

Prototypes

Prototypes allow stakeholders to explore the product and understand the context behind usability testing and design concepts. Your UX documentation should only include the latest iteration rather than every prototype you’ve ever created!

UXPin is the world’s most advanced code-based design and prototyping tool. Provide a link in your UX documentation to the latest product prototype. In UXPin’s Preview and Share mode, stakeholders can interact with the prototype like the final product.

Team members can use Spec Mode to inspect properties (size, color, grid, typography), measure distances, and open the product’s style guide (design system).

Ready to explore UXPin’s powerful prototyping functionality? Sign up for a 14-day free trial today!

Usability Testing Reports

Usability reports document the process and results of testing. It’s important to define a standardized reporting process as early as possible so your UX documentation is thorough and consistent.

Your docs should also outline the company’s usability testing process and reporting policies, so research teams maintain a high degree of quality and consistency.

Design System

Your design system or style guide outlines the product’s design patterns, fonts, colors, components, hierarchy, spacing, and other visual design standards. The style guide will also include guidelines and correct usage to maintain a single source of truth across the entire organization.

UXPin solves the single source of truth dilemma with Merge technology. Product designers, UX teams, and developers use the same design system components synced from a repo to UXPin’s design editor. 

Read more about UXPin Merge, how it reshaped PayPal’s DesignOps workflow, and reduced time to market.

3 Tips to Create Great UX Documentation

These are three tips to improve your UX documentation from Yona Gidalevitz at Codal (an enterprise design and development agency).

Yona says you must ask two crucial questions about the UX documentation you generate:

Is the UX documentation going to drive decision-making?Is your UX documentation usable to your team?1. Give your UX documentation purpose by determining how it drives decision-making

Fact: UX documentation has a purpose if it drives decisions.

UX documentation has a wide variety of end-users—including designers, developers, QA specialists, stakeholders, and management—all of whom may (or may not) use a particular document to make informed decisions during their work.

In fact, any given document can impact decisions.

Let’s consider the Agile software development lifecycle (SDLC) for a moment. One document may impact a particular activity in the SDLC, while another document may affect several subsequent activities.

For this reason, it’s imperative to consider the lifecycle of the document. The lifecycle of a document refers to the path, from user to user, before it is no longer needed. It’s a matter of ROI.

In general—and there are exceptions—the longer a document remains relevant during the SDLC, the greater the return on time spent perfecting it. The reason for this ROI is because these documents drive decision-making across multiple stages.

In other words, UX specialists need only make documentation when it is necessary. Otherwise, you’re wasting time and money—not only creating it but for those who must consume it!

You may be wondering, but how do I determine the lifecycle of a document before I’ve even made it?

Determining the lifecycle of a document is as simple as looking at its various use cases.

For example, take the following empathy map Codal created for one of its clients.

UX specialists know that UX research documents tend to make great decision-making tools.

Let’s investigate the lifecycle of the empathy map above. To do so, we need to consider who is likely to use the document and for what? In Codal’s case, the document is a compilation of user research results.

User research results drive the entire product strategy during the SDLC. Even if developers and PMs don’t own the document, its insights will inevitably influence their work.

If we follow the logic presented earlier, an empathy map is an investment for the product’s future. Creating UX documentation as early as possible increases the ROI over time.

2. Make your UX documentation useful by meeting the requirements of the target audience.

Fact: a document can drive decision-making yet still be useless at the same time.

Developers don’t always have an equal say in page layouts—they usually follow the designs created by the UX & UI designers. Thus, the design documentation, however poor it may be, will drive development decisions.

In other words, “driving decisions” is one concept, and “driving good decisions” is something else altogether.

Documentation with a purpose and a target audience is likely to help stimulate good decision-making among targeted users.

The converse is also true.

Documentation that doesn’t consider the audience’s specific requirements might miscommunicate the UX specialist’s intentions.

Avoiding the pitfalls of non-targeted documentation is simple:

Deduce the target user-base.Analyze how teams will use the document.Craft the document so that it speaks the language of the user.

Consider the following interactive wireframe.

We can determine the target users of any document by examining its purpose.

Static wireframes are typically used as visual scaffolds so that the interface designer may craft a pixel-perfect mockup of the UX designer’s vision.

Interactive wireframes, however, can also be used by developers to gauge dependencies and interaction models. Product managers can also quickly assess the feature breadth (horizontal requirements) and depth (vertical requirements). QA specialists may even use the interactive wireframe to double-check the developer’s work to recreate functionality.

As such, we can deduce that the target audience for an interactive wireframe includes:

UI designersProduct managersWeb / mobile developersQA Specialists

To ensure that the document is helpful, it must cater to the specific needs of each target audience above. Otherwise, our document is effectively useless.

Here’s how LookThink tailored its document to each audience created in UXPin:

To help UI designers – Estimate image and layout dimensions.To help product managers – Note any “wobbler” features that may provide additional value but exceed the current scope.To help developers – Add notes to clarify complex functionality and ask for input on feasibility.To help QA specialists – Note which functionality is up for discussion and which the team accepts.3. Improve documentation usability by keeping it focused.

Fact: documentation depends heavily on usability.

No matter how good documentation’s content is, it’s useless if readers can’t understand it. We can distill document usability down to one word: focus.

Often, UX specialists overwhelm UX documentation with too much information. This information overload can cause many problems, especially when the data gets lost in translation.

Human beings don’t like to read extraneous details. How many times in your life have you been thrilled to read a 20-30 page document? UX documentation must be focused.

Let’s look at the following sitemap, created by Codal for a client’s project.

This document is a fantastic example of focus.

Codal confined everything to one page with no extraneous details or excessive notes. The target audience only has to consume highly relevant data—nothing more, nothing less!

Achieving focus in UX documentation is simply applying the core principles of purpose and usefulness. The above document illustrates this point effectively.

UI designers and developers don’t need to hear every reason behind the choices you’ve made. Save it for an in-person discussion or only highlight the top 3-5 decisions.

There are exceptions, of course. For example, the QA team might require detailed reasons to test the software’s functionality adequately. It’s important to liaise with each department to learn what information is essential and what is redundant.

Bonus Tip: Create a documentation hub that links out to all relevant documents

As Autodesk shows below in UXPin, include explanatory notes in the hub rather than clutter the actual decision-making documents.

Improve UX Documentation With UXPin

UXPin lets you add documentation directly to your product’s prototypes allowing you to maintain a centralized reference within the design tool. 

This centralized documentation fosters better communication and collaboration between product designers, UX teams, and developers to keep everyone on the same page.

Why not try UXPin for your next project? Sign up for a 14-day free trial and discover how UXPin can enhance product design, streamline workflows, and improve team collaboration.

The post The Guide to Lightweight UX Documentation appeared first on Studio by UXPin.

UX Strategy: How To Research & Create One Effectively

A well-defined UX strategy is as important as your organization’s mission statement. A user experience strategy helps guide UX teams when conceptualizing and designing new digital products.

This article is a summary of our free eBook, The Field Guide to UX Strategy, written by acclaimed designer and author Robert Hoekman Jr.

Looking for ways to improve your user experience strategy? Why not try UXPin, the world’s most advanced code-based design and prototyping tool. Sign up for a 14-day free trial and create better user experiences with UXPin.

What is a UX Strategy?

A user experience strategy is a plan that aligns UX goals with the product and organization. It defines how the organization wants its customers to experience brand and product interactions, so UX designers always consider the business strategy and its users when making decisions.

A company should consider the following when formulating a UX strategy:

How the organization defines its user experience in relation to the brandHow UX design aligns with product strategyHow user experience aligns with business objectivesDetailed user personas from qualitative and quantitative data, including behaviors, expectations, user needsMarket trends influence the user experienceCompetitor analysisCurrent product performance against future goalsDefining, prioritizing, and executing product goals, objectives, and KPIsUser research proceduresReporting findings to stakeholdersThe Importance of a UX Strategy

A design thinking process focuses primarily on the user, and rightfully so. But, without a UX design strategy, designers forget about the brand and its goals. A UX strategy brings the organization and user into a designer’s focus to align product and brand experiences.

A UX strategy ensures the organization and its stakeholders also have a say during research, design process, and usability testing.

Here are five reasons why it’s essential to have a UX strategy.

Keeps stakeholders updated on user experience and the benefits of UX designOutlines UX research and design processesDefines how to measure UX successesGives the entire organization an understanding and importance of user experience designAligns the brand’s promise with the user experienceWhere to Start With a UX Strategy

Developing a UX strategy starts with a discovery process of researching data and interviewing the relevant people, including:

Primary stakeholdersSecondary stakeholdersCurrent usersBeta testersSubject matter expertsUsers of competing digital productsIndustry DataPrimary Stakeholders

Your primary stakeholders are the people in charge of the product. Primary stakeholders will be the CEO and CTO in most startups, while more established businesses may have several C-suite members you must engage.

Primary stakeholders generally want to know how the user experience will impact growth, cash flow, business value, and profits.

Examples of questions to ask primary stakeholders:

Why have we chosen this revenue model?What do you see as the biggest concerns concerning the user’s experience, and why?What do you think is working well?How do you believe this product compares to its competitors?What metrics would you like to see improved?

Pro tip:  Do your research about what each primary stakeholder is most focused on and ask questions relevant to their role in the business. This understanding will give you meaningful feedback during the discovery phase.

Secondary Stakeholders

Secondary stakeholders are the people responsible for managing departments and executing the organization’s objectives. These stakeholders are important because they understand the company’s constraints and challenges—which ultimately impact the user experience.

Secondary stakeholders include product managers, marketing leads, lead researchers, executives, and other department heads that influence or rely on a product’s user experience.

When interviewing secondary stakeholders, first outline the C-suite’s expectations and concerns. That way, you can explore ways to improve the user experience that align with high-level directives. You should also focus on each secondary stakeholder’s role and responsibilities and how that affects users.

Make sure you keep your questions in line with the stakeholder’s area of interest. Anything outside of that carries a high risk of misleading information and perspective.

Current Users

If your product already exists, you can interview current users to get a customer’s perspective of real-world use.

Try to avoid offering compensation for these interviews; this might influence the feedback and opinions they share. Try to keep your interactions to a minimum—preferably one call/meeting under 20 minutes.

When contacting users, explain your role and that you’re researching ways to improve the product.

Tips for interviewing current users:

Set up meetings with at least three users. After five or so, you’ll start to hear all the same things the first four said.Invite other team members. For example, another designer or researcher can help take notes while you focus on follow-up questions. Marketers and developers can also benefit from a firsthand understanding of the user’s background and behaviors.Build rapport by asking how they found the product and what features they use most.Instead of asking only about feelings and preferences, ask about behaviors. For example, “What do you do when…” instead of “How do you feel when…”. Open-ended questions provide more meaningful feedback compared to binary yes/no questions.Prepare a list of questions to use as a guideline, but don’t stick to a rigid script like you would during user research or usability testing. Leave room to deviate and explore feedback you might not have considered.Ask lots of follow-up questions when you start discussing the product. No answer is cut and dry. If a complaint starts but then goes nowhere, chase it. Find out what’s causing the grief. Do this for anything that piques your curiosity.Beta Testers

Interviewing beta testers is often the most challenging part of a UX strategy discovery because these people are less invested in a new product than users of more established products.

A beta tester might be frustrated with bugs or the new product’s lacking features. So, you’ll have to get past those issues to find the actual struggles and problems your product is trying to solve.

Be empathetic. Ask the user about their usage so far, their problems, disappointments, and product wishes. Stress that your purpose is to improve the product experience, and you can’t do it without them.

Subject Matter Experts

Subject matter experts can help provide context to complicated market, product, or user data. Examples of subject matter experts include:

Experienced visual designersProgramming/technical specialistsBehavioral psychologistsUser researchersData scientistsProject managersSuccessful startup foundersBusiness consultants

Make sure you prepare well for expert interviews and only ask questions relevant to your product, users, and organization’s goals. Make sure you understand what they are explaining explicitly, and don’t cherry-pick the information that best supports any narrative or bias you or your company holds.

Users of Competing Products

It’s important to understand your competitive advantage and how that impacts your UX strategy. You can do this by researching how users feel about your competitors’ products.

A quick and easy way to find user pain points is by reading your competitor’s reviews. There are three valuable resources for finding competitor reviews:

Apple App StoreGoogle Play StoreTrustpilot

If your product has a browser extension, also check the browser stores, like the Google Chrome Web Store.

Look for parallels with your product and make notes of common complaints. Also, check out the positive feedback to see what delights customers. 

Industry Data

Comparing analytics data with user feedback can give you context into patterns and behavior. 

For example, if you have a lot of drop-offs during signup, and users say they battle to navigate the signup flow, then there’s a clear correlation between feedback and data.

Event-tracking tools like KISSMetrics and predictive behavior tools like MadKudu can help determine what user feedback is most meaningful.

At UXPin, we use MadKudu to map user behavior for our purchase flow to find ways to optimize the process and remove any roadblocks.

6 Tips for Creating a UX Strategy

Not sure where to start with your UX strategy? We’ve created a set of free UX Process & Documentation Templates, including a UX strategy template.

Here are six tips to consider when creating a UX strategy.

1 – Maintain a User-Centered Approach

Always stay user-focused when setting goals for your UX strategy. The point of a UX strategy is to align the company’s goals with UX design, not find ways to enrich the business at the user’s expense.

2 – Prioritize Users Over Profits

The user experience should always be transparent. While the business must make money, ensure your UX strategy doesn’t put profits over users. For example, don’t hide or make it difficult for a user to cancel or opt-out of a service.

3 – Define the Company’s User Experience Roadmap

Use stakeholder interviews and user interviews to define the company’s long-term roadmap for product design and user experience.

4 – Create Specific & Realistic Goals

Use your UX design strategy discovery to identify your product’s design aspirations based on:

Stakeholder feedbackUser researchCompetitor analysis

Be explicit about your UX strategy’s goals and avoid broad or vague aspirations. Instead of “increase user signups,” define a specific objective, “increase user signups by 15% annually.” Make sure these goals are realistic and based on actual data rather than intuition.

5 – Define Circumstances of Use

Define the circumstances and environments where customers use your products (Who, What, When, Where, Why). Don’t hesitate to detail as much about your user and their environment as possible—this will help designers empathize with users when thinking about the user experience.

Remember to consider that the customer experience extends beyond the product to other touchpoints, including ads, messaging, policies, user agreements, and customer support interactions.

6 – Review & Update Your Strategy

The ancient Greek philosopher Heraclitus once said, “The only thing that is constant is change.” This statement couldn’t be more true for the fast-paced tech and UX industry.

Your UX strategy must be open to adapting to new technologies, market shifts, new legislation, and other forces that disrupt our plans.

Review your UX strategy annually to see where you are and whether you’re on course to meet your long-term goals. Based on the previous year’s performance, you may update these goals or set new ones.

Don’t forget to get your free copy of The Field Guide to UX Strategy, which will help you define, document, execute, and test your UX strategy with methods proven through practice.

How UXPin can Enhance Your UX Strategy

“UXPin’s mission is to enable the best user experiences by merging design and engineering into one world of better, faster product development.”

UXPin’s high-fidelity prototypes feature states, code-based interactions, conditional formatting, variables, data capture and validation, functions, and more to create an accurate replica of the final product—features you cannot get with a vector-based design tool!

These high-fidelity prototypes improve usability testing because participants get the same user experience as the final product. You also get fewer errors which means a faster time to market.

UXPin’s high-fidelity prototypes also significantly improve design handoffs. Thanks to automated design specs, CSS, style guides, and the ability to create documentation inside UXPin, engineers know what each prototype should do—minimizing the back and forth communication we often see between product teams, design teams, and developers during handoffs.

Ready to experience how code-based design can improve your company’s UX strategy and reach your user experience and business goals faster? Try UXPin for 14-days to see what code-based design can do for you!

 

The post UX Strategy: How To Research & Create One Effectively appeared first on Studio by UXPin.

Top 10 Product Development Tools You Need to Use

Equipping your team with the right product development tools is a big part of making sure that your product is a success. Using the wrong software (or not using any at all) can result in billions of dollars wasted due to serious productivity and communication issues. 

In the following article, we’re going to mention our top 10 recommendations for product development software. We’re going to cover all the key areas – from ideation and user research, all the way through to prototyping, feedback collection, and team communication. 

Let’s begin.

Product development software

There are a lot of product development tools out there that let you cover every step of the product development process. 

To help you make sense of them all, we’ll split these tools into the following categories:

UX, UI design and prototypingProduct testing/feedback collectionCommunication and collaboration

Let’s get started. 

UX, UI design & prototyping

Prototyping, UI, and UX design software focus on managing design effectively and bringing creative ideas to life. Use these tools to kick-start discussions about your planned project. They’ll help you visualize and share concepts with the right teams in the right way. During the early stages, your teams can explore and comment on each element of the build to guarantee the feasibility of the project. 

Some of these tools, like UXPin, use live code – so designers and developers use the same elements for seamless collaboration and a consistent product build. 

The following tools will make your product testing easier through improved speed, efficiency, communication, and collaboration. 

1. Proto.io

Proto.io, as the name might imply, is all about prototyping. The tool uses a drag-and-drop interface, making it quick and accessible for anyone, at any skill level. You’ll also find customizable templates, animations, and a component library stacked with native UI items. There are a few other tools that designers can import their designs from.

This simplicity comes at a cost, though: Proto has limited wireframing options. You can preview prototypes or export them to HTML and PDF, but very little else. 

2. NextUXDesign

NextUX, UX design software created ‘by a designer for non-designers’, is a simple visual editor – a way to get those ideas out of your head onto the screen. You and your team then leave feedback on designs to share thoughts and refine the product. There’s even a NextUX Chrome Extension. 

But it should be noted that NextUX is still in beta (you can sign up for free during this period). This means it may not be as stable or offer the same level of support as more established tools. Like Proto, NextUX is aimed at those with low or no coding knowledge. And, like Proto, that ‘intuitive simplicity’ also means certain limitations for those looking for a more traditional, powerful tool. 

3. UXPin

UXPin offers a unique proposition: it’s the only full-stack UX design software on the market. No more juggling multiple tools (and a minefield of miscommunication) to complete just one project. Your entire process, from wireframes to fully-interactive prototypes, can be managed through a single high-performance design tool that’s simple to use. 

Powered by Merge technology, UXPin places collaboration at the heart of your DesignOps processes. It makes managing design a breeze. Designers create high-fidelity, ‘live code’ prototypes in code components from Git or Storybook that can be easily deployed in formats familiar to developers. You can then share code for interactive components coming straight from your developers’ repository (for handover), or send links to get contextual feedback from relevant teams, or conduct usability testing. 

In other words, UXPin helps your teams ‘speak the same language’, so you can easily build error-free prototypes that look and operate just like the real deal.

With UX design software covered, we can now take a look at product testing and feedback collection tools. 

Product testing/feedback collection

Prototypes help you put your users first. It’s an opportunity to create a mock-up, test operation, collect feedback, and refine until you have something that precisely matches your users’ needs. A path, then, to a stronger, more successful product is in the hands (and thoughts) of your users. 

Traditional feedback gathering tends to be direct; think of focus groups and phone interviews. Unfortunately, these take time and effort, and – frankly – present barriers to effective testing. 

Make feedback collection easier for you and your users with tools that let you see how people engage with your product, and gain insights through detailed data on feature usage. 

1. Typeform

Typeform makes feedback collection more engaging. Why should it feel like an interrogation? Promising to help you ‘create forms, surveys, and quizzes that people enjoy answering’, conditional logic is applied to let you create more natural conversations with your users. 

You can build strongly visual single-slide questions, featuring text boxes, radio buttons, and star ratings to make the whole process a lot more fun and interactive. As a result, you can reach a higher response rate and encourage valuable, thoughtful, honest, and actionable feedback. 

Image and video libraries come as standard, to make your surveys really stand out. And everything from polls to order forms can be easily built using one of the many Typeform templates. No coding necessary. You’ll also find extensive support for third-party integrations, including the ability to sync responses to Google Sheets and send Slack alerts when surveys are completed

2. SurveyMonkey

SurveyMonkey is one of the biggest names in the feedback arena, and with good reason. The platform is incredibly easy to get to grips with. Your creations may lack the visual punch of Typeform, but if you want simple surveys, this tool delivers. The tool is ideal for creating multi-channel touchpoints throughout the user journey, letting you assess customer satisfaction levels.

The survey site is a great way to conduct market research fast, without any of the headaches and costs usually involved with this undertaking. Whether you just want a sense-check or test a big new idea, SurveyMonkey’s results analysis lets you track how your users really feel. 

3. Hotjar

Hotjar is a genuinely user-centric tool that helps you track and understand your users’ behavior. Think your users are getting stuck and backing away from your site? Want to know where visitors are really clicking? There are few things more frustrating, after all, than stumbling across a site that’s half-broken. 

Heatmaps are one of the biggest draws to Hotjar. You can create them to quickly and visually see how users behave, where they click, and how far they scroll. You’re also able to record and playback live sessions, watching users as they interact with their site – every click of the mouse, every flick of the cursor – to identify where changes can be made. Likewise, with access to high-quality qualitative and quantitative data, you’ll quickly see which changes are urgently needed to make the highest impact. 

4. Mixpanel

Mixpanel wants to support your goal of building better products that increase conversion and retention. It does this through product analysis, generating detailed reports that identify your most popular features, and the audience that uses your products most. These insights can be broken down to create interactive reports. Use these to further test the impact of your product. Mixpanel’s workflows are very simple to create. You won’t need to learn code or hire a developer to observe user flows or build funnels that keep your users engaged. 

Communication and collaboration

Good product software development also depends on good collaboration and communication. Miscommunication has the power to completely derail even the simplest project. The cost of wasting time and money is hard to fathom. The creeping dread of a missed deadline, or, perhaps, even worse, designers and developers having different, often vocal ideas of what’s required of them. 

With the rise of remote working, communication and collaboration tools have become increasingly popular – and powerful. With the following tools, it’s about keeping everyone focused on a single goal, a single vision, and knowing what they need to do to achieve it.

1. Trello

Trello is the digital project board. If you can click, type, and drag-and-drop, you can use Trello. Create a board, add cards, and share with other project stakeholders, so everyone can see what teams are working on and at what stage. This makes it perfect for tracking project milestones along a roadmap. You can also use this on a more granular level, to follow team and individual actions. 

With Trello, you can get a little creative with your boards. For example, you might want to try making user interview notes: create multiple columns on a board, and align your question and answer cards. Add labels for greater visibility. You’ll be able to see, at a glance, user feedback without rifling through pages of notes. You might want to do similar when grouping together user pain points, or creating mood boards that make parsing information easier. 

Recognizing that communication is key, you’ll find plenty of integrations with communication tools such as Slack, Google Drive, Confluence, and Dropbox. 

2. Monday

Monday is designed to make workflow creation easy. Plan, track, and deliver projects within a single workspace. The platform lets you build project roadmaps, then transform them in the format that makes the most sense for your team. Visual timelines, Kanban boards, and calendars will all help coordinate multiple teams to get your product developed and launched faster than before. Elsewhere, Monday allows for automation, so you can reduce costly human errors and time-consuming, repetitive work, so teams can put their experience to better use. 

The tool lets you deal with a range of tasks, like bug tracking and backlog management. And, as you’d expect, you’ll find integrations galore, including Slack, GitHub, and Jira.

3. Slack

Slack is one of the most popular communication tools available – keeping teams talking has never been easier. It’s not all instant messages, emojis, and GIFs. Slack brings greater communication efficiency by including options to send files like design assets, gather feedback, and send out design updates. All of this can be shared internally or with external contractors using Slack Connect. 

The tool boasts of integrating with almost 2,500 tools. Many of these help you streamline work processes by connecting to tools and platforms such as Office 365 and Google Drive. However, among that impressive list of integrations, you’ll also find tons of design and software development tools. And if 2,500 isn’t enough, you can even create your own custom integrations when using in-house systems and processes. 

Summary

The right product development software is the one that meets your objectives head-on – then exceeds them. The tools that make life better for your users and easier for your team. 

With your focus on boosting the effectiveness of your team and your organization, start by determining: 

What do you want to achieve?Why is this your goal? Who do you want to target? How will you do it (for users and your team)? 

Use your answers as a guide to identifying the product development tools best placed to support your success. And if it’s high-fidelity prototypes featuring consistent design and development, get started with UXPin Merge. 

Discover Merge

The post Top 10 Product Development Tools You Need to Use appeared first on Studio by UXPin.

Re-Imagining Iress Design Tools

This article was written by Nick Elliott who works as a Design System Product Owner and Regional Head of Product Design at Iress.

As with many design systems teams, at Iress, we want our design system (which we call the IDS) to be more than simply a set of components. We want our design system to be a framework that our colleagues love to use and something that helps anyone at Iress create great experiences for the people using our product and services.

As a technology company providing software to the financial services industry, the design team at Iress has always looked to remove inefficiencies that can form in the handover between design and engineering, as well as how we can continue empowering our teams to create awesome experiences together. Over the last few years, design tools have adapted and our design team has been on a journey to review our own design tools – one of which is UXPin Merge.

Days gone by

Let me spin a story – one that may resonate with you…

Danielle is a designer. Through a discovery session, she gets to understand a user’s problem. This may be based on previous research, data, direct feedback or a combination of all of these. There may be a team ideation session. But at the end of the day, as the designer, Danielle is asked to make a prototype. She uses a design tool that creates a load of linked, clickable images. She may go and test this to confirm that she is solving the problem in the right way. She then gets agreement with stakeholders that this is what they are going to build.

Daaruk, an engineer, then takes this prototype and recreates it in his software development tool of choice. Daaruk quickly realises that what Danielle has designed is really hard to build, and has some issues. There is a bit of to and froing and compromises are made. Then Daaruk finishes the work and presents it back in a UX review. Danielle isn’t happy – she doesn’t really like what she’s seeing – the typography and vertical rhythm are off, the tab order isn’t right causing accessibility issues and some of Danielle’s expectations of how the screen would work didn’t come through from the prototype. Daaruk makes some changes, but is also unhappy as he has to spend time unpicking a lot of work to make what looks like minor tweaks.

And now we’ve run out of time. We promised this would be delivered by a date and we have so many other projects in the backlog. We ship the feature with compromises. And then when it ships, we get a load of feedback from our users. The experience hasn’t quite hit the mark and there are loads of usability issues. This then comes back to Danielle and Daaruk again, stopping them and the rest of the team from working on other projects that will make further impact.

Does this sound familiar? If so, keep reading.

The inefficiencies of the design to delivery handover

So the above is hugely inefficient. Why?

●  Danielle is prototyping on her own, rather than as a part of a team. She has to present this back and spend time with other members of the team until they are all happy.

●  Danielle is testing something unrealistic with end users – because users can’t interact with the image-based prototype as they would a normal application, usability issues are found out way too late.

●  Danielle is creating something that is thrown away. Daaruk has to restart from scratch. ‘Design drift’ occurs.

●  There are lots of reviews between Danielle and Daaruk that create rework.

●  Danielle and Daaruk are working on different tools that are not connected – there is no centralised way to refer to the same typography, spacing, components and patterns.

●  The Support and Product Teams need to spend time understanding the issues that users are finding, once the new feature is released.

●  Danielle and Daaruk have to do rework to fix the experience and usability issues that have been found.

●  In extreme cases, users are so put off by the experience, they lose trust and it takes a lot of the client-facing team’s time to convince them that we’ve fixed the issues and that it’s worth using again.

Design system maturity

Earlier this year TJ Harrop, Design System Product Manager at the NSW Government introduced Global DesignOps conference attendees to a design system maturity scale.

I’m paraphrasing TJ’s concept, but he talked about 4 levels of design system maturity (TJ’s concept talked about ‘Full Stack UX’, which I won’t go into here)…

●  1st stage: Design system assets are created in tools such as Photoshop or Illustrator.

●  2nd stage: We have CSS & HTML style guides – used for guidance only.

●  3rd stage: We have two sets of components that are meant to look alike – one for designers and one for engineers.

●  4th stage: We have a single source of truth where designers and engineers are using the same design system components.

In terms of our journey at Iress, we are currently at stage 3.

But stage 3 can still be hugely inefficient because two sets of people maintain two separate sets of components – one in the design tool, and one the engineers use in production. In addition, every time there is an IDS update, we have to mimic this in the design tool. It can get out of sync really quickly.

Also, because the design tool components aren’t as sophisticated or don’t have the same constraints as the ones used by engineering, it can cause inconsistency – even within the same design team.

And finally, we have to theme our design system. Being able to prototype and test the same components with a client’s brand, means another set of components that again can get out of sync quickly.

Our goal at Iress is to get to the 4th stage of design system maturity.

Getting to stage 4 with UXPin Merge

Over the last 12 months, we’ve been reviewing the design tools on the market. While some design tools are great for design agencies working on lots of small projects and many brands, they are not effective for designing at scale with an enterprise design system. And this is why we are excited by Merge.

We are at the beginning of our journey, but it is our hope that:

● With Merge integrating directly with the code repository, designers and engineers will be using the exact same components. Maintained centrally, with one set of components, this will free up our designers’ time.

● And because we are using the same components and settings (props), we hope our designers and engineers will be better aligned. Designers will better understand the constraints of using the design system. If there is reasonable evidence to do something different or bespoke, this can be done within the team, or escalated to the IDS Team to discuss an enhancement.

● It will help us create more interactive and realistic prototypes. People can tab around, or see the same interactions – hover styles, animations, etc – as they would expect in a real app. We can do more insightful user testing and discover usability issues much earlier in the process.

● The markup required to render the prototype can be taken directly from Merge and handed over to the engineer, who can place it in their software development tool of choice. This should hopefully speed up development. The engineer no longer needs to start from scratch and already knows what components and settings to use. It will help us avoid the ‘design drift’ we so often see. Things like spacing and typography should all be aligned, as it is all driven from one place.

●  It will give us the opportunity to experiment with theme/brand switchers, as well as test responsive prototypes mimicking different devices.

●  It will give non-designers access to a tool, whereby they can also experiment and have exposure to the same design considerations.

●  It will allow more collaboration, allowing designers to be facilitators of the design process, not the owners of design.

Final thoughts

In conclusion, we are excited about Merge. It’s not to say that there won’t be any bumps on the way – it’s a different way of working. Some people will love it, others maybe less so. But if Merge can help us scale, empowering our many teams at Iress to use our design system consistently and efficiently, then it’s a massive step forward from where we are today.

The post Re-Imagining Iress Design Tools appeared first on Studio by UXPin.

Design System Metrics: How to Measure the Value of Design System

Design teams understand the value of a design system. But creating and maintaining a design system can be time-consuming and costly—meaning you’re less likely to get buy-in from management and stakeholders without presenting metrics proving a design system’s value.

But how do designers quantify design system metrics to:

Get buy-in from management for resources Encourage designers, product, engineering teams, and other stakeholders to adopt the organization’s design system and governance procedures

We’re going to explore the benefits of a design system and how you can measure its impact with meaningful metrics to present to management, teams, and stakeholders.

UXPin makes it easy for organizations to build, use, and maintain a custom design system. A dedicated sidebar allows designers to drag elements from your design system’s component library to create user interfaces fast.

You can also assign Who can access and Who can edit to institute controls in accordance with your organization’s design system governance.

Ready to create a design system using UXPin? Sign up for a 14-day free trial to discover the flexibility and efficiency of designing with UXPin.

Benefits of Design System

There are two primary design system benefits:

ConsistencyEfficiency

A design system is crucial to avoid usability issues and maintain brand consistency. Every designer is different, and so are their design decisions. If teams can create new elements and components at will, each iteration will look different across teams and departments.

A design system ensures that every team member uses the same elements and components to maintain consistent aesthetics and functionality. 

This consistency streamlines usability testing and creates a better overall user experience.

Design systems also increase efficiency. Instead of building elements and components from scratch, designers can pull what they need from the organization’s design system and start building interfaces immediately.

Design teams can minimize errors and increase productivity with consistency and efficiency, ultimately translating to a higher ROI and profits.

But, how do you gather accurate design system metrics to measure this success?

How to Measure a Design System’s Success

There are two reasons why you need to measure a design system:

Adopting a new design system – management and stakeholders usually want to determine the feasibility and benefitsAfter significant changes or updates to a design system – management and stakeholders want to learn how the changes impact cost, efficiency, usability, accessibility, workflows, and design handoff.Creating Measurable KPIs

In an informative white paper from Devbridge, Christopher Wilkinson outlines how to “Set clear KPIs to determine the efficacy and adoption of the design system within the organization.”

Christopher highlights three key metrics to measure:

Team efficiencies – measure how long it takes teams to build a new product using the organization’s design systemSpeed to market – measure how long it takes teams to build and test prototypesEffect on code – measure how much code developers change with each release

You should first measure these metrics without a design system to get a baseline and then with a design system to measure its impact.

With these three metrics, you can determine the following:

The efficacy of your design systemPrototype consistency for new products and user interfacesHow the design system impacts workflowsWhether the design system reduces error rates and usability issuesHow the design system improves accessibilityHow the design system affects handoffsWhether or not the design system reduces code with each releaseThe impact a design system has on quality assurance

You can present your findings to management and stakeholders in quantifiable data that measure the success of your design system.

How to Prove a Design System’s Value

In a detailed and informative article, Jack Reinelt from Somo outlines a 3-step process for proving a design system’s value.

Define – understand the context, objectives, KPIs, and stakeholdersMeasure – use quantitative and qualitative research and dataCommunicate – understand and present the data that’s most important to stakeholdersStep One – Define

There are four elements you must define before you can measure a design system’s value:

Context: what drives the need for a design system, and what value will it bring to the organization?Objectives: what are the design system’s objectives, how does this align with the organization’s mission, and how will you make the design system accessible to all teams?KPIs: define how you will measure the success of the design system (read the Creating Measurable KPIs section above for ideas).Stakeholders: understand the goals of your stakeholders so you know what metrics matter most to them. Recognize that the CEO, CFO, and CTO all have different priorities. Your goal is to present the data that matters most to each stakeholder.Step two – Measure

You can measure a design system’s value in two ways:

Quantitative: includes coverage across the organization, user research, business value. Make sure you get a baseline to measure the success of your design system implementation. Jack Reinelt also recommends re-running data every six months to track the design system’s performance.Qualitative: management and stakeholders also want to understand how the design system impacts teams. Feedback from various departments can complement the quantitative data.

To quantify the efficiency and value, you need to compare a baseline (your current design method) vs. the impact of a design system.

Here are some metrics you want to collect and compare for your quantitative data:

Average time to design a single componentAverage hourly design costNumber of designers using the design systemHours per month spent designing new components per designerDesign hours per monthMonthly cost

Present both the estimated monthly and yearly costs.

Step Three – Communicate

Communicating your findings and the design system’s value is critical to get buy-in for resources and organization-wide implementation. You must prove that the design system produces business value—how does it save time and money?

Remember to present your feedback so that every department head can see how the design system will benefit their teams. For example, the CFO might be more interested in saving time and money, while the CTO wants to know the design system’s impact on speed to market and reducing lines of code.

Ensure you have a system to track the design system’s performance for periodic updates to management and stakeholders—usually bi-annually or quarterly.

You can also provide details about your design system’s roadmap, how you plan to maximize value over time, and the resources you’ll need to implement new tools and procedures.

Read more about Proving the value of a Design System in this blog post from Somo. They also have a 1-hour webinar you can watch here.

How to Maximize Your Design System’s Value

Implementing a design system is just the first step. With your design system in place, you need to look for ways to maximize its value.

Adopt Tools to Maximize Value

One challenge many organizations experience is how to manage a single source of truth for designers, developers, and product designers? How do you minimize manual processes keep tools and design systems synced?

PayPal solved this single source of truth challenge by switching from a traditional design approach to UXPin Merge and syncing their Microsoft Fluent Design System with a Github repo—the catalyst for PayPal’s DesignOps.

UXPin Merge lets you sync code components with our design editor, so designers, product teams, and developers all work with exactly the same components. Designers and product teams use these components to build interfaces as they would with any other design system.

By switching to UXPin Merge, PayPal’s product teams were able to build new products and interfaces with minimal input from designers, and at a fraction of the time, it took using a traditional design tool. 

In fact, PayPal’s product designers build 90% of new products with designers providing advice and mentoring.

Finding tools like UXPin Merge to optimize your design system will provide efficacy while increasing adoption across the organization. 

Effective Governance

Governance is crucial for a successful design system and long-term consistency. Without good governance, a design system can quickly fall apart, causing more problems than it initially solved!

Depending on the size of your organization, it’s a good idea to create a design system team to establish and maintain your design system standards, including:

How to introduce new elementsPromoting patternsReviewing and adapting patternsReleasing design system updates

With these standards in place, you can ensure your design system maintains its integrity, consistency and continually provides value to the product and organization.

Creating and Managing Design Systems With UXPin

UXPin gives you complete control over your organization’s from a dedicated design system dashboard separate from the design editor. 

Here your design system team can create, manage and update the design system. They can also set permissions to prevent team members from making changes—allowing you to maintain governance standards and consistency!

UXPin has four design system categories:

Colors: set up as many palettes as your design system needs, for example, primary, secondary, success, etc.Typography: after setting these up in the editor, you can view your text styles, including font, size, and weightAssets: upload your logo and other assets in SVG formatComponents: like with topography, you can create components and save components in the editor

Use descriptions to provide documentation for development teams to implement design system changes.

Improve your organization’s design system and create business value with the world’s most advanced design, prototyping, and testing tool. Sign up for a 14-day free trial to experience the power and versatility of UXPin.

The post Design System Metrics: How to Measure the Value of Design System appeared first on Studio by UXPin.

UX Design Principles That Will Have Your Users Smiling

There are many important UX design principles organizations must consider when building products. These UX principles complement the design thinking process, placing the user at the center of all decision-making.

This article looks at 16 UX design principles organizations can use to build better products. 

UXPin’s advanced prototyping and testing features allow design teams to minimize usability issues to create better user experiences. Sign up for a 14-day free trial today!

Number 1: Focus on the User

While it might seem obvious to focus on the user, many designers still make decisions based on personal preference or bias rather than fully understanding their users.

Designers also get sidetracked with design and technical innovation that doesn’t always solve users’ problems or add significant value to the product.

The best design decisions come from understanding your users and fulfilling their needs. Why?—because you’re designing products for people!

Many experienced UX professionals believe focusing on users rather than humans creates a disconnect where designers forget they’re dealing with human beings.

Reframing the term to human-centered design helps UX teams shift from solving design and technical issues to helping people.

Building a framework based on design thinking principles will always keep the user front and center:

Empathy—know your humans (end users)Define the problemGenerate ideasPrototypeTest and iterate

You can read more about human-centered design here.

Number 2: Be Consistent

Design consistency is a vital ingredient to providing a good user experience. An inconsistent user experience means people will have trouble using parts of a product or might have to relearn how to use it with every feature release or update!

A designer’s goal is to build a product that fulfills users’ needs without worrying about inconsistencies, ultimately building trust and loyal customers.

Creating a design system can help develop consistency, so designers, product teams, and developers always use the same elements, typography, colors, components, assets, etc.

Don’t have a design system? Check out our 7-step process for building a design system from scratch.

Number 3: Easy to Digest

Create content and experiences that users can easily digest. Designers must recognize that people will always look for the easiest route. If you don’t provide something easy to use in this highly competitive tech landscape, someone else will!

If your product requires onboarding, ensure your documentation is easy to understand with step-by-step instructions.

The UXPin documentation is a perfect example. Firstly, we categorize instructions, so it’s easy to find what you’re looking for. Next, we organize content with subheadings, step-by-step instructions, and explainer videos, making the information easy to follow and digest.

Number 4: Don’t Make Users Think

Information architect and user experience professional Steve Krug states in his book, Don’t Make Me Think, “As a user, I should never have to devote a millisecond of thought to whether things are clickable or not.”

UX designers must follow design standards for product, app, and web design. For example, don’t hide navigation where users wouldn’t expect to find it. Make sure buttons, CTAs, and links are obvious to find and take users to their intended destination.

Creativity and innovation come from solving problems competitors haven’t thought of, not creating experiences where users have to relearn fundamental standards and processes.

How human psychology and cognitive load relate to UX design is something every designer must learn. Optimizing product design to minimize cognitive load will foster better user experiences and trust in the brand.

Number 5: Points, Lines, and Planes – Understand Visual Grammar

First defined by the Bauhaus school in the early 1900s, the building blocks of all design comprise of three core elements: points, lines, and planes.

The best UX designers understand how to use these three elements to minimize design complexity, making products easier to navigate thus creating better user experiences.

If you feel your designs are getting too complex and complicated, return to the basics and figure out how to create the same user experience using simple design elements.

Number 6: Identify the Problem First

Identifying problems comes from thorough UX research and testing—not designer intuition. 

UX researchers should keep asking why a problem exists to understand the root cause and find the right solution. Testing and iterating prototypes play a crucial role in helping to identify and solve problems.

If you don’t have proper prototyping and testing tools, you might get inaccurate results or even create problems that don’t exist!

UXPin is the world’s most advanced prototyping and testing tool. Designers can use a design system to build high-fidelity prototypes for testing quickly. Share prototypes straight from UXPin to identify problems through testing, make changes, and iterate! 

Sign up for a 14-day free trial to discover how UXPin can identify and solve user problems better than any other design tool.

Number 7: Simple Language Is Best

Language should be as simple as possible, and designers should avoid using jargon or insider terms that people won’t understand. Alienating people through complicated language is a quick way to lose customers!

Readability can have a significant impact on cognitive load, even for highly educated users. It goes back to point four, Don’t Make Users Think. 

According to the widely-used writing aid Grammarly, you should use eighth-grade language (13 years old in the United States) for written content.

Number 8: Have Empathy for Your Audience

Empathy is the heart of human-centered design—taking designers beyond understanding to connect with users on a deeper level. Designers use empathy so they can relate with users, their struggles, and their environment.

An empathy map is a UX research tool that helps designers empathize by identifying what users:

SeeHearThinkFeel

Teams use empathy maps during initial research and usability testing to identify different feelings and emotions. Understanding users on a deeper level can help identify problems they might not express or verbalize.

Number 9: Provide Feedback

Use microinteractions and animations to communicate with your users to provide feedback and context for their actions.

For example, if your product needs time to process an action, use a throbber or loading icon to let the users know to wait. Ensure error messages help users correct the problem, like highlighting missed required form inputs.

Use consistent feedback that aligns with brand messaging to ensure you always provide a positive user experience.

Number 10: Don’t Forget the Business Value

Designers must satisfy two entities, users and the brand. While focusing on users is vital to building a successful product, designers must also ensure designs create business value.

Business value and human-centered design often overlap. For example, a smoother, faster eCommerce checkout experience will improve the user experience (user-centered) while increasing conversion rates (business value).

Whenever you’re trying to solve user problems, always look for opportunities to create business value simultaneously.

Ewelina Łuszczek from the Polish-based agency, HERODOT, summarizes a designer’s obligation to business value in one concise sentence, “A great UX designer will manage to link user goals with business goals so that both users and the company reap benefits.”

Here are four great examples from a 2014 INFRAGISTICS study, The Business Value of User Experience:

Bank of America

Designer action: user-center redesign of the registration processResult: registration up 45%

Anthropologie (clothing company) 

Designer action: UX redesign of the checkout processResult: sales up 24%

GFK (consulting firm)

Designer action: buy button redesignResult: sales up $500 million

United Airlines 

Designer action: user researchResult: online ticketing up 200%

You can read INFRAGISTICS’ complete 12-page study for more information about creating business value through UX design here.

Number 11: User testing

Like point six, Identify the Problem First, user testing is crucial for designers to understand real user issues rather than making educated guesses.

Usability testing provides UX teams with valuable feedback and user insights, including:

Validating design concepts to solve users’ problemsExposing usability problems to fixDiscovering opportunities for improvementLearn more about the usersIdentifying business value opportunities

Teams should test from conceptualization to final design handoff—constantly looking for problems to solve and validating their solutions.

Learn more about testing in this article: What is Usability Testing and How to Run It.

Number 12: Visual Hierarchy

Visual hierarchy helps organize a product or screen layout so users can identify important elements and quickly scan to find what they need.

Designers create visual hierarchy by using distinct variations in color, contrast, scale, and grouping.

An excellent example of visual hierarchy is how writers use header tags to structure and organize content in an article—as we’ve done with this blog post!

Check out this informative article from the Nielsen Norman Group, Visual Hierarchy in UX: Definition.

Number 13: Accessibility

Accessibility is an important design consideration to make products inclusive for users with impairments or disabilities. Accessibility should also consider who Google calls the “Next Billion Users” (people using technology for the first time).

Some key accessibility considerations include:

Ensuring screen readers can interpret content and instructionsEnsuring colors and contrast don’t impair readabilityUsing a combination of icons and text so that all users understand links and navigationUsing legible fonts and text sizes

UX designers often forget about these considerations because design tools don’t provide accessibility checker functionality. 

At UXPin, “We believe no one should feel excluded from digital experiences because of their visual disabilities.” So, we built Accessibility Features into our design editor.

Sign up for a 14-day free trial and start building more inclusive products with UXPin!

Number 14: Give the User Control

Where possible, always make it easy for users to change their minds or edit the information they submit. For example, providing a back button on every screen in a checkout flow gives the user control to fix errors or make changes.

Never force people to commit to a decision they’ve made, and always ensure your product does not mislead users—whether it’s intentional or not.

Many organizations intentionally make it difficult for users to cancel a subscription by hiding the option in settings or making them contact support (where they usually try to offer incentives to continue the subscription).

Limiting the controls users have to change their minds or edit information creates distrust in the brand and pushes customers to find other solutions.

Number 15: Design Handoff

Although it’s an internal process, a poor design handoff can adversely affect users by causing unnecessary delays or introducing technical errors. 

UX teams, product designers, and developers must work together to develop processes and protocols, so design handoffs run smoothly with minimal errors.

UXPin Merge can help bridge the gap between design and development. Firstly, Merge allows designers to sync components with a repository (via Git or Storybook integrations) so design teams can build fully functioning high-fidelity prototypes—improving testing and reducing usability issues.

Secondly, UXPin’s Spec Mode facilitates an easy handoff process where developers can get detailed information about designs.

Inspect properties: grab CSS for elements and components, including sizing, grids, colors, and typographyDistance measurement: hover over elements for the distance between elements and the canvas edgeStyle guide: a summary of the product’s design system with the option to download assets when applicable

Explore the power of UXPin Merge and how to connect your preferred technology, either through our Git integration for React or Storybook for other popular front-end libraries.

Number 16 — Reevaluate and Revise

One of the beautiful things about UX design is that it’s constantly evolving, allowing organizations to improve products and user experiences continuously.

Once you launch a new product or release, the work of analyzing data and reviewing designs begins. 

How does the product perform when thousands or millions of people use it? Do users use the product as intended?Do users take shortcuts that you can use to improve their experience?What do heat maps tell you about user behavior?Where do users drop off on signups or checkouts?

When analyzing a product’s performance, teams should always look for ways to improve the user experience while exploring avenues to increase business value.

Summary

Hopefully, you can use these 16 UX design principles to improve workflows and create better product experiences for your users. This is by no means an exhaustive list, so we recommend you always look for ways to improve your processes.

UXPin is a collaborative design tool that can help foster healthy UX design principles for your company. It’s the only design tool that successfully bridges the gap between designers, product teams, and developers to improve every aspect of the UX design process.

Get started with a 14-day free trial to explore a new world of design with UXPin!

The post UX Design Principles That Will Have Your Users Smiling appeared first on Studio by UXPin.

How to Create a Product Prototype and Set Your Business for Success

Table of contentsWhat is a prototype?4 reasons why you should build a product prototype1. Finding your product-market fit 2. Adding value for users3. Attract investors4. Refining your designs Tips to effectively approach prototype developmentAgree on initial requirementsFigure out what you want to achieveRemember about wireframingCollect feedbackUse the right toolsHold regular team and cross-team meetingsApply the feedback to modify your MVPSummary

It’s no secret that consumers are becoming increasingly demanding when it comes to the services they pay for. In fact, a recent study by Microsoft reveals that 55% of respondents expect to see better CX year over year. The numbers are even higher when we look at customers under 34 and stands at 70%.

Now, what does crafting ‘better customer experiences’ mean, really? It comes down to building products around users’ needs – and one bad experience can be enough to turn them to your competitors. 

In order to make sure that you keep up with the pace and develop unmissable products, it’s essential to engage in product prototyping. 

In this article, we’re going to answer ‘what is a prototype’, why it’s a business-critical tool, and how to get started.

Let’s begin!

What is a prototype?

Have you ever struggled to communicate a thought in your head to others? If you have, then you know how frustrating it is when others cannot see or understand your vision. The best way to tackle this challenge is by designing a prototype, which will help you bring your idea into life. 

A product prototype is a sample version of your final product which helps you assess its market potential. It’s a good starting point prior to engaging in mvp development. While you can prototype both physical and digital products, in this article we’re going to focus on the latter only. 

There are two main types of prototypes you can build:

Low-fidelity prototypes

Low-fidelity prototypes are simple wireframes that can be either created digitally or hand-drawn – as they lack the detail and color, all you need is paper and pen to get started. Also known as lo-fi prototypes, they are perfect for visualizing basic functionalities or entire user flows, such as payment or adding items to a wishlist. 

These types of prototypes are perfect for rapid testing, and help designers collect feedback and engage in product discussions before committing to a single vision. 

High-fidelity prototypes

High-fidelity prototypes let designers create mock-ups that faithfully represent your vision. Although costing more than lo-fi designs, high-fidelity prototypes are colorful, engaging, and include interactive elements, such as links and CTA buttons. The accurate functionality gives you access to greater, more actionable data from users and stakeholders. 

4 reasons why you should build a product prototype

Let’s now take a quick look at the benefits that prototype development brings:

1. Finding your product-market fit 

A prototype lets you assess the feasibility of a product without spending unnecessary time and money designing something that doesn’t meet the users’ needs. Rather than rushing to launch, prototyping lets you pause, take stock, and examine how the market responds. You can then refine your designs and invest in developing a product that has a future. 

2. Adding value for users

Prototyping is user-centric. It’s about building a better product for users (otherwise, why would they use it?). Your designs should be subject to extensive user testing. It’s impossible to add value – to make their journeys memorable and their mood satisfied – without understanding who they are and what they want. Every scrap of feedback you receive is data that tells you where to refine to meet those head-on. 

3. Attract investors

If you’re seeking investment for a new product, prototypes are essential to securing that funding. Investors will want to see a working version of your design. As with gaining buy-in from key stakeholders in your organization, prototyping helps investors better visualize your end-product, making it a much more attractive offering. 

4. Refining your designs 

Feature creep (or mission creep) is real. And it is costly. When you start your design journey, it’s easy to get carried away with ideas. When prototyping, you can quickly gauge how users respond to these extra features, and whether they’re worth investing in. In other words, you need to chip away at everything that’s holding back the best possible user experience.

Tips to effectively approach prototype development

Now, you’re probably wondering what you can do to ensure successful prototype development. Here are a few tips that you can use:

Agree on initial requirements

When you and your team first lay the groundwork, your goal is to determine what you need to start fleshing out the idea. Treat prep-work for your MVP development just like any other business project. 

Decide on the team and the necessary skills. What tools do they need? Are there company guidelines to follow? What interface preferences are in place? 

Essentially, you’re preparing to prepare. You may not know exactly what you’re going to do, but by the end of this phase, you should know what you need to get started. 

Figure out what you want to achieve

Innovating ideas. Overcoming challenges. Making enhancements. These are all great reasons to engage in prototyping. What’s yours? 

Your product should solve a problem. Identify: 

A clear purpose for your product prototype – your goal should be data-driven and aligned to the wider business objectives.Whom this is for – your users, stakeholders, or both?What success (and failure) looks likeWhat you’re testing How you’ll collect feedback

Next, you must convey this vision. Prototypes are as much a communication tool as a design tool, and a well-defined objective allows for greater efficiency. In essence, work isn’t being duplicated or endlessly revised to match the original vision because everyone on the team knows what’s expected of them. Where possible, draw key stakeholders early into the conversations and the planning stage. This will help you boost internal buy-in and minimize objections.  

Once you have a clear objective, you can identify your priorities and deliver on them. 

A good way to picture this is as a project management triangle. Place Durability, Functionality, and Aesthetics at each point. 

If your prototype needs live data, real-time updates, workflows, and coding, prioritize Durability.If your prototype is focused on new or improved features and how they work, prioritize Functionality. If your prototype has to look great and meet branding guidelines, prioritize Aesthetics. 

So far so clear? Now, imagine pinning a star somewhere within the triangle, closest to the ones that are essential to the project. That star is your priority. 

Let’s imagine you’re re-designing a landing page. Aesthetics and Functionality will be your top priorities. However, you will likely start concentrating more resources on Aesthetics, after you’ve made sure you’ve addressed all functionality.

Using your project management triangle as a guide helps you figure out the best way to begin prototyping. 

Remember about wireframing

Make wireframing a core part of your design process. It’s tempting to rush past the wireframing phase. Now that you have a goal, you want to start prototyping your product. It’s an exciting moment. But building prototypes is about applying the brakes. At every stage, questioning, ‘is this right for our product?’.

You can create wireframes quickly, and they have a lot more business use than keeping it all in your head. They can be used as guides to elaborate on designs, or throw out unworkable concepts before wasting time on them. So, by taking the time to wireframe ideas, your product development process will increase in performance and efficiency. 

Collect feedback

As mentioned earlier, prototyping is user-centric. You want to know what they really think so you can design the best possible product. Honesty is the best policy. While it may hurt (and delay your launch), it’s better to receive a drubbing at the hands of potential users, then act on that feedback, than to roll out a product that doesn’t meet the users’ needs. 

Remember to ask questions that offer actionable insights. Look for areas where users can expand on their feedback. The more data you collect, the more powerful the end-product will be. Some of the ways to gather feedback include:

Focus groups 

Bring users together to discuss their experiences in an open forum. Focus group conversations often prompt responses that might otherwise have gone unsaid. However, it’s important to select attendees carefully. Ideally, it should be a diverse cross-section of your users to gain a fuller picture. 

Surveys

Platforms like Survey Monkey and Typeform let you make simple surveys with data at the back-end to help you make sense of all the feedback you collect. One of the biggest challenges is getting people to respond. Use email and social media channels. Keep surveys in a familiar format and on the shorter side. Tell users to expect them after testing, and follow-up with anyone who doesn’t get back to you. Offer incentives if you think this might help boost the response rate! 

Phone interviews

Listening to users talk about your product and hearing the language they use can offer valuable insights into your audience. However, it’s not always easy to reach people on the phone. In the first instance, check in with a message, offering a heads up that you’d like to call and chat about your prototype. Have your questions ready as a prompt, but don’t be afraid to let the conversation flow – it can sometimes be revealing. 

Use the right tools

Choosing the right tools is essential – no business wants to invest in software that doesn’t perform as expected or, worse, doesn’t get used at all. 

Tools like UXPin Merge can help you improve the prototyping process by driving collaboration and efficiency. Think of it as the link between design and development. Your designers build prototypes using the same fully interactive ‘live code’ components that your developers use to build products.

In this way, the idea and the implementation are consistent. What you see is what you get. This makes it much easier to collaborate on projects since everyone’s ‘speaking the same language’. 

If your focus is on driving efficiencies and streamlining processes, Merge helps you prototype with interactive elements based on your production code, speeding up the product development process. 

On top of that, UXPin Merge makes prototypes more interactive and consistent with the end-product, which improves user testing and gives you more reliable data. 

Hold regular team and cross-team meetings

It’s not always easy to keep your project on track. Communication is key, so it’s a good idea to run team- and cross-team meetings. An opportunity, really, to make sure everyone understands the objective – and everyone’s working towards the same goal. 

This is especially important for those actually working on the development of a prototype. Get your designers and developers together regularly. If your teams are already using a tool like Merge, these conversations will be easier and more relatable given that your designers are working on components that your developers have already prepared. 

Apply the feedback to modify your MVP

Once your prototype has been through user testing, it’s time to action the insights. This, after all, is what product prototyping is all about: gathering feedback to benefit the product. 

When studying the feedback – and deciding your next steps – factor in how these modifications align to the overall objective. Will it affect the project timeline? Are new features required? 

After another round of prototyping, test the new version. Remember to use the same batch of users as last time. This step is about refining, refining, and refining until you have a product your users just can’t do without. 

Summary

If you want to make your ideas an unmissable reality for your users, product prototypes are essential to your success. At the prototype development stage, your focus will be on planning and preparation powered by data – with your target audience at the heart of every design decision. If you’re searching for a tool that will speed up your prototype development process, and make collaboration between designers and developers smooth then check out UXPin Merge!

Discover Merge

The post How to Create a Product Prototype and Set Your Business for Success appeared first on Studio by UXPin.

Design System Governance – Scale Your Design

Some team members despise design system governance. They see it as a roadblock to rapid growth, creativity, and flexibility. However, design system governance can foster scalability and creativity if properly implemented while maintaining design and usability consistency.

Good design system governance prioritizes users before growth and profits. Company culture also plays a significant role in how a company implements a governance process that team members follow and embrace.

The tools UX and engineering teams also have an impact on design system governance. UX teams must update design tools to match changes to the final product, exposing the process to human error!

With UXPin Merge, teams don’t need to worry about updating two different design systems. UXPin Merge syncs our editor tool with code components from your Git repo or Storybook integration (allowing you to connect with React, Revue, Angular, Ember, and many more), eliminating the need for separate design systems and mitigating human error.

See how UXPin can enhance your design system governance!

What is Design System Governance?

Design system governance is the process and protocols for maintaining and updating a product’s design system.

Even minor changes, like changing an app’s close icon from an X to a — must go through a multi-step approval and implementation process.

Design system governance fulfills several purposes:

Maintain’s design and brand consistencyPrevents poor design decisions—leading to usability issuesEncourages team members to think creatively and try to solve problems with the tools on hand before attempting to make changesEnsures updates consider accessibilityKeeps the entire organization informed of changesUpdates digital product and design documentation

Without effective design system governance, editing and updating new components is a free-for-all that could create usability issues, inconsistencies and ruin the product’s reputation.

The Challenges of Maintaining a Design System

There are many challenges to maintaining a design system. Every organization must have a dedicated individual or team to manage its design system. 

Here are six common challenges to maintaining a design system and why an effective governance model is essential!

Company Political Forces

Sadly, even successful design systems aren’t safe from power struggles within an organization. Team members might call on executive power to either push or block design changes, overriding the initial decision of a design system team.

Conversely, governance keeps executives and other stakeholders well informed on design changes and the reasoning, making it easier to get buy-in and approval.

Managing Input From Multiple Teams and Departments

A design system is not only for UX and engineering teams. Product teams and other stakeholders share ownership of the organization’s design system. 

Managing all of this input can be challenging without a proper system of governance.

Design Systems are Often an Afterthought or Side Project

In many organizations, especially fledgling startups, the product’s design system isn’t a priority. It’s a side project a UX designer maintains in their spare time or over the weekend—feebly trying to maintain consistency with the demand for growth!

In this environment, a design system is prone to abuse and poor design decisions. Often UX teams have to undo changes to fix usability issues due to poor governance.

Poor Communication

Without proper communication between departments, teams, and individuals, a design system falls apart. For example, two teams might unknowingly work on the same task separately, or worse, crucial usability changes go forgotten because everyone thought “someone else was working on it.”

Design system governance fosters organization-wide communication, so everyone is updated and informed!

Reluctance from Team Members

When teams are reluctant to adopt the product’s design system, they choose the parts they like and develop a “better way” to design the rest. New team members or those not involved in creating the design system believe they can do better—thus undermining the hard work of others.

This reluctance can not only affect the product’s usability and consistency but create unnecessary conflict.

A governance model with multiple checks and balances prevents team members from hijacking a design system.

Reluctance to Change

Sometimes the opposite is true. Design system managers believe the system is fine the way it is, blocking any changes. A design system is never complete. It’s a work in progress that must evolve for the organization to grow.

The Single Source of Truth Dilemma

Many companies struggle with the single source of truth dilemma—working with a single dataset between all departments, primarily UX design, product, and engineering.

The UX team works with design tools, engineers with code, and the product team (often with limited technical know-how) uses all sorts of tools, including powerpoints, PDFs, and paper, to name a few. 

With this scattered workflow, maintaining a single source of truth is challenging. Often requiring additional staff and resources to ensure everyone is up-to-date. Even with good systems of governance, the single source of truth dilemma is a constant challenge.

Global payment giant PayPal solved its single source of truth dilemma with UXPin Merge. PayPal uses UXPin Merge to build and maintain its design system for internal user interfaces with code components from a Git repository.

When developers implement new changes, UXPin’s design editor’s components update simultaneously, so designers and engineers always work with the same design system. 

Establishing Design System Governance Standards

There are four primary scenarios where a design system requires changes or updates. These scenarios require a submission process where teams must ask a series of questions and tests before prototyping or requesting amendments.

Introducing new elements – Establishing a workflow for adding new elements ensures design system integrity while providing every team member with an equal opportunity to make additions. Promoting patterns – Patterns fall into two categories: one-off or best new practice. Teams must test these new patterns against what’s currently available before promoting them.Reviewing and adapting patterns – Every design system must have a team (at least two members) to review patterns before release. This review process ensures new elements meet the standards and practices of the current design system.Releasing design system updates – Rather than releasing new updates when they’re ready, teams must establish a release schedule for updates. A strict release schedule ensures teams follow quality assurance and documentation processes correctly.

An effective way to manage this submission process is through a simple decision tree that maps every step a change must follow.

This excellent example from Inayaili de León shows how Canonical’s team adds new patterns to their design system following a simple decision tree—from concept to release.

Inayaili admits that, like their design system, the decision tree is a work-in-progress that they update and refine as the product evolves.

A Step-by-Step Governance Model Example

There are many ways to approach design system governance, but here is a 10-step process inspired by design system guru Brad Frost:

Use what’s available – Product teams must exhaust every effort to find a solution using the current component library. This means a design system must be well documented and accessible to everyone. If the current design system does not fulfill the new requirement, teams can proceed to step two.Contact design system (DS) team – Product teams contact the DS team to discuss the problem and the proposed changes. Again, the DS team and product team will work together to find an existing solution. With intimate knowledge of the design system, the DS team might uncover something the product team missed. If there is still no solution, teams proceed to step three.Determine if the change is one-off or part of the design system – The product team and DS team decide whether the amendment is a one-off (snowflake) or part of the design system. One-off changes usually fall on the product team, while the DS team handles design system changes. Either way, teams must prioritize and schedule the changes.Initial Prototyping – Teams prototype and test product changes.Initial Review Process – The DS team and product team review the results from prototyping and testing. If both teams are satisfied, they proceed to the next step. If they determine the changes are lacking, teams return to prototyping and testing.UX & Dev Testing – Once designs pass the initial review, they go to UX and development teams for further testing to ensure the changes meet user experience and technical requirements.Final review – The product team and DS team meet again to review the results of UX and dev testing. If both teams are satisfied, they proceed to the next step. If not, they iterate.Documentation and schedule release – Teams document the new changes, update the changelog (e.g., Github), and schedule the release.Changes released – Changes are released, product version bump according to versioning guidelines, all teams notified (Slack, Asana, Trello, Github, etc.).Quality assurance – Product teams review the final changes for quality assurance.

You can see how this 10-step process will mitigate all of the six common design system challenges we outlined earlier. With multiple checks and balances, a design system maintains its integrity while communicating changes to the entire organization.

While this process solves many design system challenges, checks and balances don’t eliminate human error. Teams need a tool to provide a single source of truth!

Improving Design System Governance with UXPin

UXPin Merge bridges the gap between design and code, creating a single source of truth, so designers and engineers always work with the same tools.

Popular vector-based design tools don’t solve the problem. Designers and engineers must update and sync identical systems separately—an ineffective workflow prone to error.

UXPin is a code-based design editor syncing code components via Git or Storybook to allow product teams, UX designers, and developers to work with the same components—no need to update systems separately!

Lastly, because prototypes are code-based, product updates and design system changes are significantly quicker to engineer.

Ready to switch to the only design tool that fosters good design system governance? Discover UXPin Merge to get the most of your design system and keep all the design and code components up to date.

Discover Merge

The post Design System Governance – Scale Your Design appeared first on Studio by UXPin.

White Label Designs – All About Implementation, Design Systems, and New Technology

White label design has emerged as a popular strategy for many design and development agencies. White labeling allows agencies to build a single product that multiple companies can buy and rebrand.

It costs agencies a lot of time and resources to design and engineer tools, apps, and websites. So, building white label products is significantly more profitable than starting a new design every time.

Today, we will explore white label design and demonstrate how UX teams and developers can collaborate to build amazing white-label products with UXPin. Keen to jump in and start designing? Sign up for a 14-day free trial to start exploring UXPin today!

What is White Labeling

White labeling is the process of rebranding a single product or service for multiple companies to sell as their own. White labeling benefits the manufacturer and the reseller.

The manufacturer can focus on production and not worry about marketing and selling, while the reseller can outsource production and focus on selling products through its sales and distribution networks.

A good example is Amazon’s Basics range. Amazon buys white label products from multiple manufacturers and sells them under the Basics brand. Amazon doesn’t have the means (or desire) to produce products, but they have a massive global retail network to sell Amazon Basics.

What is White Label Design

White label design services follow a similar concept. A creative agency builds tools, apps, and websites (templates) that companies can purchase and rebrand.

For example, a WordPress theme is a white label product. An agency or solo designer/developer can build a WordPress theme and sell it on marketplaces like Themeforest. Any company can buy what is essentially a white-label website and rebrand it accordingly—changing fonts, colors, content, etc.

Pro tip: Themeforest is the biggest white label product marketplace in the world. It’s a fantastic place to explore white-label product niches and see how you can improve on Themeforest’s best sellers.

In theory, white label design sounds simple, but in practice, it’s very challenging.

Challenges of White Label Design

One of the biggest challenges of white label design is making a product that appeals to a broad demographic that any company can rebrand as their own.

Making something for everyone is a lot harder than designing a product for a specific demographic.

White Label Products Must be Re-brandable

Usually, a digital product focuses on the user. But a white label product must consider two users—the end-user and the company buying the white label product.

So, the primary objective is to make a white label product re-brandable. A company must have the ability to make edits to the design system rather than compromising the brand to fit the product.

Flexible Information Architecture

Another challenge for design teams is building a white label product that provides many page layouts and navigational possibilities while maintaining the flexibility to adapt to the brand’s requirements.

Brands should have the ability to choose which pages and user flows they need to build their final product.

Conversely, agencies must understand the final users, so they don’t provide too many redundant pages and features. Too much flexibility and customization can increase costs and possibly introduce unnecessary problems.

Accessibility

UX designers must also consider accessibility, so products comply with WCAG (Web Content Accessibility Guidelines) standards.

UX teams will need to test their white-label design on a diverse range of participants to ensure the product is accessible.

The solution to these challenges (and the key to effective white-label design) is a flexible design system brands can easily customize with little or no code changes.

White Label Design System

A successful white label product features a flexible, well-structured design system that can adapt to any brand’s style guide. The goal is to facilitate significant changes with the slightest design system edits.

For example, changing the color palette with a few HEX code modifications.

Following atomic design principles can facilitate the flexibility required for a white label design system, starting with the smallest elements, which designers can build components for multiple page layout possibilities.

Instead of limiting designs to specific pages, designers use components to build features and layouts—providing customers with flexibility and customization through simple drag-and-drop changes.

We can break a white label design system into three parts:

Elements – colors, typefaces, icons, grids, spacing, brand assetsComponents – buttons, tabs, page titles, form fieldsModules – cards, forms, heroes, charts, tables, carouselsElements

Elements are the smallest pieces of a design system, but they play a critical role in maintaining consistency and facilitating customization.

Designers must allow easy color and typeface customization while enforcing strict rules for icons, grids, borders, and spacing to achieve design consistency.

Components

Components are the parts of the design system users will interact with the most. So, here designers must focus on the user more than the brands.

Flexibility is still important at the component level, but the changes are more subtle. Brands might change borders, corner shapes, or swap content from left to right and vice versa to customize components.

Modules

With flexible components, designers can build the modules to create any page layout the customer requires. If designers applied the atomic design principles correctly, building pages should be a matter of drag-and-drop.

Every change and customization at the module level should be drag-and-drop. Designers can customize modules quickly by swapping, adding, or removing components.

Customizing a White Label Design System Workflow

If designed correctly, it should be quick to change a white label design system to meet a brand’s requirements. 

Designers start at the element level—changing colors and typography and uploading brand assets.Next, designers modify components—adjusting component shapes (circle/rounded/square) and content configuration (for example, adding or removing an icon from a CTA button).Designers use modules to build page layouts according to the customer’s requirements.

Instead of starting from scratch for every client, designers can use building blocks from a flexible design system to quickly design a white label product.

Agencies might build several white label design systems to accommodate various industries like restaurants, fitness, finance, and tech.

The Importance of Theme-Switching for White Label Design

Theme-switching is vital for a white label design system to accommodate different kinds of brand aesthetics. Most theme-switching changes happen at the element level and affect the secondary color palette.

Basic theme-switching requires two secondary color palettes:

Light – light background with dark elementsDark – dark background with light elements

Designers must also use corresponding color scales to achieve accessibility and maintain consistency.

The problem is that most design tools don’t provide an easy solution for theme-switching. It isn’t easy to switch themes with a vector-based system. But, with a code-based design tool like UXPin, designers can theme-switch with a few clicks! 

Theme-Switching Made Easy With UXPin

With a bit of code preparation and utilizing the power of UXPin Merge, designers can use styled-components to inject Javascript into the design’s CSS to create editable theming capabilities.

UX designers can use UXPin’s theme switching for customizing other parts of the design, like quickly changing from circle to square-cornered buttons. It’s quick and easy!

Using UXPin Merge for White Label Design

Aside from theme-switching, UXPin Merge significantly improves white-label prototyping. Using code components, designers can build fully functioning prototypes fast!

Prototyping with UXPin Merge gives usability participants an accurate model with final product functionality, leading to high-quality testing and meaningful feedback.

These fully functioning prototypes can also help agencies to sell white label products to clients. Designers can impress clients by switching themes, use actual data (relevant to the brand), and make quick, on-the-fly changes during presentations.

Designers and engineers have two options for connecting code components with UXPin Merge:

Git repository—currently only supports React componentsStorybook—supports React, Vue, Angular, Ember, and many more

By using code components, agencies can ship final products faster with UXPin—saving resources and increasing profits!

Final Thoughts

Hopefully, this article has given some insight into how you go about white labeling. A carefully planned design system is the foundation for a successful white label product. 

Like any design, UX designers must test white label products thoroughly to ensure the components and modules will work across multiple page layouts. Teams can use UXPin Merge theme-switching capability for testing both light and dark variations.

Getting Started with UXPin Merge

Here’s how easy it is to start building fully functioning high-fidelity white label prototypes with UXPin Merge.

Choose if you want to integrate UXPin with your Git code repository or Storybook.Request access. Integrate with Git repo or Storybook. Drag and drop fully functional components.Make usability changes, test, repeat.Pass the prototype link to developers with all the ready component code they just need to copy into dev tools.

Get started with UXPin today and change how your design team builds, tests, and ships white label products. Increase productivity and profitability with the power of UXPin!

The post White Label Designs – All About Implementation, Design Systems, and New Technology appeared first on Studio by UXPin.