Wendy Tapper

Designer Director @swayeformusic,
Technology Enthusiast, Dog Lover

[UX Links @uxlinks]

Excellent Guide to Learn How to Create a Design System 🚀🔖
A super useful interactive and step by step guide to Set Up a Design System, with resources, useful tools and checklists!

Overview:

1. Where to start
Creating a design system isn't an easy task and can be overwhelming. There's no one-size-fits-all process, and this mini book outlines what I've found to work best. You will need to tweak the steps, but I'm confident you'll know how to adapt them to your needs once you understand the logic.

Design system brings:
- One source of truth
- Maximized effectiveness
- Increased ROI
- More time for important stuff

2. Design audit
A design audit is like a magnifying glass for your brand's visual elements. It takes a hard look at everything your company puts out there, ensuring your brand's image, vibe, and messaging are rock-solid and consistent across the board. You want your audience to know it's you, whether they're scrolling through your website or browsing your ads.

In short, with a design audit, we want an overview of where our design is inconsistent and inefficient.
A design audit isn't just a nice-to-have; it's essential for any brand that wants to stay ahead of the game. Here's the deal: you need an overview of the product to start with the design system.

3. Structure
Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.
- What does the overall identity look like?
- Why is the cart abandonment rate so high?
- Why are people not completing key user flows?
- Are the design, color palette and typography consistent throughout all materials?
- What do the visuals communicate and are they in sync with our target audience and our business objectives?

4. Design Tokens
Think of design tokens like nicknames for your design elements.

Instead of using hard codes like color hex codes or pixel sizes, we give them names. These names, or 'tokens', store design details in a simple, easy-to-read way. They work with all style files in your system, making your design consistent and easy to scale.

These tokens can be linked to create a theme. This makes it easy to grow your design and keep it consistent across all platforms, like Web, iOS, and Android.

The idea of design tokens started with Salesforce’s Design System in 2014. Now, they're the smallest but most important part of any design system. They're like the building blocks of your design language, making sure your brand looks the same across all platforms.

In short, design tokens are the backbone of your design system. They keep your brand's visual style consistent and easy to manage.

5. Collaboration
How to start working together?

It is easy to understand the process and structure.
It is easy to be productive.
It is easy to contribute.
It is easy to connect.
Everything just works.
However, it takes hard work to get there. Tell me something new, ha?

Collaboration doesn't happen organically. It is a continuous discovery of making things better and more effective, combining time, effort, and care.

Setting up a team
When setting up a team, the most popular question is always, "How many people do we need for the design system team?". Well, you can make a lot of magic with a small team or overengineer everything with a "perfect one."

But in reality, you have time or budget or, if you are lucky, both.

6. Documentation
It's time to create a "map with pin-points" and instructions on where to find things. Documentation is where we collect assets, source files, code, design principles, animation styles, and guidelines for using the components.
Documentation is useful only when people know how to use it, and we often need to remember that. We are talking a lot about people working on the design system but not design system consumers. They need to know where to find the detailed structure of the assets, variants, hacks for optimized work, or recommended plugins. Have that in mind when choosing a platform and writing the instructions.

7. Metrics
Gathering the data
Metrics are the language of stakeholders and the evidence that we are maximizing the usage of our design system. Why and how to start measuring? Let's go step-by-step.

See the full website: https://t.co/Jzz3MamKXl

Great work by @rominakavcic

#ui #uidesign #ux #uxdesign #design #productdesign #designsystems #uikit #sketch #figma #adobexd #google #apple #ibm #airbnb #audi #shopify #ecommerce #atlassian #webdev #ios #materialdesign #iphone #react #js #css

[UX Links @uxlinks]

Learn about the 6 stages of the UX design process 🚀🔖
Following the UX design process doesn’t just give users an intuitive and pleasurable experience—it poses an opportunity for designers to iterate and improve their designs.

What is UX design?
“UX”, or “user experience”, is how a user feels when they use a specific product or service. It encompasses a variety of feelings including emotion, senses, and physical interaction.

Why is UX design important?
Good UX design creates a positive experience for your user by anticipating—and fulfilling—their needs.

The UX design process in 6 stages (brief overview)
Stage 1: Understand
Before you get started with any project, you need to get the basics down first. That means understanding two crucial elements:
- Your user
- Your brand

Stage 2: Research
Your user research is going to be the life blood of your project. The things you discover and unearth during this stage lays the foundation for how your entire project will turn out.
- Interviews
- User/Focus groups
- Surveys
- Usability Testing

Stage 3: Analyze
In this stage, you’ll be using all of the information you gathered in the previous two stages to analyze and distill the most important elements.

Here are two ways you can analyze your research:
- User personas
- User journey map

Stage 4: Design
Now, it’s time to actually build out your design. That means building things like:
- Site map
- User flow
- Mockups
- Images
- Icons
- Colors

Stage 5: Launch
Once you’ve reach the point where all your assets are ready to ship, it’s time to implement; pass everything to the development team who will create a high fidelity version of the user interface.
Once it is delivered, there are several ways you can go about making sure that the product is perfect (or close to it):
- User testing
- Beta launch
- Internal testing

Stage 6: Analyze (again)
Once your product launches, it’s time for another round of analysis.
Some questions you might ask yourself:
- Where did our process go right? And why?
- Where did we struggle? And why?
- How are our users responding to the product?
- Did it solve their issues and pain points?
- Where can we improve the product?
- What lessons can we take away from this process for future products?

Read the details here:
https://t.co/lAvJpJPFUo

#ui #ux #uidesign #uxdesign #userexperience #uxui #productdesign #prototyping #uxresearch #usertesting #research #userresearch #design #designresearch #digital #designthinking #webdesign #appdesign #uxprocess #uxstrategy #agile #mvp #business

[Anthony Vicino @AnthonyVicino]

Storytelling is a superpower.

Steve Jobs said:

"The most powerful person is the storyteller."

Unfortunately, most people don't know how to tell a good story.

So they are at the mercy of those who do.

Let's change that:

Here's 5 principles for telling an amazing story:

1. The Hook

This is THE most important part of your story.

It's what gets people invested enough to come along on the journey.

A great hook does two things:

• Plants a Seed of Intrigue
• Compels the Audience Forward

Best way I've found to accomplish both is through Open Cognitive Loops.

But, before I break down how to Open Cognitive Loops, let's talk about the second principle:

2. The Image

The power of story is that it unlocks something inside each of us:

A blank canvas upon which your words can paint.

Each brush stroke must be placed with intention.

Each detail crafted with care.

Get this part right and you can design worlds and characters in your audience's mind that they feel more connected to than the drab reality of their day-to-day lives.

3. The Lesson

Have you ever told a story that started strong but petered out midway 'cause you couldn't figure out how to wrap it up?

So instead, it just ends on a blech note with something like:

"Yeah, I guess you just had to be there."

Oof... I feel ya.

We've all been there.

The problem?

You committed the most deadly of Storytelling Sins:

You told a Story without giving it MEANING.

When most people tell a story, they're simply reciting events in a chronological order and then leaving it to the audience to imbue it with meaning.

Great storytellers don't leave this to chance.

They tell you exactly WHY this story is so important and WHAT they want you to take away from it.

Here's an example from a story I told the other day about my cat nearly dying:

“The next morning we were scheduled to put him down.

I remember feeling so impotent and shallow because I’d put a dollar value on the life of a loved one.

Now, I get it…

Sparta is just a cat.

But that’s not the point.

Because it’s about the larger truth:

I wasn’t in a position to help if my dad, or my partner, or my siblings, were ever to fall sick.

I resolved at that moment, money would never again be the reason I couldn’t help a loved one in need.”

Alright, so what should you do if you're not sure what the meaning of your story is?

Easy...

Don't tell it.

Seriously.

A story without meaning is just a list of events.

Nobody's life has ever been changed by a list.

4. The Two Journeys

Every great story has a character striving to achieve a goal.

Frodo must destroy the Ring.

Harry must kill Voldemort.

Luke must redeem his Dad.

You must get a loaf of bread from the grocery store.

(not all stories are epic)

Now, within the struggle to achieve these goals, our character is actually on TWO journeys.

1. The External
2. The Internal

The stories I listed above are The External.

These are easy to visualize and the one that most of us think about when it comes to storytelling.

However, The Internal struggle is the journey our character must go through in wrestling with who they are in relation to the world.

THIS journey is the one that imbues our story with deep resonance.

Without it, if we merely focus on The External struggle, we end up with a Michael Bay movie like The Transformers where everything is blowing up and yet nobody gives a shit.

Let's take a step back to my Sparta-story...

The External struggle is that Sparta is dying and needs surgery I can't afford.

The Internal struggle is realizing I hate myself because I've put a price on my loved one's life.

The key to telling a great story lies in your ability to resolve both the External and Internal Journey.

If you can master this, you can make an impactful story out of anything...

Even something so small as picking up a loaf of bread from the grocery store.

5. Closing Loops

At the beginning of this post I said that great stories plant a seed of intrigue and compel the audience forward.

To accomplish this I said we Open Cognitive Loops.

But I didn't tell you what an Open Cognitive Loop is...

Instead, I showed you (by opening one).

Seriously, go back and look to see how I did it.

See, an Open Cognitive Loop is simply a question that needs answering.

One of the ways to keep your audience on the edge of their seat and invested in the story is to keep opening and closing cognitive loops until the very end.

But the truth is, ending your story is often the hardest parts.

So here's a trick:

Next time you find yourself meandering lamely towards an ending and can't figure out how to wrap things up...

Use these words:

"I share this with you because..."

And then tell them exactly why you shared it with them.

This is called The Tie Down.

It brings everything full circle and gives a sense of closure (which is a story in and of itself for another day).

Here's how it works in real time:

I share these five principles of storytelling with you because I believe every single one of us has a story inside...

A story with the potential to change the world if only we knew how to tell it better.

I believe Storytelling is a Superpower...

And I can't wait to see what you do with yours.

Yo, if you want more stories about business, investing, and personal development, give me a follow @AnthonyVicino .

[UX Links @uxlinks]

20 Popular Chrome Extensions for UX/UI Designers & Devs 🚀🔖

WhatFont
Fonts Ninja
SVG Grabber
Heurio
Sizzy
Window Resizer
Dark Reader
Dark Mode
Site Palette
Colorzilla
Color by Faros
ColorPick Eyedropper
Css Viewer
Spectrum
Savee
Sitesee
Unstack Style Guide
Muzli 2
JSONView
React Developer Tools

#ux #ui #uxdesign #uidesign #productdesign #chrome #google #html #css #js #visualdesign #typography #fonts #mobile #webdesign #rwd #design #userexperience #designsystem #business #marketing #webdevelopment

[Elizabeth Laraki @elizlaraki]

In 2007, I was 1 of 2 designers on Google Maps.

The app was growing like wildfire.

But it was becoming a cluttered mess — new features were being shoved into every pixel.

Here’s the 4-step process we used to redesign Google Maps into one of the most loved apps in the world: 🧵

–––

But first, it’s important to understand it is normal to build a product based on the underlying technical structure.

In 2005, Google Maps queried one of three databases for any search:

• Maps data
• Local business data
• Directions data

Not surprisingly, the first version of the website had three tabs, one for each of these databases: Maps, Local Search, Directions.

–––

By 2007, Google Maps still wasn’t the dominant mapping application.

But it had hit PMF, its user base was growing quickly, and we were rapidly adding new content and features like:

• Satellite and Terrain views
• Streetview, 3D buildings, Traffic
• Editable map data, Reviews, Photos
• Transit Data

We were wedging new features into any space we could find in the UI.

It became clear the user experience was suffering and the product was growing increasingly complicated.

At that time, our VP, Marissa Mayer likened Google Maps to a Christmas tree that we kept adding more and more ornaments to until it started to fall over…

We tried many different ways to rearrange the UI to accommodate new features.

Eventually we had to step back and rethink Google Maps based on what we knew was working, what brought people to the product, and what we believed the future might look like.

–––

These were the 4 key steps we took to simplify the design of Google Maps to be the intuitive, durable, much-loved product that 1B people still use today:

1. Deconstruct

We wrote down all of the product’s current and upcoming content, features, and functionality and loosely grouped them into categories:

• Core features — The most common tasks people came to do (search, get directions, find businesses)

• Aspirational use cases — Tasks we wanted people to start doing (adding their own content, correcting inaccurate information, using Maps to explore new places, etc.)

• Global actions — Actions that impacted the entire page (print, share, save, etc.)

• Use case specific actions — Actions that were relevant only within a specific use case (eg while getting directions, being able to drag a route or add a destination)

• Related features — Things that weren’t a part of Google Maps at the time, but existed and were closely related. (eg transit information, business searches on https://t.co/M0Af8Qy8uQ)

–––

2. Reframe

We leveraged a combination of user research, business goals, and our own intuition to make the product better, simpler, and scalable over time. We focused on understanding:

• What brought people to the product
• How they navigated through the product
• What was working well
• What flows were confusing
• What things were missing
• What information was valuable when
• What functionality was redundant

We emerged with several key points:

• “Searching” was the most pivotal task in Maps

• Searching addresses, businesses, parks, mountains, cities, etc could all be thought of as searching for “places”

• Getting directions was important, but rarely happened between two specific addresses. Directions searches usually had a known start or end point, like home or work. It was also more intuitive to be able to search for directions by a place name e.g., Carmel Library rather than having to look up the address first.

• It was strategically important for people to be able to contribute content to Google Maps and to be able to explore the world around them.

–––

3. Reconstruct

Based on what we learned, we then explored ways to reshape the product.

We held these general usability principles in mind:

• Entry points to core use cases should be prominent
• Flows within core use cases should be intuitive
• Common actions, interactions, and views should be consistent
• Contextual actions should be accessible when relevant

This is one exploration of clustering tasks and connecting relevant content:

Our explorations of how to reconstruct the site around people’s needs and flows led to several key design changes:

• There would be only one search box for everything

• Directions would live as a secondary feature

• Other features would appear in context (eg, transit became a mode within directions)

–––

4. Scale for the future

This was 2007. We knew the product would continue to evolve, the information set would grow exponentially, and the feature set would continue to expand.

But by focusing on key use cases and folding information in to the UI where it was relevant, we created a framework to support future growth.

16 years later, Google Maps has continued to evolve, yet is still a simple, intuitive, much-loved product that 1B people use around the globe.

For more on design, follow @elizlaraki

[Nathan Baugh @nathanbaugh27]

Steve Jobs said:

“The most powerful person in the world is the storyteller.”

Here’s the storytelling framework Jobs used (that you can too):

[Alex Brogan @_alexbrogan]

Hard skills get you hired.

But ChatGPT prompts get you promoted.

11 prompts to accelerate your career:

[Wendy Tapper @wendytapperux]

Product visioning through storytelling https://t.co/YLBLimxKLS #designinspiration

[Wendy Tapper @wendytapperux]

UI/UX Design Challenges and Ways to Mitigate Them https://t.co/XTrPZbqVad #technology

[Wendy Tapper @wendytapperux]

Microsoft rebuilt Teams from the ground up, promises 2x faster performance https://t.co/lkFAjbXWY6 #microsoft

[Wendy Tapper @wendytapperux]

Redesigning Amazon Alexa https://t.co/3ZrqywRZ3T

[Wendy Tapper @wendytapperux]

The Psychology of UI/UX Design: Creating Engaging and Effective User Experiences https://t.co/s7VOuBvu8f

[Wendy Tapper @wendytapperux]

When and how to use HTML sitemaps for SEO and UX https://t.co/EFmZilSwPY #seo

[Wendy Tapper @wendytapperux]

The Importance Of Split Testing In Conversion Rate Optimization (Cro) And How It Works https://t.co/wdRHQFpCO6

[Wendy Tapper @wendytapperux]

The industrial metaverse: Are we there yet? | GTC panel https://t.co/zCu9YuEs8C

[Wendy Tapper @wendytapperux]

Reddit Co-Founder Alexis Ohanian Bets Big On Solana And Web 3.0 https://t.co/t7cuuOKXxv

[Wendy Tapper @wendytapperux]

Anthropic Introduces Claude: An AI Assistant Redefining Trust, Helpfulness, and Harmlessness with Next-Generation Technology https://t.co/DOOJHCbxpc #artificial_intelligence

[Wendy Tapper @wendytapperux]

Transform Your Career: Become a UX Designer in Just 6 Months — A Beginner’s Roadmap https://t.co/KZ1gdVQBTa #uxui

[Wendy Tapper @wendytapperux]

The loyalty loop: building strong customer relationships in the digital age https://t.co/9TEytv48uL