UX Design Workshops

User eXperience for digital product development

UX Design Workshops

A UX Workshop is the meeting of analysts, designers and stakeholders who have expertise and experiences in the UX and the targeted market. It is the first phase to share ideas of users’ needs, knowledge of the market and try to find effective solutions together within a short amount of time.
We hold several types of workshops, depending on the project requirements, they could be quite different whether the objective is for example to create a mobile app UI, a website or B2B software. In general such workshops are particularly needed for all projects that involve user interfaces aimed at selling or facilitating workflows.

Outsourcify as your UX agency

We are a full-service Digital Product Development team and as such we consider to be one of the most prominent UX agencies in Bangkok. Our UX team helped dozens of our clients through workshop to

We provide :

  • UX research: we offer user research, competitor evaluation, customer insights, personas, and UX strategy,
  • CX (customer experience):  we research and execute user experiences across all touchpoints to understand the holistic journey of your users,
  • User Interface wireframing: we work in an agile process and proceed with an iterative process nailing down the user experience of all screens of your digital product,
  • Prototyping: we design a dynamic clickable prototype from the wireframes which can be tested with the users and stakeholders.
Img 3615

What Is a UX Workshop?

UX workshops are aimed to bring designers and stakeholders together to discuss the application’s current user journey, share understanding whether there are any major user pain points and find the effective solution for better user experience and define the right layouts to prepare for the visual design.

We conduct activities such as empathy mapping, user journey mapping and creating personas to encourage participants in the workshop to think about users’ needs effectively. After effective ideas and solutions are clustered, we work on the prototype (wireframe) based on them.

Kannika Wireframe 2

Examples of activities

We conduct activities such as empathy mapping, user journey mapping and creating personas to encourage participants in the workshop to think about users’ needs effectively. After effective ideas and solutions are clustered, we work on the prototype (wireframe) based on them.

Empathy mapping: We put together with all the necessary stakeholders and designers to help find users’ thoughts and feelings while they use their products and applications.
User journey mapping: We apply user journey maps to understand and enhance the user flow or create a new experience for the target users. We choose to create a persona to support this map. During the user journey mapping, stakeholders draw features, ideas or highlight specific features and leave feedback.

1 9zlv40jlvhn S0sm0bfstw

How we run a productive design workshop:

Phase 1: Initiation

Depending on the scope of the project i.e. which is big and requires discovery or design workshops, we like to split workshops into several short ones; first workshop of about 3 to 4h then several ones of 1h 30 to 2h max later in the process.

Phase 2: Planning a workshop

To run smoothly, we prepare for all the tasks we need to do beforehand at the workshop. In particular, we prepare briefs for stakeholders, invitations to participants and the meeting moment, materials to be displayed, and introduction pitch, etc.

Phase 3: Set challenge and objectives

We clearly articulate the goal of the UX workshop to participants. Within the workshop, we try to figure out the product and business inside, out and needs through the interaction and activities such as interviewing clients and writing down their ideas.

Phase 4: Thinking Exercise (Empathy Map)

Generally, we use thinking exercises for discovery and design workshops rather than for technical workshops. It is a process based on the Empathy Map Canvas tool which consists of Explain, Execute and Examine, we develop deep, shared understanding and empathy for users. We use it to help ourselves improve customer experience and to design better work environments. In addition, we conduct a competitor bench marking exercise with a focus on functionality, look and feel through reviewing competitors to understand the functionality the design should have.

Personas are fictional characters who embody specific key characteristics of target and/or current user groups and thus draw closer to them. They represent the different user types who might use a website or application.

These personas are drawn out of the user analytics data from the existing business or from the stakeholders’ knowledge of their target group (usually by conducting interviews with their potential users).

How to create personas?

We create user personas at the beginning of the work in order to have the users in mind throughout the design process, to be able to put ourselves into their position.

  1. Be aware of the user’s prior knowledge about the given area: Who is the product for. What do users know about similar products? What expectations do they have? All these need to be taken into account when designing the applications.
  2. Define the persona by starting with basic data and articulate more specifics to complete a picture of that persona. The basic data to start with is:
    • Name
    • Age
    • Occupation
    • Behavior
  3. List the user needs and features with Experience Map. The Experience map is created from research gathered through stakeholders’ interviews and web analytics. The Experience map displays this research through storytelling and visualization. It presents perspective to show a user’s true experience.

Phase 6: Creating Sitemaps and Wireframes

We always start web / application design projects with a structure and a planning process based on the agreed ideas through the workshops. We don’t begin visual (UI) design work until the sitemap, wireframes and Information Architecture have been reviewed, discussed, modified and approved by team and clients.

What is a sitemap?

A sitemap is a list of all the pages that will be on a website which is depicted as a flowchart mostly. A sitemap helps to prioritize what content and pages are most important. Without a sitemap, the website will be unorganized.

What is a wireframe?

Wireframes are used early to establish the basic structure of a page before visual design and content is added. It is basically the skeleton of the project – like an architecture plan comes before starting the actual interior design. Wireframes allow us to build realistic, clickable proof of concepts that allow users to get a feel for what we’re building.

It is here to define the Information Architecture (IA) which

What is Information Architecture?

As it’s self-explanatory, the Information Architecture is the structure of the content itself.

In other words, IA definition is the answer to one question: “what content to place and where?”. Of course, it becomes more complex than that as we need here to consider all the previous researches on User Experience, personas, journeys etc.

This IA defines the hierarchy of the content, it is answered by going through a lot of questioning such as – “Following this user persona and journey, this or that title would be more interesting to place here or there” etc.

How to Wireframe a Website?

There are a number of wireframing tools to create wireframes quick and easy such as Adobe Xd, Figma, Sketch, Invision and etc. Our design team normally uses Adobe Xd when we work on the wireframe.

How we make wireframes:
  1. Focus on UX. A wireframe is not a UI design.
    When we’re wireframing, we try to keep our minds up that wireframe isn’t about filling every page or loading the screen with all visual design components and focus on the user experience. It’s about knowing “Who are the main users, and how can we make the experience of using a website as seamless as possible for them?”.
  2. Make it simple.
    Wireframe is the early stage before visual design. We create the wireframe stays simple and shows how elements are laid out on the page and how the site navigation has to work by using simple rectangles and grayscale colors.
  3. Summary of guidelines we keep in mind when we work on wireframe:
    • Keep colors to grayscale: white, black, and the grays.
    • Use a maximum of two generic fonts.
    • Avoid Graphics (pictures, backgrounds, etc.). Try using simple rectangles and squares as placeholders with an “x”.
    • Avoid using branding (logo, slogan, company themes, etc.)

Interested in a UX Workshop?
Speak with our experts!

Contact Us
Interested in a UX Workshop?
Speak with our experts!