2-3. Determining the Direction of Expression Ver. 2022.03.31

Consider The Following...

To begin, please answer the questions in the Google Form below. Your responses will be anonymous. When you have finished answering, please review the other learners' answers.

In this lesson, we will learn the process of narrowing down the expression (= function and style) based on the purpose of the design. Once you have finished this lesson, please "evaluate" what you see here one more time.

Doing so will allow you to compare the "you" from before and after you have engaged the key question of each lesson. What is important is that you experience this learning process for yourself. When doing so, please remain aware of any changes to your vocabulary or perspective that have come as a result of this lesson.

Determining the Direction of Expression

"2-2. Defining the problem to be solved" in the previous lesson, we discussed the relationship between existing digital products and people, and verbalized the problem to be solved using a PoV.

In the next process, we will determine how the digital product should be expressed based on the PoV. This is the process of considering the functions and styles that are necessary to meet people's needs. If important discoveries are made during the process, it is possible to redefine the problem to be solved.

In "Chapter 1: Interpreting Digital Products" of this Digital Literacy OER, we learned how to observe and evaluate how information is organized for the purpose of digital products. In contrast, in the process of "Determining the Direction of Expression," which is covered in this teaching material, we consider how information should be assembled for a purpose [1].

-----

Functions and Style

The expressions that make up digital products can be divided into functions that respond to people's needs and styles (= theme colors/fonts) that visually support the function.

It is important to emphasize that style is not just decoration. Functions and styles share the same purpose.

For example, how would you feel if a web page with the purpose of "informing people that subscriptions are safe and secure" had a yellow and black color scheme as shown below?

Some people may think of disaster drills or virus warnings. The combination of yellow and black is a color scheme known as warning colors. It doesn't really fit the purpose of communicating the safety of subs.

The role of style is to visually support the function. A style that matches the purpose creates a sense of clarity and security, and makes the function work effectively. Therefore, an excellent expression is one in which function and style work together to create a synergistic effect.

In this lesson, we will focus on the function and style of digital products, and learn how to determine what type of expression achieves the purpose.

----------

The Process of Determining the Direction of Expression

There are two main things to consider in this process.

First, consider the steps a user will take to achieve their goals with the digital product and organize the functions that should be provided. Second, research visual expressions that match the theme and purpose of the product and define the style characteristics, such as colors and fonts.

As shown in the diagram, the Journey Map is useful for examining function and the Mood Board is useful for examining style.

-----

1. Considering "Functions" in the Journey Map

A journey map is a tool to examine the experience of a person with a specific goal (i.e., the main character) who will be accessing the digital product you are designing and achieving the goal [2].

Let's check the template. In this section, we will examine the three stages of entrance, experience (= use of the digital product), and exit. By imagining before and after the use of digital products, it becomes easier to capture the purpose and needs of the main character.

The curve drawn in the diagram is a storyline that climaxes with the achievement of the purpose. It helps to imagine the process by which the main character achieves the goal.

The main purpose of creating a journey map is to map the user's experience of the function of the digital product. The steps are as follows:

1. Consider the entrance and exit.
2. Consider the experience (=use of the digital product)
3. Consider the functions of the digital product as they relate to each other.

In the entrance stage, we list the reasons why the main character decided to use the digital product. Here, we try to understand the main character's need for the digital product as concretely as possible.

In the exit stage, we list the possible actions that the main character will take after experiencing the digital product. For example, a reader who has finished reading an introductory book may want to access more specialized information. In this stage, we consider the exit as the beginning of a new experience and think about what is needed to build a bridge to the main character’s new experience.

In the experience stage (= use of the digital product), we list the possible changes in thoughts, feelings, and behaviors that can occur before the main character achieves their goal, referring to the structure of a general story. In this stage, recall your own experiences and think about what a fulfilling experience for the main character might be.

In the lower part of the journey map, "necessary functions," we list the functions that support the main character in achieving their goals. Then, we consider the appropriate arrangement of the functions necessary to achieve the main character's objective while mapping them to the "main character's experience" in the upper part of the journey map.

The goal of creating a journey map is to visualize and simulate the steps users take to achieve their objectives using the digital product. You can understand what users need to overcome in order to achieve their goals (knowledge to be acquired, operation methods, etc.) and draw a rough sketch of the necessary functions. We will learn more about the specific thought process in the next section.

-----

2. Examining the "Style" on a Mood Board

A mood board is a tool for collecting and categorizing visual expressions. By collecting and categorizing visual expressions related to a theme, we can examine the mood (= "-ness") that suits the purpose of the digital product.

What is the basis for our perception of "-ness"? What are the characteristics of expressions that give us a sense of "-ness," such as medical "-ness," engineering "-ness," and information-technology "-ness"?

In general, "-ness" is something created by cultural constraints. For example, the theme color of many medical-related websites is light blue. Why is this?

One reason may be that people associate medical care and cleanliness. In addition, the light blue color of surgical gowns used in surgeries and other procedures may also create a sense of medical care.

For example, the theme of the Hokkaido University Hospital website [in Japanese] is a mixture of light blue, which represents medical care, and green, which symbolizes Hokkaido University.

Let us now consider the cultural constraints imposed by color. Suppose an acquaintance of yours wants to propose a new approach to medicine. He told you that he is going to create a website with red as the main color to refresh the existing image. Red does not seem to be used as a color scheme. How do you feel about that?

You may get the impression of a fire station. There is a gap due to cultural constraints, and it may be difficult to feel the medical-ness.

In order to correctly convey what you want to say, you need to identify the essence of “-ness" by interpreting cultural constraints. A mood board is a useful tool for this task.

In this lesson, we will focus on how to explore the mood (= "-ness") of a digital product for its purpose by collecting visual expressions related to the theme and determining the appropriate style (= theme color/font) using the following steps. The specific thought process will be covered in the next section.

1. Extracting the theme
2. Collecting expressions related to the theme
3. Defining a style that embodies the theme

----------

So far, we have explained the "Journey Map" for organizing "Functions" and the "Mood Board" for considering "Style".

In the next section, we will demonstrate the specific process of using these tools to determine the direction of expression.

How to Set the Direction of Expression

Now, let's look at how to determine the direction of expression. In this section, we will consider the most appropriate expressions, taking over the expected issues and the PoV from "2-2 Defining the Problem to Be Solved".

----------

Assumptions

• Context: An assignment for a class on digital literacy
• Assignment: To create a web article on the theme of subscription
• Condition: Submit the URL of a web page created with Adobe Creative Cloud Express (formerly Adobe Spark)

Assumed PoV

1. I am here to help [people who have a thirst for knowledge, who want to understand social changes through everyday examples, and who use subs daily, but are not interested in subs per se].
2. Not [web article explaining definitions and related information about subs].
3. I want to provide [a web article that examines the change in era through subs].
4. Because [for those who are not interested in subs per se, it will be more intriguing to examine the change of era through subs. Also, by examining subs from the perspective of "innovation of meaning," which has attracted much attention in recent years, we can provide a framework for examining social changes based on everyday examples].

----------

Examining "Functions" in a Journey Map.

• Preparation 1: A PoV that defines the problem to be solved.
• Preparation 2: A web tool such as Adobe XD or Google Jamboard or a piece of paper or a whiteboard to draw a journey map. Writing utensils and post-its.
• Expected deliverables: See figure below

The journey map was a tool to visualize and simulate the steps users take to achieve their goals using digital products. Here is an example of the process of organizing the things that users need to overcome in order to achieve their goals (knowledge to be acquired, operation methods, etc.) and drawing a schematic of the necessary functions.

A model of a journey map can be downloaded from the following link:

＊AdobeXD and Google Jamboard are free software. Please refer to the column at the end of the lesson for instructions.

---

1. Considering "Entrance" and "Exit".

First, we will consider the entrance at the beginning of the experience, and the exit at the end of the experience. We will focus on the main experience, but ideas for functions may also come to mind. Make a list of the items while sorting the stickies up and down.

The following video (4 min 20 sec) shows the process of using Adobe XD to incorporate the content defined in the PoV into a journey map.

*You can choose English subtitles from the video's subtitle panel.

-----

2. Considering the "Experience" (i.e., the Use of Digital Products)

In the following video (6 min 5 sec), we will examine the experience (= use of the digital product) process of the main character, keeping in mind the storyline with the achievement of the goal as the climax.

*You can choose English subtitles from the video's subtitle panel.

-----

3. Considering the "Functions of Digital Products" Correspondingly

The following video (7 min 19 sec) shows the process of appropriately organizing the functions necessary to achieve the goals of the main character while mapping the experience of the main character and the functions of the digital product that are being drawn on the journey map.

*You can choose English subtitles from the video's subtitle panel.

-----

Through the above process, the necessary functions have been organized.

In the process of creating a journey map, it may be necessary to revise the PoV. In fact, this is precisely the reward for visualizing the blurriness in your mind through a journey map. By imagining the steps of the experience, you may have discovered real needs and goals. A freshly made PoV is a "shitty first draft" and should be updated as needed. Make effective use of the discoveries made in the process of creating a journey map while exploring the correct direction for your work.

----------

Examining the "Style" on a Mood Board

• Preparation 1: A PoV/journey map that defines the problem to be solved.
• Preparation 2: Web tools such as Adobe XD or Google Jamboard or paper, cardboard, whiteboard, etc. that can be used to display photos or scrap images
• Preparation 3: Adobe Color/Behance/Adobe Fonts
• Expected deliverables: See the figure below.

The goal of creating a mood board was to gather visual expressions related to the theme, explore the mood (= "-ness") that suits the goal of the digital product, and determine the style (= theme color/font). Here is an example of the process of considering the style.

-----

1. Extracting the Theme

First, let's try to put the theme of the digital product to be created into words, based on the current state of the PoV and journey map. Think of this as organizing the main points of the digital product and extracting the search words necessary for exploring the visual expression.

First, let's make a list of words that appear frequently, referring to the PoV created to set the problem to be solved and the journey map that depicts the functions that the digital product should provide.

• Subscriptions (= subs)
• Change of era
• Change of times
• Change in consumption activities
• From ownership to use
• Innovation

As you go through the list, focus on the words that symbolize the content you will provide in your digital product. It can be helpful to integrate multiple words or to think of paraphrases.

You may also want to play an association game to expand your list. For example, you may want to consider the following words

• Innovation
• Paradigm shift
• Digital transformation (DX)

All of the words here can be used as search words. First, it is best to choose words that are easily associated with visual images. The core of the theme, subs, is associated with a wide variety of services, and different images may come to mind. Here, let's start with "digital transformation (DX)" to consider an image that encompasses the entire spectrum of subs.

-----

2. Collecting Expressions Related to the Theme

In this section, we will examine how "digital transformation (DX)" is associated with visual expression. This is a process of understanding the cultural constraints of the term. In this lesson, we will create a mood board, focusing mainly on the selection of theme colors and fonts.

Google search, Adobe Color, Behance, Adobe Fonts, etc. are useful for collecting images. Search for "digital transformation (DX)" and other related keywords to explore the relationship between words and visuals. Whenever you find an image that feels right for your digital product, save it and lay it out on your mood board. The following video (8 min 10 sec) shows the working process.

*You can choose English subtitles from the video's subtitle panel.

For example, you can see that the term "digital transformation" is primarily an image associated with the word "digital". A cold theme color would convey that the article deals with the digital society.

Through this process, we were able to gather visual expressions related to theme color and font in the mood board.

-----

3. Defining a Style That Embodies the Theme

Finally, we will examine the style by comparing the visual representation collected in the mood board with what we have examined in the journey map. Here, let's use Adobe Creative Cloud Express to set the theme color and font for the web page. The following video (4 min 37 sec) will show you the procedure.

*You can choose English subtitles from the video's subtitle panel.

----------

In this way, by examining the functions with the Journey Map and the style with the Mood Board, we can see the digital product we should aim to create.

This process can be called the process of putting the experience value of the digital product into a representation. After this, we will move on to the actual prototyping of the digital product and the process of repeated experimentation.