Design Thinking Workshop - Complete Guide

What is Design Thinking?

Design thinking is a human-centered problem-solving methodology that emphasizes understanding users, challenging assumptions, and iteratively developing innovative solutions. It's a powerful tool for UX design because it places the user at the forefront of the design process, ensuring that the final product meets their needs and desires.

How Running a Design Thinking Workshop Can Help You in Designing

Running a design thinking workshop offers a multitude of benefits for UX design projects:

• Deep User Understanding: Through activities like user interviews and empathy mapping, you gain a profound understanding of user needs, frustrations, and behaviors. This fosters user-centric design solutions.
• Enhanced Creativity: The design thinking process encourages brainstorming and exploration of unconventional ideas. Workshops break down silos and leverage diverse perspectives, leading to a richer pool of creative solutions.
• Efficient Problem-Solving: By defining the problem statement clearly and focusing on user needs, design thinking workshops ensure your team tackles the right challenges and avoids getting sidetracked.
• Rapid Prototyping: Workshops promote the creation of low-fidelity prototypes, allowing for quick visualization of ideas and early user feedback. This iterative approach saves time and resources in the long run.
• Improved Collaboration: The collaborative nature of workshops fosters teamwork and communication among designers, developers, and other stakeholders. This leads to a more cohesive and successful design process.

How to Run a Design Thinking Workshop 

Preparation is Key: Setting the Stage for Success

Before delving into the exciting world of brainstorming, some groundwork is essential. Here's what you need to do:

• Define Your Workshop Goals: What specific UX challenge are you tackling? Are you aiming to identify user pain points, ideate solutions, or refine existing prototypes? Clearly defined goals ensure a focused workshop.
• Gather Your Team: Invite a diverse group of participants with varying perspectives. This could include UX designers, developers, product managers, and even stakeholders.
• Prepare the Space: Create a comfortable and stimulating environment. Whiteboards, sticky notes, markers, and prototyping tools are your friends!

Launching the Workshop: From Icebreakers to Empathy

• Now, let's get started!
• Welcome and Introductions: Break the ice with a fun activity to get participants comfortable and interacting.
• Design Thinking 101: Provide a brief overview of the design thinking process, highlighting the key stages (empathize, define, ideate, prototype, test).
• Building User Empathy: This is the heart of UX design. Conduct activities like user interviews, persona creation, or empathy mapping to understand user needs, frustrations, and behaviors.

From Problem to Solution: Ideation and Prototyping

With a deep understanding of your users, it's time to tackle the problem:

• Define the Problem Statement: Craft a concise statement that captures the core user challenge you're addressing.
• Ideation Galore! Encourage wild ideas! Use brainstorming techniques like brainwriting or crazy 8s to generate a multitude of potential solutions.
• Refine and Prioritize: Discuss the generated ideas, identify the most promising ones, and prioritize them based on feasibility and user impact.
• Prototyping Power: Create low-fidelity prototypes (think paper sketches or digital wireframes) to visualize your ideas quickly and gather early user feedback.
• Testing and Iteration: Refining Your Solutions

The magic happens when you confront your ideas with real users:

• User Testing: Conduct usability testing sessions with your prototypes. Observe user behavior and gather feedback to identify areas for improvement.
• Iteration is Key: Don't be afraid to iterate! Based on user testing results, refine your prototypes and repeat the testing process until you achieve an optimal solution.

Wrap-up and Next Steps:  Keeping the Momentum Going

• Debrief and Action Planning: Discuss key learnings from the workshop. Assign clear next steps and define roles and responsibilities for moving forward.
• Feedback and Appreciation: Thank participants for their contributions and gather feedback on the workshop itself. This helps you improve future sessions.

Bonus Tip:  Keep the energy high throughout the workshop with energizing activities and short breaks.

 

By following these steps and fostering a collaborative environment, you can run a design thinking workshop that ignites creativity, fosters innovation, and propels your UX projects to new heights. Remember, design thinking is an iterative process. Embrace the journey, and watch your ideas transform into exceptional user experiences!

Design Thinking useful resources by IxDF

Design Thinking template

Design Thinking Course

The 5 Stages in the Design Thinking Process

Top 5 Desktop & Website Based Prototyping Tools

Working in the design industry, you are inevitably to do some prototypes, of course, that is also inseparable from a variety of tools. A handy tool makes a handy man. Good prototype software can greatly improve your efficiency, but each tool has its own advantages and disadvantages. There is a list of prototyping tools/apps based on browser, PC, and mobile devices. In order to better help you make the right judgments, and less detours, today I will introduce the product features of some commonly used prototyping tools.

1. Axure RP

Despite the variety of prototyping tools whose functionality and usability are constantly developing in recent years, but Axure is still the ace among these prototyping tools. It’s a very good prototyping design software on Windows, also the first choice for predesign work.

Price:

Free 30-day trial.

Pro: $289 per license

Team: $589 per license

Enterprise: $99/month

Features:

1. Renowned prototyping tool with large user population.

2. Rich video tutorials with multi-language.

3. Built-in widgets and a huge library of third-party widgets.

4. Good for making interactive prototype with complex interaction.

5. Professional training and support documentation.

Preview:

Directly press F5 to preview online, or preview via mobile device:

Export the project to HTML, and then open in Safari;

Open the uploaded project from PC through Axshare.

Export:

Support for export file types: HTML, DOCX, PNG

2. Mockplus

As an emerging rapid prototyping tool, Mockplus provides a large number of components and icons, and it’s user-friendly design helps users starting design quickly. The interaction design in Mockplus is fully visualized, that's WYSIWYG. It allows your to add page link and interaction for components with simple drag-and-drop. Simple, convenient visualization operation greatly simplifies the interaction design, also improving the work efficiency.

Price:

Free trail

Monthly subscription: $20

Yearly subscription:$119

Features:

1. Low learning curve, easy to learn for a first-time user.

2. Easy-to-use drag and drop, prototyping is fast.

3. A huge standard library of components (200) and vector icons (26,00).

4. Interaction design is visualized, adding interactivity to individual elements with simple drag and drop.

5. Comprehensive ways to preview and share your project: export to HTML, export to demo package, export to images, export project tree, publish to cloud and scan QR code.

Preview:

Mockplus supports to preview your prototypes in 8 different ways:

1. Press F5

2. Export to HTML5 view online

3. Export to HTML5 offline package

4. Export to demo package

5. Preview on mobile device by inputting view code

6. Scan QR code

7. Export to image

8. Export project tree

Export:

Support for export file types:.exe, PNG, HTML, Project tree (Mind Map, Tree View, HTML, MarkDown, XML, Text)

3. Justinmind

JustinMind is mainly focusing on high-fidelity prototyping. Compared with other interactive prototyping tools, Justinmind is more suitable for mobile device (iOS & Android) prototypes. If you want to create a complex high-fidelity prototype, you can try it.

Price:

Free 30-day trial.

Pro: $29/month (billed yearly: $19/month)

Features:

1. Gesture interaction

2. Custom components and libraries

3. Rich interactions and animations

4. Conditions and variables

5. Team prototyping and version control

Preview:

1. Preview online

2. Preview on device

Export:

Support for export file types: HTML + JS, Word, PNG, Navigation map

4. Invision

InVision is a web-based interactive prototyping tool. It can easily achieve a very good collaboration between team members, gather feedback to help designers quickly design product models, manage design teams, and online collaboration assistance. The static pages, mobile app wireframe can be quickly turn into clickable, interactive prototypes.

Price:

Free - 1 prototype

Starter - $15/month, 3 prototypes

Professional - $25/month, unlimited prototypes

Team - $99/month, unlimited prototypes

Enterprise - Unlimited prototypes, plus advanced features

Features:

1. Easy to learn.

2. Quick and intuitive to add screens and create hotspots.

3. Support for gestures and transitions.

4. Sharing and commenting system are good for collecting feedback.

Preview:

Via browser on PC or mobile devices

Share:

Prototypes can be share through URL, Email, SMS, etc., you can also download the ZIP prototype package or PDF

5. Proto.io

Proto.io is a very powerful web app with a lot of features. However, it needs to set by dragging and dropping of each step, click the button, and adjust the value in the options. Sometimes it’s a bit difficult to find some of the settings you need.

Price:

Free 15-day trail.

Freelancer: $29/month, 1 user, 5 active projects

Startup: $49/month, 2 users, 10 active projects

Agency: $99/month, 5 users, 15 active projects

Corporate: $199/month, 10 users, 30 active projects

Features:

1. A huge standard library of components.

2. Support for adding interactivity to individual elements.

3. Support for importing designs from Dropbox.

4. Support for Sketch and Photoshop plugins.

Preview:

Preview through HTML or send SMS to mobile

Export:

Support for export file types: HTML, PNG, PDF

Original Post at Mockplus.com.

When to use Variables in Axure

Axure provides capability to invoke information and triggers with the help of variables. Variables in Axure are less similar to the variables which developers use but are more simple. Learning how to use variables in Axure is not important, important is answering when and why first. Using variables in Axure is good when a designer is having a good understanding and maturity in design prototypes in Axure.

When to use Variables:

To show more ‘Personal’ feeling or Human touch – Personal and human touch provides more realistic feeling for user. If user’s name/role etc. (in text format) are coming in one screen (form) and user moves to another page by submitting the form then instead of showing generic message, you can show more personalized message as user has submitted the data in previous form.

Moving data from one page to another – If you are working on dashboard or data heavy application where user enters some data and you want to move entered data in another screens then we can use variables and reduce some elements from Axure workspace.

Reducing panels in dynamic panel and hidden stats – If you have different panels in a DP just to show variation in text, then you can use variables and move the respective text value in one.

Example: In any app, you have one ‘List of record’ where each record is having unique ‘record number or record name’. On click of any record you open a page which contains record number/name along with details. Now showing different record you might create different pages which will be quite laborious. With the help of variable only 2 pages will be able to show List and details page with all record numbers.

In upcoming article I will be talking about how to use variables in Axure.
Share your feedback on this article.

Author

Abhishek Jain

User Experience Designer & Researcher

@uxdabhi

A Rapid Mockup, Wireframe & UX Prototyping Tool for Designers

The process of wireframing can be totally non-tech stage of any app or web development, requiring only a skeletal outline of essential elements, such as header, navigation, content and footer area, to illustrate any possible interaction from a user. With that said, it’s the utmost important, yet underused, stage of any given project.

There are more avenues than ever to sketch a wireframe, even most notably pen and paper (the most cost-effective and easiest way), but for the sake of this article we have focused on a new-born yet feature-rich tool - Mockplus, with every aspect of the product covered in details. Let’s read on and prototype away!  

An Overview of Mockplus

As a relatively new player in the prototyping field, Mockplus has emerged as a real stand out thus far with a smart team from the orient supported. Instead of overemphasizing on functionalities, this agile design tool does give user experience the highest priority, making sure anyone of every level can prototype faster, smarter and easier. It’s user-centric interaction and highly-intuitive interface have gained an increasing number of global customers.      

Specifications & Feature Highlights

Though some people may prefer to go vanilla and create prototypes by hand using paper and pen, one thing that UX designer or researcher have in common is they keep looking out for new technologies. No one would like to use sophisticated tool if he/she can achieve it by a simple alternative. Following are some highlighted features of Mockplus that may take your design process to the next level with least efforts.

1. Fully Visualized Interaction

Interaction design focuses on creating engaging interface with well thought out behaviors. It is drag-and-drop based at Mockplus, which means you can build interactive prototypes in a totally visualized way, with no calculation or repetitive selection required. As shown, the Link Point on each component is all about setting up interactive components and a link between pages, no matter in-page or cross page.

Let’s say we need to make a movable picture when the “Adjust” button is clicked. Just click on the button component and then drag the link point to the needed picture. Once done, a dialog window will appear on the screen to prompt you to define a command for your component. In this case, we choose “Move” and press “OK”. 

2. Ready-made Components

Pre-designed and readily available components will obviously reduce the overall design time and greatly improve quality. At Mockplus, there are over 200 ready-made components specifically designed to fit both mobile and web apps, making interactive design as time-efficient as possible. The newly-added components include pop-up panel, image carousel, stack panel, scroll box and sliding drawer, etc.   

 

Taking the “Scroll Box” as an example, you can achieve scrolling for a web prototype by simple drag-and-drop. Also, there is another effective way to set scrolling for mobile prototype with header and footer area fixed. This tutorial illustrates how it works. 

3. New Features Wrapped in V2.19

Like many other tools on the market, Mockplus keeps improving and evolving rather rapidly, with a cool set of new features added in each update. As for the upcoming version 2.19, there are four spotlights that you should never miss out:

A. Around 3000 vector-based icons. A total of 3000 icons will be available for free use, with 2500+ vector icons and 400 flat icons included. All of the new icons are high-quality and support proportionally scale.

B. Auto-recovery option. This type of interactive command allows you restore the original interaction after the first interaction occurs. With that said, only one touch of the button can revert back to your original interaction.

C. Export to project tree. You have a high-level view of page flows and choose to export to various file forms, ranging from Tree View, Mind Map, to CSV (opened in Excel), Text as well as XML.

D. Copy text from demo package. The ability to copy all or only the selected text from the demo package by dragging marquee on the prototype page. It’s a time-saver for UI designers and developers.

4. Selectable “Wireframe” & “Sketch” Style

When rendering your design, you can decide on a style for the mockup. The Wireframe style adopts geometrically reduced shapes, while the Sketch style takes on a hand-drawn outlook. Mockplus allows you to switch between the two styles with ease.  

5. Multiple Choices to Preview on Any Device

Not only does Mockplus let designers quickly make interactive prototypes of their mobile, desktop or web apps, but also offers a fluid view of prototypes on any device, in a web browser or on a mobile device using the Mockplus app for iOS and Android.

In the case that you need to make a mobile demo for completed sketches, there are two flexible ways to choose: one way is by scanning the generated QR code, another way is by publishing to the cloud. Undoubtedly, such a device preview will give you instant feedback of how a layout works on different screens.  

Pricing Policy & Exclusive Offer

The pricing of Mockplus is “Pay as you go” with a monthly or annually plan to enjoy rapid prototyping on mobile, web and desktop platform. The monthly subscription is priced at $20/mo, but there will be an exclusive 50% discount

for yearly plan which costs $119 only. The “Group Purchase” is meant to anyone who needs three or more copies of this software for team use, offering up to 40% discount without tied contract.  

If you happen to be a student, teacher or educator who is engaged in UI/UX design or other software design training related positions, you can get FREE trial of Mockplus Pro version. Submit your request and they will be back in touch soon.

Technical & Documentation Support

It’s always important to have reliable technical and documentation support to guide your work. Instead of leaving customers in stranded and helpless, Mockplus treats every user as they treat their own family with efficiency and professionalism. It has been praised for responsive and informative support since the first inception.    

For regular users who want to address their minor issues independently, they can search and find documentation articles from Tutorials page. Plus there is a series of YouTube videos awaiting for your discovery.     

How about Customer Satisfaction?

Customer reviews are an increasingly important part of the purchase journey, providing the kind of mass exposure that you might never be able to find via traditional channels. Based on collected online reviews, a majority of people are satisfied with Mockplus service and product, with little negative remarks yet to discover.

Ari Arturo Velázquez Fierro, an interaction designer, said “I have used the tool and I love the idea that making screen view through QR code. I’m really satisfied with what I see and even start recommending it at the office to some of my colleagues. I love this app and it is super easy-to-use I must say”.

Shalaka Bhagwat, a freelancing journalist & content creator said “I love what I see at Mockplus, a rapid prototyping tool that offers template designs for various app components, making it so convenient for the end user, especially if they are keen on investing their time in working on other stuff that goes into making an app: the logistics, the market survey and communication”.

Perhaps the biggest downside of Mockplus is the lack of HTML file format, which won’t be available until mid-August. Also, it is a non-web-based tool (in consideration of the project file security) and may take some time for advanced features, such as adaptive design.   

Closing Notes - The Choice of Rapid Prototyping & Wireframing

As there are too many tools focusing on functionality instead of usability, the presence of Mockplus is like breathing fresh air with the ease of making ideas visible in an instant. Also, the user-friendly pricing and well-informed support make it an excellent choice for rapid prototyping and wireframing. For more details, just visit www.mockplus.com

About Author

Berry Sarah

Email: bleachmizu@gmail.com

The Best UX/UI Designer Tools, Resources, Blogs & Books Collection - Part 2

This is the second article of "The Best UX/UI Designer Tools, Resources, Blogs & Books Collection" series. This list covers Prototyping Tools, Mobile app Prototypers & Design tools. (Read Part 1)

Prototyping Tools

1. Pidoco -Online wireframe and prototyping tool.

2. Uxpin -Online tool let your team design, collaborate, and present prototypes.

3. Mockplus -Easy to use prototyping tool helps you design rapidly.

4. NinjaMock -An web-based and simple prototyping tool.

5. Axure -Tool for create high fidelity and complicated prototypes.

6. Justinmind -Tool for high fidelity prototypes.

7. Balsamiq Mockups -Tool for simple and low-fidelity wireframes.

8. Proto.io -Tool for design and prototype.

9. Invision -Web-based prototyping tool that make your design live quickly.

10. Marvel -Prototyping tool for linking the screens together.

11. OmniGraffle -Prototyping Tools for Mac Users.

12. Flinto -Prototyping tool for linking the screens together. Mac only.

13. Mockflow -Another platform for prototyping, with the possibility of project planning.

See Also: A Full List of UX Prototyping Tools

Mobile App Prototypers

1. Mockplus -Prototype for iOS, Android, desktop and web. Preview design on actual device easily.

2. POP -Transform your pen+paper ideas into a real working prototype quickly.

3. AppCooker -Prototype App on iPad.

4. Framer -A new way to design with code.

5. Pixate -Experience your ideas on device as if they’re completely real.

Design Tools

1. Skecth

2. Adobe Photoshop CC

3. Pixelmator

4. Adobe Illustrator CC

5. Adobe Dreamweaver CC

6. Adobe Fireworks

We hope you enjoyed getting to know about these design resource and tools. Hopefully, through them, your journey of being a UX or UI becomes easier!

Read Part 1               

Original Post

About Author

Becky

Email: becky@jongde.com