UXpin's Blog, page 84

Stages of the Design Thinking Process

Designing a website or app is not something you just jump into. It requires some planning and laying out the design and ideas you may want to use. There are ups and downs in the design thinking process and you may need to come up with a few different ideas. In the end, the project will be that much better for having taken the time.

There are five basic steps in the design thinking process and each one is equally important.

Step 1: Find what your users need

Step 2: Determine the issue you want to solve

Step 3: Come up with potential solutions

Step 4: Create a prototype of your best idea

Step 5: Test your product repeatedly

Step 1: Find what your users need

This is the beginning stage, when you need to figure out just what people actually want and need. If you skip this step, your project won’t get very far. Most developers will take the time to hang out where their target market is, on social media, blogs, chat streams, forums, etc. This gives you a much better idea of what is going on in their world and what they truly need help with.

Once you have a general idea of what is going on with your customers, you may wish to interview some of them. This allows you to ask some market research questions and build your audience avatar.

Step 2: Determine the issue you want to solve

What is the biggest problem your target market is facing? What can you do to alleviate their pain? This is the next big step and it is where you define the actual problem at hand. This will help you narrow down your possibilities.

Again, you need to be in contact with your ideal customer at this point, to ensure you are getting their thoughts. You may think you know what they want and need, but unless that is confirmed by the actual customer, it may not be profitable. It’s always best to check with the people who will actually be using the product. They are your best method of checking what the market is like.

Step 3: Come up with potential solutions

Now that you know what people want, what causes them pain, and have narrowed down the problem to just one, you are ready to solve the problem. This requires brainstorming and you may want to do it with someone else to ensure you have as many minds working on the problem as possible.

It’s important to figure out the best way to solve the problem. Chances are, you will come up with more than one way to resolve the issue, but you won’t pursue all avenues. Figure out which option is the best one, even if that means talking to your target audience once more to get their feedback.

Step 4: Create a prototype of your best idea

This step can be fairly simple in the beginning. You just need a prototype that will give the basic idea of its function for the first stage. This will be something you can show to your target market and find out what their thoughts are, before you go back and work up a more detailed prototype.

Each level will take more time and will be closer to the end product. If you manage this step correctly, you should be adapting the product at each stage to improve it. Every adjustment will bring it closer to its final form, shaped by feedback from those who will actually be using it in the field.

Step 5: Test your product repeatedly

Finally, you have your completed product. Depending on how complicated it is, you may reach this point in a few months, or in a few years. There’s no limit to how fast you have to get through the changes and upgrades.

Testing the product will allow you to find the glitches and mistakes that need to be repaired before it goes to market. A limited run release may be helpful in finding the worst problems. Your customers will let you know just what they think and will give you ideas for fixing everything and making sure it is running as close to perfect as possible. From there, you can finally release your brand-new design.

The design thinking process may be long and drawn out, but it saves a lot of time in the end. You’ll find yourself moving step by step through the various parts of the process with the end being a great product.

UXPin has everything you need to create your prototype app faster than ever before. Speed up the process and you’ll find it easier to get to the testing point and then launch. If you’re planning to start designing your own app, you can do that at UXPin. It’s free to join.

With Merge, UXPin’s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. UXPin Merge allows you to design with React components to achieve full consistency with the final product.

The post Stages of the Design Thinking Process appeared first on Studio by UXPin.

Join our free webinar “11 ways to start your inclusive, accessible design toolkit”

We’re happy to let you know that we’re hosting a free webinar “11 ways to start your inclusive, accessible design toolkit” with guest speaker Piotr Źrołka, Accessibility Expert, UX Strategist, and CEO of Kinaole.

Date and time: Jan 28th, 2021 at 10:00 AM PST

Join now for free!

During the webinar you’ll learn:

How inclusive methods can build high-performance design solutions that work for all, How to start building an inclusive culture, Practical tips for accessible web design.

The post Join our free webinar “11 ways to start your inclusive, accessible design toolkit” appeared first on Studio by UXPin.

Video game prototyping – How To Do It and Why You Should!

Video games might just be the most sophisticated and complex type of art today. It takes a perfect blend of technical skill and creative inspiration to develop an AAA title. Video game prototyping is one technique to help build a clear vision of the game you want to create early in the process – with minimal time and effort invested.

With so many factors, influences, and moving parts, it’s essential to have the flexibility to pivot or alter your initial ideas if they are no longer workable.

Perhaps, most importantly, knowing how to make promising prototypes can be the difference between whether your game gets picked up for development or not.

Luckily, we already have a set of techniques that deal precisely with this problem: Prototyping. More specifically, in this case, video game prototyping.

In this article, we’ll be looking at some of the most popular types of video game prototypes and how to use them to create a game as part of an iterative development process.

Popular and effective video game prototyping techniques

To keep things orderly, we’ll be looking at these prototyping techniques according to increasing fidelity and complexity levels.

Paper prototyping

The idea of simplifying your game into a raw, tabletop paper prototype might seem nearly impossible at first. The trick at this stage is to find the essence of your game to create the most minimal model that people can interact with.

The benefit of paper prototyping is that it’s the cheapest and most accessible type of prototype to set up. Paper video game prototypes can be little more than doodles that approximate the size, position, properties, and actions of elements in your game.

You should use paper prototyping to answer some fundamental questions about your game, for example:

What is the orientation of the game world? For example, 2D or 3D environments.What is the orientation of the camera/characters? E.g., top-down, first-person, etc.In what dimensions can the character move in the world?What will your inventory system look like? E.g., a list of items or grid?What menu systems will you use?

A great example is if you were to recreate Tetris, how you could simply use different cutout shapes of papers that players can move around to play. A very innovative application of paper prototypes was made by the Spore team, who used paper cutouts of limbs, organs, and other parts that players could use as mutations to add or remove.

Wireframe prototyping

Ahh, wireframes. The staple of UX designers, particularly when it comes to website or mobile app interfaces. However, they can be just as useful in the early stages of developing a video game. 

If you squint your eyes a bit, you should just be able to make out the direction the project is going. However, a wireframe is NOT a piece of art. It’s a low-fidelity prototype meant to provide a better understanding of the layouts or mechanics of a game. 

A video game wireframe can accurately relay the placement and relationship between elements, like characters or environmental models. In-game menus, loading screens, or other mostly static experiences (such as conversations or Pokémon-Esque battles) can also be more accurately laid out. However, these representations should be free from the constraints of artwork at this stage.

Using a grid-like surface can help figure out scale and placement.

Wireframes will help you to start to define your game in terms of:

The playable/non-playable characters (e.g., types of characters)The UI or HUD display (e.g., health and ability bars)Some of the mechanics or set pieces in the game (e.g., dialogues)

Including artwork at this stage would lead to too much time and effort invested. It might also set you on a path that’s more costly to turn back from.

As an example, wireframe prototypes should be simple enough to create using something like Google Slides or PowerPoint. However, tools like UXpin allow designers to create wireframes much quicker while also being able to collaborate in real-time. Each static page may have buttons that take you to predetermined other static pages, depending on what you click.

Greybox prototyping

Greybox prototyping can be as simple as replacing the 2D representations with equally generic 3D ones. However, even for 2D games, the difference is that a greybox prototype will include some of the final product’s physics.

Example of a Greybox Video Game Prototyping Environment

For Burnout-type racing games, this may just mean grey cubes ramming into each other. However, you might already include some of the final steering, collision, and health/damage mechanics. If wireframes and mockups are meant to start showing you what a game will look like, greybox prototypes will show you what it feels like. You can also start building in the tracks or actual typography, laying the groundwork for creating individual levels.

Again, greybox prototypes shouldn’t be bogged down with finalized artwork. Even relatively simple texturing and styling for 3D models can be time and energy-consuming.

The cool thing about greybox prototyping is that you can start using the final tools you’ll be using to build your game. For example, you could use Unreal Engine with simple, geometric static mesh models and imported physics Blueprints. 

As you can imagine, it’s nearly impossible to script dynamic actions using paper prototypes or wireframes accurately. Greybox prototyping is also vital because it will help you analyze whether these interactions work and validate many of the initial ideas for your mechanics. You might find that many actions don’t turn out as you thought it would, thanks to the emerging complexity of adding physics to the mix.

What about rapid prototyping?

Rapid prototyping is a design methodology that depends on developing cheap and increasingly sophisticated prototypes in quick succession. It’s not exactly a new idea but is often viewed as a fun and exciting way to produce entertaining and successful games quickly. World of Goo is a famous example. The first level, Tower of Goo, was created within seven days as part of an Experimental Gameplay Project. 

The process involves rapidly going from one prototype to a slightly higher fidelity one in a short period of time. You continuously refine your ideas in small increments and iterate as many times as necessary. Video game prototyping is a more hands-on and intuitive game development process than brainstorming. As a bonus, it’s exhilarating to see how a single idea can change into a fun and complex game.

In conclusion

So, where do you go from here? Well, the logical next step would be to finalize your artwork and visual assets. If you’ve refined your physics and mechanics using greybox and high-fidelity prototyping techniques, it will be relatively simple to start importing your assets.

All-in-all, finalizing your game should be a much less stressful process. Using video game prototyping techniques to test and improve your initial ideas continuously, you should be much more confident in your ability to realize a working and, most importantly, fun game.

But more importantly, creating a functional prototype for a game is a collaborative effort. UXPin allows teams to create well-planned wireframes, while allowing your team to collaborate in real time.

The post Video game prototyping – How To Do It and Why You Should! appeared first on Studio by UXPin.

Why Do You Need a UX Researcher on Your Team?

Gone are the days when UX Design was viewed as a single domain. Back then, companies used to hire a single resource under the job title of ‘UX Designer’. 

Sometimes, we even saw the atrocious coupling of job descriptions of a UI and UX Designer under the garb of ‘UI/UX Developer’ or ‘UI/UX Engineer’.

Gladly, we are past that stage and now the industry is catching up to the importance of UX design. 

Now, we are not only seeing the decoupling of UI and UX roles but UX design has been further divided into its distinct subcategories.

This separation of UX roles has been a direct result of a broader understanding of the UX domain and it’s ever-increasing importance in today’s world. 

The move from a generalist UX resource to specialized UX roles is a welcome one.

One of these UX design roles is that of a User Experience Researcher.

Classification of UX Roles

When building a UX team, there are a number of different team structures that you may choose from. These include a centralized structure, embedded structure, and a matrix structure.

The choice of structure really comes down to the way your organization operates and its defined goals. You can learn more about this topic in our detailed blog on UX team structures.

Moving on to UX roles, we have the following specialized roles in UX:

UX DesignerProduct Designer Visual DesignerUX ResearcherContent StrategistUX Writer

Each role requires a certain unique set of skills to perform accurately. The roles are defined based on the design process. It is a step by step approach that starts by understanding the user before moving on to design creation.

Let us take a look at the design thinking process to understand these UX roles in a better way. 

Understanding the Design Thinking Process

The design thinking process can be summarized in 5 steps:

Empathize

Learning about users through user interviews, contextual inquiry, and user observation. 

Define

Identifying user problems and user needs. This requires data analysis and information synthesis.

Ideate

In this step design ideas are generated in order to tackle the problem at hand. Brainstorming sessions are carried out along with listing out the worst possible ideas and conducting dot voting. 

Prototype

Mockups are created in this step. This starts with creating basic paper prototypes. Then we move on to wireframing and eventually create high fidelity prototypes.  

Test

The testing phase involves evaluating the designs with users with the goal of improving them. Usability tests, user tests, and heuristic evaluation are all part of the testing phase.  

By understanding the different steps involved in the design thinking process, it is easier to understand how difficult it is to encompass all these tasks into a singular role of a ‘UX Unicorn’. For an organization with multiple products, the division into specialized roles is absolutely necessary. 

A UX researcher plays a crucial role in the whole design thinking process.

To learn how you can run your very own design thinking workshop, do check out our step-by-step design workshop guide. 

What does a UX Researcher do?

As the name suggests, a UX researcher does both qualitative and quantitative research methods in order to provide a deeper understanding of the end user. 

They are responsible for the first phase of the design thinking process and lay the groundwork using which designers can create their designs. 

They ‘empathize’ with the user and properly identify the problem that the product should cater to. Research methods like user interviews, user observation, and field studies and conducted in order to achieve this objective. 

UX researchers also analyze the gathered data and use their findings to present a proposal of the design to designers and developers.

The role of a UX researcher does not just end here. Along with the empathize and define phase, they also help with the testing phase. Their evaluative research (usability testing and user testing) results in the testing and improvement of designs. 

Benefits of having a proper UX Researcher

Contrary to popular belief, a UX researcher will save you money instead of being a burden on the company’s finances. 

A UX researcher enables you to produce a product that is both attractive and practical for the user. By fulfilling the precise needs of the user, you ensure that no development effort and time is wasted.

Some of the key benefits of having a UX researcher on your team include:

Creating a customer-centric product

The first and foremost benefit of having a UX researcher on your team is that you do not end up with a product that no one wants. 

Extensive user research and evaluation ensures that your organization achieves an accurate understanding of the customer and therefore creates a product that aligns perfectly with what the customer wants. 

This also leads to long term customer relations and goodwill.

Better decision making

Instead of haphazard decision making, having a UX researcher promotes informed decision making. This is not only a more efficient way but the accuracy of the decisions is also increased manifold. 

Previously, organizations were very slow in making decisions and often reluctant to change as the cost of reverting back a decision was too high. 

With a UX researcher on your team, you can confidently make the correct decisions. 

Efficiency and time saving

The design thinking process is a tested and proven series of steps. It is widely used in the industry because it not only improves efficiency but also results in time-saving. 

As we have learned, the backbone of the design thinking process is a dedicated UX researcher. By having one on your team, you will see massive gains in overall productivity. 

Stronger team culture

A great work culture will go a long way for your organization. The streamlined process and informed decision making as a result of following UX research processes will boost the confidence of the whole team.

They will know that decisions are being made in an orderly manner and are intended for the ultimate benefit of the customer. This greatly helps promote a healthy work culture and improves team coordination and collaboration.

When everyone is working towards a common objective in perfect harmony, the results are nothing but magical

Conclusion

The advantages of hiring a UX researcher can not be denied. With the constantly increasing competition in the market and an ever-increasing focus on more user-centric products, a UX researcher is no longer an option to consider – it is a necessity!

We at UXPin are dedicated to making the whole design process simpler for you. Getting started has never been easier. Simply sign up for a free trial now and take your design productivity to the next level.

The post Why Do You Need a UX Researcher on Your Team? appeared first on Studio by UXPin.

7 Benefits of Responsive Web Design for Your Business

No matter what industry you work in, your business plays a critical role in business success. Modern consumers don’t want to call companies to ask questions. They want to find information online. Responsive web designs make it easier for everyone to access the information and services that they need. When you use responsive designs, expect to see the following benefits.

Responsive web designs help websites get higher search engine rankings

For years, developers suspected that Google gave higher rankings to websites that used responsive designs. Google confirmed in 2018 that it gives preference to sites that follow best practices for mobile-first indexing.

Google spent about a year and a half experimenting with its approaches to indexing and ranking before deciding that it would prioritize mobile versions over designs made for desktop computers. If you have a design for mobile users and a design for desktop users, Google will base your ranking on the mobile version.

Responsive web designs ensure that your website always gets the ranking it deserves. Since it conforms to the requirements of diverse devices, you can count on your SEO to work even when you make designs on a desktop computer.

A higher ranking practically ensures more traffic

Your website cannot succeed without a high ranking from search engines. Nearly 29% of people click on the top result when they search for something on Google. About 16% of searchers click the second result. Only 11% will click the third result.

By the time you get to the tenth result, only 2.5% of people will click.

If your website doesn’t make it to the first, you won’t get much organic traffic. Hardly anyone ever bothers visiting the second page.

Adopt responsive web designs so you can make your website more competitive by earning a higher ranking. The more attention you get from search engine crawlers, the more organic traffic you can expect.

Responsive designs help you reach more consumers

Even if responsive web designs didn’t help sites reaching higher search engine rankings, it would still make sense for developers to use designs that adapt to mobile devices.

Global increases in smartphone penetration have made it cheaper and more convenient for consumers to shop with their mobile devices. Shoppers don’t need to visit retail stores to buy the products they need. People don’t even need to sit down at desktop or laptop computers to shop. They can find everything they want on their smartphones.

Surveys show that most people in “developed” nations own smartphones. The United Kingdom has the highest rate of ownership at 82.9%. Other countries with more than 70% of smartphone ownership include:

Germany (79.9%)United States (79.1%)France (77.5%)Spain (74.3%)South Korea (70.4%)

Even “emerging economies” have surprisingly high levels of smartphone ownership. Overall, about 45% of people living in emerging economies have smartphones. Considering that these countries often struggle to build or maintain telecom infrastructures, many people find that smartphones offer them more reliable access to the internet. Without other affordable options, it makes sense to own multipurpose mobile devices instead of larger computers.

Shoppers use mobile devices inside stores

Perhaps you know that most of your sales come from people shopping in your stores. That doesn’t mean you can avoid the significance of mobile shopping. In fact, people probably use their smartphones while shopping in your stores.

According to one report:

69% of shoppers use their phones to read reviews before talking to store employees.55% of shoppers use smartphones to find product specifications while shopping in stores.53% of shoppers search for deals on their phones before speaking with employees.

For the most part, people don’t seem to like talking to retail employees. They would rather use their phones to find the information they need to compare and choose items. If you don’t have a responsive web design, you’re either annoying them with a difficult website, forcing them to talk to your employees, or encouraging them to shop elsewhere.

Earn more money with responsive web design

The motivation to adopt responsive web design becomes even more obvious when you see the amount of money involved in online sales. From November 1 to November 30, 2020, consumers in the U.S. spent $39.9 billion while shopping from their smartphones. Shoppers spent $60.7 billion from their laptops and other devices.

Considering that about 40% of the month’s revenue came from smartphone sales, you cannot afford to miss the opportunities that responsive design creates. Refusing to adapt means that you could miss nearly 40% of sales. People won’t stop buying items because your website doesn’t cooperate with them. They will simply use the websites of other companies. Your competitors will pick up the money you leave on the table.

Keep visitors engaged to lower your bounce rate

A standard, desktop-centric website design might work on a mobile device, but the content will probably load slowly and make it difficult for shoppers to find what they want to buy. Modern consumers will not tolerate long load times. Anything longer than a few seconds will send them to other sites.

As Joe Cahill, a freelance designer with more than two decades of experience working with clients like American Express and Saks Fifth Avenue, says, “We’re looking at mobile devices and getting annoyed after a three-second load. Looking for information instantaneously is going to be a key thing with how Generation Alpha interacts with devices and everything that’s going to go on around them.”

The habits of today’s youngest consumers will become economic drivers within a decade. Conforming to their preferences now broadens your brand’s appeal and keeps you on the cutting edge of technology.

You can save time and money with responsive web designs

You don’t have to use responsive web designs to reap these benefits. You can have your developers redirect mobile users to a separate site designed specifically for them. Unfortunately, this approach means that you need to pay for two websites. You don’t necessarily double your expenses because you can use some of the same assets on both versions. You will, however, spend much more than someone who chooses a responsive web design.

Best practices for responsive web designs

For the most part, responsive web design does most of the work for you by adjusting to the user’s device. You should still follow some best practices to make your site more successful. Some examples include:

Testing website prototypes on as many devices as possible.Making content easy for users to scan.Adding call-to-action buttons.Choosing intuitive navigation menus.Using an internal search feature to keep users on your site.Make responsive web design easy with UXPin

Get the most out of your responsive web design by reading UXPin’s ebook Responsive & Active Web Design. The ebook offers pages of advice that will put you on the path to success.Don’t struggle to make websites that respond to the demands of mobile devices. Start your free trial with UXPin, the most advanced design and prototyping tool on the market, and see how easy responsive website design becomes when you use the right prototyping tool.

The post 7 Benefits of Responsive Web Design for Your Business appeared first on Studio by UXPin.

How Lorem Ipsum Kills Your Designs

Designers and publishers have been using Lorem ipsum for decades to fill in areas where they expect text to go. Even some versions of Microsoft Word let you insert Lorem ipsum text into your documents. The meaningless, fake-Latin seems to function pretty well as a placeholder for future text. Until, that is, you learn how using Lorem ipsum in design kills your work.

Have you gotten so used to Lorem ipsum that this idea seems ridiculous? Let’s consider the negative effects that it can have on your designs.

You can’t test some interactive elements with Lorem ipsum

Someone who creates static designs for print material might think that Lorem ipsum plays a fine role while waiting for the copywriter to produce text. After all, you need to get started on your design work, and you know approximately how much space the writer’s content will fill. Why not use Lorem ipsum?

(Actually, Lorem ipsum doesn’t work that well for print material, either, but more on that later.)

The problems with Lorem ipsum become obvious when you start making designs with interactive elements. Nonsense text cannot replace real, interactive data.

When you build a prototype, you need stakeholders to see how the product will function. Imagine sending someone a link to a prototype that includes interactive rows and columns. Clicking on a filter should sort the data according to the user’s needs. With Lorem ipsum, the user doesn’t know whether your filters work because they can only rearrange nonsense.

It’s nearly impossible to determine whether a filter that should arrange names alphabetically works correctly; you only have Lorem ipsum. When you replace Lorem ipsum with real data though, it becomes clear whether the filter works.

Designers can forget to replace Lorem ipsum

You always think that you will replace Lorem ipsum as soon as you have the text that will get published in your design. There’s no way you could forget to add the content that a copywriter has worked hard to create, right?

Unfortunately, Lorem ipsum gets left in designs much more often than acceptable. It has happened to Chipotle, the Singapore Times, the Strait Times, Savour Bakery, and countless other companies. In fact, the Strait Times put policies in place to prevent Lorem ipsum from getting included in its print publication. A year after establishing the policies, Lorem ipsum appeared in the newspaper again.

When the writer is on holiday, but the artwork has to go to print #graphicdesign #humour #loremipsum https://t.co/3bLBYLEJma pic.twitter.com/rEetSp3Aof

— Graphic Design Forum (@GraphicDesignF) May 5, 2019

Whether you’re creating an interactive website that a company uses to generate leads and process purchases or you’re making a package that holds some mystery food, Lorem ipsum can kill your design.

It can happen to anyone

It’s tempting for experienced graphic designers to blame Lorem ipsum mistakes on beginners or amateurs who shouldn’t have been given jobs by large companies like Chipotle. The fact of the matter is that a mistake like this can happen to anyone.

Writers know that editing their own work can feel impossible. Confirmation bias makes it easy for your brain to skip over your own mistakes. Instead of seeing the mistake in front of you, you see the image of what you intended.

Confirmation bias happens to graphic designers, too. There are strategies to undermine its negative effects, but looming deadlines can make it impossible to set aside the time they require.

SourceYou don’t really save time by using Lorem ipsum

A lot of designers will say that they use Lorem ipsum to save time and streamline their process. Lorem ipsum might make it a little easier for you to start working on a design while you wait for copywriters to finish their jobs, but it doesn’t really save you much time.

Having someone else review your work is the most effective way to prevent Lorem ipsum from getting published. Ideally, you want someone who doesn’t have any connection to your project. More distance makes it easier for the person to recognize issues.

Drafting someone else to review your work has some obvious disadvantages. First, it doesn’t really save the design agency time because you need to pull a colleague away from another project. You end up logging more hours because you need someone to look over your work.

Second, you could have avoided the entire Lorem ipsum problem from the beginning. Perhaps it makes sense to use the nonsense text during your first or second round of ideas. By the time you create a prototype, though, you should have removed the Lorem ipsum by replacing it with real content.

You can’t always control how quickly copywriters finish their work. You can, however, use UXPin to generate real data and text. Forget Lorem ipsum! You can add real data to your designs.

Once you add data to an interactive element, you can test the feature’s performance. As mentioned above, you can’t get reliable results by testing interactive elements that contain Lorem ipsum.

Lorem ipsum designs will not impress stakeholders

At some point in your design and prototyping process, you will need to share your work with stakeholders who have authority to make decisions about your project. Lorem ipsum designs have never impressed anyone. They lack authority and create a half-baked impression that will make managers and clients scowl.

It’s so much more impressive to approach stakeholders with real data that they can interact with. You don’t have to feel ashamed to tell them that it’s fake data. The data will change repeatedly anyway. The point is that decision-makers get to see how your designs really work—and they don’t get distracted by weak Lorem ipsum they’ve seen a hundred times before.

Generate real data in UXPin prototypes

Start improving your designer and developer workflow by following this 47-point checklist. It’s not as daunting as it sounds. Plus, it will keep you on track to submit every project before their deadlines.

As far as eliminating Lorem ipsum so it doesn’t kill your designs, get a design and prototyping tool that doesn’t force you to rely on garbled text. Not convinced that UXPin can really make your design job that much easier? Sign up now for a free trial. You don’t need to provide your credit card information, so you don’t take any risks when you create an account.

We’ve seen graphic design teams revolutionize their project workflows by adopting UXPin’s superior features. Give it a try to see whether it can streamline your processes, give you more impressive prototypes, and finally help you get rid of that annoying Lorem ipsum!

The post How Lorem Ipsum Kills Your Designs appeared first on Studio by UXPin.

How to Use Flowcharts to Plan Your Processes and Workflow

Learning how to use flowcharts can feel a bit daunting at first. However, taking the time to master flowcharts will make it much easier to plan your processes and workflow. As a result, you should find that your future projects move more efficiently. You could also improve the accuracy of your team’s work by identifying potential problems before they stall your progress.

To get the most out of flowcharts, you will need to start with the basics. At a simple level, they work like decision trees. Once you master basic flowcharts, you can learn how to use flowcharts in more advanced ways that make all of your projects more successful.

Why you should use flowcharts

Flowcharts simplify big questions by breaking them down into small steps. Instead of making a decision based on instinct, you move through a series of logical steps to reach a conclusion.

Depending on the question you want to answer, flowcharts can become quite complex. No matter how complicated they seem, though, they will help you find logical solutions to questions that arise before, during, and after projects.

Some noted benefits of flowcharts include:

Visual clarity that shows how complex processes function.Instant communication that lets you explain processes to multiple people.Efficient coordination that helps people make decisions efficiently.Effective analysis that lets you review your current process to find areas for improvements.Flowchart symbols and their meanings

Traditional flowcharts use geometric shapes to represent functions. Some of the symbols have obvious meanings. Others will take a little effort to remember. It won’t take long before everyone on your team knows how to interpret the following flowchart symbols.

OvalName: Start/EndFunction: Represents the beginning or end of a process.Example: “Start your process here.”ArrowsName: ArrowsFunction: Tells you which step to move to after completing a task or answering a question.Example: “Move to the next step.”ParallelogramsName: Input/OutputFunction: Represents an input or output that will influence the decision-making process.Example: “The number of people currently using your product.”RectanglesName: ProcessFunction: Tells you to what process to use with the available information.Example: “Add current and expected users to determine whether the client’s server has enough power to complete requests.”DiamondsName: DecisionFunction: Asks you to make a decision.Example: “Do you want to give users more options or simplify your design?”

These aren’t the only symbols and functions used in flowcharts, but they can help you design simple processes and workflows. For a more complete list of flowchart symbols and what they mean, read Lucidchart’s What is a Flowchart article. It also provides a historical background that may help you understand more about the benefits and potential uses of flowcharts.

Exercise: How to create a simple flowchart

Let’s start learning how to use flowcharts to plan your processes and workflows by looking at an example that answers a very simple question.

“Should we build a version of our application for the App store?”

The flowchart used to answer this question might include the following:

Oval: begin the process to find a logical answer.

Arrow

Rectangle: Number of people downloading the app from Google Play

Arrow

Parallelogram: Enter the number of current users

Arrow

Diamond: Does our current number of users cover our expenses and generate revenue: yes or no?

Arrow: Yes 

Oval: Don’t spend more money developing a new version of the app.

Arrow: No

Oval: Build a new version to attract more users.

Think of a simple question that you encountered today and make a flowchart that helps you reach a decision. It could apply to anything, such as whether you need to stop for gas on the way home or whether you should get another cup of coffee during your next break.

When you practice using simple flowcharts, you can work your way toward using them to answer much more complex questions. You will also discover that you can use the step-by-step method to improve your product design process. For example, a section of your flowchart might ask:

Do users understand what the icons mean?If not, redesign the icons and ask users for more feedback.If yes, use the icons and proceed to the next stage of the project.How to use flowcharts to help your team work more efficiently

Do members of your team come to you with questions that distract you from other aspects of your job? Flowcharts could help them work more efficiently without as much oversight. 

If you get similar questions frequently, sit down to make a flowchart that shows your thought process that leads to answers. Yes, it will take you some time to investigate your thought processes, turn them into instructions, and draw a flowchart that others can follow easily. Investing some time in the flowchart, however, should reduce the number of repetitive questions that you get from designers working on your projects.

UXPin’s wireframing feature gives you an easy way to create attractive flowcharts that you can distribute among your team members. You can even keep a copy of the flowchart and share it with new employees and freelance designers by sending them a preview link. They don’t need a UXPin membership to see the preview, so you can simplify the process without spending more money adding people to your account.

Ways UXPin can help make your processes and workflows more efficient

Knowing how to use flowcharts will help your projects. Not everything relies on using a graph to make informed decisions, though. UXPin has several features that will make your processes and workflows more efficient. We encourage you to use workflows, but you don’t have to make them all the time.

Some of the top workflow features that come with UXPin include the following.

Collaboration for cross-functional teams

UXPin gives your team an environment where they can collaborate in real-time. When one person changes a design, everyone else looking at the project can see the changes as they occur.

Depending on the types of products you make, though, you might need enhanced collaboration features that meet the needs of cross-functional teams. For example, you might want a single place where designers and coders can leave project comments that guide their work toward a cohesive goal.

You won’t get that with every tool. UXPin makes it very easy for anyone you invite to get involved.

Design systems that create guardrails

Design systems create a standardized set of assets, colors, interactive components, and other features that designers can use while working on a project. If a designer has a question, the design system can probably answer it.

UXPin lets you create a new design system for each project. You can also import some aspects of other design systems to new projects. With the right library of standards, everyone can work more efficiently without making critical mistakes.

Try UXPin to see how it improves your workflows and processes

Interested in learning more about how UXPin can improve your workflows and processes? Sign up for a free 14-day trial so you can explore the cloud-based platform’s features. You don’t have to provide a credit card number, so you never have to worry about getting charged for a membership you don’t want. Instead, you get a free opportunity to try UXPin without any obligations.

The post How to Use Flowcharts to Plan Your Processes and Workflow appeared first on Studio by UXPin.

How to Design With Contrast

When you begin studying graphic design, you probably think that color plays the most important role in contrast. A lot of people immediately think of the stark contrast between white and black. As you gain more skills and become more aware of trends in the design world, though, you will likely notice that some professionals don’t need to use color much when they design with contrast.

Sophisticated approaches to designing with contrast can relying on textures, typefaces, size, and other values. These contrasts often have subconscious effects on people. Your audience might not know why they feel drawn to a design, but they still have positive responses.

If you want to learn more about how to design with contrast in mind, follow the below tips. Then, learn why website and app designers love using contrast in their products.

Effective ways contrast can make design more effective and interestingCreating contrast with dark and light color

Let’s start with dark and light colors, potentially the most obvious way to add contrast to a design.

The French artist and graphic designer Guillaume Grimaud offers several examples of creating contrast with light and dark colors on his CREATIVEPARK website. He uses black and white exclusively on his site designs. Surprisingly, the pages never look boring. His expert technique makes each page look like an intentional statement about the merits of minimalism.

Black and white are extremes. You can use lighter and darker versions of any color to create contrast in your designs. A tool like Coolors can help you explore colors that you might want to use in your work.

Create contrast with color temperature

Contrasting color temperatures can create eye-popping, modern designs. You only need to know the basics of color theory to try temperature combinations.

Warm colors include:

RedOrangeYellow

Neutral colors include:

GrayTanBrown

Cool colors include:

GreenBluePurple

Keep in mind that RGB and CMYK color models work a little differently from each other. You can get very similar results by pairing warm and cool colors, though. Experiment to see which ones pop and which ones fizzle.

Download the ebook Web UI Design for the Human Eye to read more about how color temperature can add to a design’s appeal.

Contrast with texture can make designs more interestinghttps://www.highstdeli.com/

Contrasting textures can make designs more interesting to look at. Designers and artists often use texture in physical works. You can use it with smartphone apps and websites, too.

One option is to use a smooth, consistent color as the background and place a rough image on top. For example, you might have a stark black background with black-and-white speckled words printed on top.

You can also add contrast to the design by combining photographs and text. Blur the picture slightly to use it as the background. Any plain text printed on top of it will stand out.

You can even go in the other direction by making the text slightly fuzzy and emphasizing amazing food.

White space can contribute to contrast

Never forget about the important role that white space plays in website and app design. White space does several crucial things, such as:

Create distance between calls to action.Emphasize a product, message, button.Make people feel relaxed (as opposed to a crowded design that can make them anxious).

Learn more about the benefits of white space in UXPin’s ebook Zen of White Space in Web UI Design (Balance and Contrast).

Typeface contrast in designhttps://medium.com/google-design/introducing-space-mono-a-new-monospaced-typeface-by-colophon-foundry-for-google-fonts-84367eac6dfb

People outside of the design world often forget that text does more than represent words and meanings. Every letter has a design that professionals can use to create contrast in their work.

By mixing and matching typefaces, you can make certain sections of text stand out from the rest of the page. You might want to use a bold typeface to emphasize a pullout quote or important message. Conversely, you can use a light typeface to provide small details that most people won’t need to read.

Google Fonts work in UXPin, so you can access thousands of typefaces without paying a graphic designer to develop custom fonts.

Patterns can add contrast to your designs

Fashion designers know that contrasting patterns can elevate clothing—but only when paired well. You can get similar results with patterns on a screen.

Once you find patterns that work for your project, add them to your design system. By creating a project-specific library of patterns, you encourage other designers on your team to explore fresh ideas without going off the rails.

Benefits of learning to design with contrast

Learning how to use contrast in design isn’t all about making websites and apps look attractive. Your design skills can have a significant influence on a client’s success. 

In all seriousness, though, you can learn to use contrast to influence behavior. As long as you also make attractive designs, you can feel good about subtly manipulating viewers.

Contrast can affect how people consume contentThe viewer’s eye doesn’t observe passively. It consumes images. You have some control over which parts of your design the eye looks at first and last. Placing heavy, dark text on a white background will force visitors to look at the text. Adding a textured arrow to the side of a page will encourage visitors to look at what’s below.Contrast can influence consumer behaviorWhite space can increase conversions. If your clients need to generate income through sales, learn how to use white space to convince visitors to buy more.Bright letters on a dark background get noticed. You can use them to tell consumers that they need to take advantage of opportunities immediately. A large, bright red 75% OFF – LIMITED TIME graphic will convince a lot of people to start browsing online catalogs for sales they don’t want to miss.Contrast can keep people on pages longerThe amount of time that people spend looking at a website page isn’t a high priority for most companies. Still, you can use contrast to keep visitors engaged and on the page. Offer a variety of colors, textures, and fonts to keep them reading.Test your design ideas with UXPin

You never know whether a design idea will work until you test it. As Joe Cahill says, “the idea of color contrasts—that was never a thing until somebody started talking about it, and now you run everything through a plugin that checks your accessibility and makes sure your color contrast is good.”

UXPin makes it easy for you to generate fully functional prototypes that you can share with colleagues and stakeholders. They don’t even need a UXPin account to view your prototype and leave feedback. Strong collaboration features like that make UXPin one of the most effective tools for designers and developers. Start your free UXPin trial today to see how its features can improve your work. After your 14-day trial, you will understand why so many professionals choose UXPin as their go-to prototyping tool.

The post How to Design With Contrast appeared first on Studio by UXPin.

How Storyboards Help You Solve Project Problems

You know that you have a long road ahead of you when you start a new project. Unfortunately, the journey rarely takes a direct path. Instead, you find yourself veering off of the planned course when you encounter unexpected problems. Storyboard benefits can help you predict some of those problems, making it easier for you to plan a more efficient path between the beginning and conclusion of your projects.

What is a storyboard?

The term “storyboard” comes from the movie industry. Long before producers, directors, and writers start filming scenes, they take time to create a shot-by-shot vision of the movie. Years ago, they would draw the scenes on pieces of paper and attach them to large boards. Today, most movie studios use software to make storyboards.

A good movie storyboard may look simple, but it tells teams a lot of information, including:

The right camera angle to use during a scene.Where actors will move throughout a scene.What special effects they need.The movie’s entire plot.

When you look at the entire storyboard, you get an early version of what the film will look like upon completion. Why bother doing so much work instead of building sets, gathering actors, and turning the cameras on? Because it takes a lot less time and money to plan ahead instead of jumping into a project without thinking everything through.

You get the same storyboard benefits during design projects.

How storyboards benefit design projects

Storyboarding forces teams to think through every step of a project. During the process, people will notice potential problems that could arise while building the product. The process also encourages colleagues to raise questions about how they will reach specific goals.

Some questions teams might ask while storyboarding include:

Do we have the right tools to include that feature in our product?How will these features interact with each other?Does this navigation menu make it obvious where links lead?Will new users find this design intuitive?Where should we add forms to generate leads?How often should we use popups to encourage specific actions?Do these steps follow a logical structure?

When you see every step of a project in front of you, unknown problems tend to reveal themselves. Don’t assume that you can get the same results from mental exercises. Running through scenarios in your head keeps you inside your head, where cognitive bias can influence your decisions. Once you create physical representations of each step, you and your team gain a more realistic perspective.

Other storyboarding benefits for product designers

Other storyboard benefits for product development teams include:

Improved collaboration—knowing every task in the project makes it easier to assign jobs to teammates.Saving money—you spend less money when you can discover potential problems before you start designing a product.More efficiency—you avoid delays when you know what tools your designers will need to complete tasks.Better accountability—having a step-by-step storyboard holds everyone accountable for their assigned tasks.More realistic milestones—you can’t set realistic milestones until you take an objective look at how a project will progress. Unreasonable expectations will only hurt morale, create stress, and disappoint stakeholders eager to see results.Process improvements—not every storyboard will progress as planned. With each attempt, you learn how to improve your process. Perhaps you’ll never find the perfect process, but you will get closer over time.Avoid legal issues—when your team sees designs, they might recognize similarities that could lead to intellectual property disagreements.



Storyboards play roles in popular approaches to project management

Storyboards benefit workflows so much that they have become essential elements in some of the most popular project management methods.

Agile

Potential the most popular project management method, Agile encourages teams to revisit their storyboards to reevaluate processes and expectations. Key features of Agile include:

Small tasks that contribute to larger objectives.Prioritizing tasks that must get completed before others.Taking regular breaks to reflect on project progress to improve outcomes.Adapting to changing requirements as the project progresses.



Kanban

Teams typically use Kanban storyboards after they have made larger storyboards that provide project overviews. The Kanban board can frequently change to show progress within a project. A Kanban storyboard has three columns:

Planning—tasks that have not been started yet.In-progress—tasks that someone are working on.Done—completed tasks.

Project leaders can customize Kanban storyboards by breaking tasks into smaller steps and including the names of people responsible for completing tasks.

Scrum

In Scrum, you break storyboards into four columns that contribute to the project’s overall success:

Stories: a high-level element that colleagues can use to identify compartmentalized parts of a project.Task Status: shows the current state of a task, such as whether it’s planned, in-progress, or completed.Swim Lane: a visual representation of a parent story and its subtasks.Individual Stories: stories that fall outside of the swim lane.



Get more storyboard benefits with UXPin

Adopting the right prototyping tool can make it easier for you to benefit from storyboarding. UXPin gives you several features that will contribute to planning projects, improving efficiency, and testing ideas before committing a lot of time and money to them.

Create a storyboard with UXPin

UXPin’s wireframing feature makes it easy for you to create digital storyboards that you can share with every member of your design team. 

Build a design system creates guardrails for decision making

You want your designers to use their creativity, but you need them to stay within guardrails so the team can build a coherent product. UXPin lets you build a design system that creates guardrails for decision making. Once you create your project’s design system, everyone will know:

What assets they can use.Appropriate sizes for images and text.Approved typographies.Colors for buttons, backgrounds, and other design elements.

The more questions you answer upfront, the more efficiently your team can work.

Test interactive features in prototypes

UXPin lets you use real data when you design and test features. You don’t have to rely on Lorem ipsum anymore. Instead, you can make sure that a feature works correctly by adding real data to your prototypes interactive features.

Try UXPin today to see how it can boost your storyboard benefits

Choosing a reliable approach to project management storyboards helps ensure that your team creates a successful product. You also need to give designers the right tools to reach their goals.Start a UXPin free trial today to see how it contributes to your team’s process. You don’t have to supply a credit card number to start your free trial, so you get to experience UXPin’s features without any risks or obligations.

The post How Storyboards Help You Solve Project Problems appeared first on Studio by UXPin.

Steps to Launch Your Website Redesign

If you rely on a website to generate leads, earn ad revenue, or educate your customers, you need to keep up with design and technology trends that will make your site more useful. The thought of redesigning a website can feel intimidating—there are so many website redesign steps to take before you can launch!

Don’t let a big project scare you into accepting your website’s outdated design. The following steps will help you redesign and launch your new website as easily and successfully as possible.

Website redesign steps to take before your relaunch

The initial website redesign steps include a lot of preparation. Some developers want to jump into the design process as soon as possible. Encourage them to contribute their ideas while they wait for the project to start. The time you invest at the beginning of the website design will make the rest of the process more manageable.

#1. Evaluate your current design

First, you need to know what doesn’t work with your current design. Common problems to look for include:

Old designs and text that no longer represent your brand’s personality.Features that don’t function or cooperate with new devices and internet browsers.Outdated designs that make your site look amateurish compared to those of your competitors.Designs that don’t adapt to different devices and screen sizes.Poor search engine optimization (SEO) that makes it difficult for potential customers to find your pages.Low traffic or conversions.Out of date security measures that discourage consumers from giving you information or making purchases online.

You also need to make a list of things that you love about your current design. You may want to carry over some aspects to the new version. If you find that some content attracts a lot of content, take note so you can bring it to the new site. If you want to keep using brand logos, typefaces, and other attributes, identify them now.

#2. Set goals that will improve UX

You can take the proper website redesign steps until you have goals that you want to meet. This is a great opportunity to talk to your teams about what they want your new site to accomplish. You will likely get different insights from your sales representatives, designers, and IT team.

You want to get as many perspectives as possible, but you don’t want to get overwhelmed by so much information that it becomes difficult to make decisions. A tool like Google Forms gives you an easy way to control the conversation without preventing people from giving you their professional opinions.

The best surveys usually ask several direct, multiple-choice questions like:

What type of homepage menu do you prefer?What types of content do you think would benefit our company website most?What features frustrate you about our website’s current design?

At the end of the survey, you can give respondents a place to write anything they want. You will likely find some contributions more enlightening than others. Take a little time to review them all, though. The best ideas can come from unexpected sources.

Use your own observations and information from your surveys to set specific goals that will improve your UX. It may seem premature to set goals now. Don’t worry. You can adjust your expectations as the project progresses.

#3. Build a design system for consistency and efficiency

Now is a good time to establish a design system that will ensure consistency throughout your new website. Spending time on a design system now will also improve your project’s efficiency. Once you have a library of approved assets, you will get fewer questions from designers who aren’t certain how they should format a page or what icons they should use.

Some basic steps of building a design system include:

Finding inconsistencies in your current UI library.Choosing a color palette for your pages.Deciding which typographic elements to use.Adding icons, photographs, illustrations, logos, and other images to your library.

Read Build a Design System from Scratch in 7 Steps for more in-depth instructions.

#4. Make interactive prototypes to test your work

As your website designers and developers brainstorm ideas, have them turn their best concepts into interactive prototypes. UXPin makes it easy for them to turn ideas into prototypes that include:

Interactive form elementsPage transitionsConditional interactionsInput variablesReal data and text instead of Lorem ipsum

With UXPin, designers can create prototypes quickly. You don’t have to wait until the end of your project to start testing concepts.

#5. Get feedback from stakeholders and incorporate it into your final design

Whether you’re redesigning a website for your company or a client, you should get feedback from stakeholders before you launch the new version. Again, UXPin makes this step as simple as possible. You can send a link that lets anyone view and comment on your prototypes. Stakeholders don’t need UXPin accounts to experience your redesign and send you feedback. They just need a link that leads them to your work.

Steps to take after you launch your redesigned website

Once you incorporate feedback from stakeholders into your design, you can launch your website and start the next stage. You aren’t done with the project yet! You still have a few more website redesign steps to accomplish.

Connect with customers to tell them about your website redesign

You’ve been working on your website redesign for weeks or months, but your customers don’t know about the progress. A couple of weeks before your relaunch, connect with your followers to update them. Try to build some anticipation leading up to the relaunch.

Since you probably communicate with customers and other followers through multiple channels, use a tool to manage your messages. Some of the best social media management tools include:

HootsuiteSprout SocialBufferHubspot

If you don’t already use one of these tools, now is a good time to explore your options.

Establish KPI goals

Does the new design help your company reach its goals? You need to track data know for sure. Some of the most important KPIs for websites include:

Average session durationPercentage of new visitorsBounce rateLead generationsConversions



Review the redesigned website’s performance

You also need to track your redesigned website’s performance to make sure it meets the needs of visitors.

Test the speed

Use a tool like Pingdom or Google PageSpeed Insights to test your site’s speed. No one wants to wait for pages to load.

Track your traffic

Monitor your website’s traffic to make sure the new version attracts more visitors than the old one.

Monitor KPIs

Keep monitoring your KPIs and looking for opportunities to improve. A few adjustments could have a big impact on your site’s performance.

Streamline your website redesign process with UXPin

You need a tool that can streamline your design process and help ensure success. UXPin gives you real-time collaboration, quick prototyping, real data, interactive elements, and many other features that move your team along these website redesign steps. Sign up for a free UXPin trial to see how much more effectively your team can redesign websites when they have the right tools. You don’t have to provide a credit card number, so you don’t risk anything by trying UXPin during your next project.

The post Steps to Launch Your Website Redesign appeared first on Studio by UXPin.