Labels

UX Design : Individual Task : Exercises, User Journey Map, Design Document

29/08/2022 - 24/10/2022 / Week 01 - Week 09

UX Design GCD62304
NAME: Sea Hirayama

I.D: 0347596

COURSE: Bachelor of Design in Creative Media / Taylor's Design School



●Instructions 





●Lecture

Week 1 :
Honestly for this week, I couldn't attend the class because I was in Japan and I had some issue of Taylor's Microsoft account, so I tried to catch up with the slides and website. In this session, I could know about what is UX Design and how we can explore in this module. Also we're required to join Miro for discussion and doing some tasks.

The website links for understanding UX Design :




The term UX (user experience) has been defined and explained in various ways by many people and organisations. To paraphrase the definition in standards, UX can be described as "the sensations, feelings and reactions that occur within a user during, before and after the use of a product or service". UX can also be translated as 'customer experience value'.

Originally, the term User Experience was made widely known by Dr Donald Norman in 1995.

Dr Norman, a human interface researcher at Apple Computer at the time, later stated that he coined the term user experience because the concepts of human interface and usability were too narrow and he wanted to cover all aspects of a person's experience with a system. He later stated.

The Nielsen Norman Group, which he founded with Dr Jakob Nielsen in 1998, describes the user experience as follows: "The 'user experience' includes all aspects of the user's experience of the system.

'The user experience includes all aspects of the interaction between the end user and the company, service or product.

The first requirement of an exemplary user experience is to meet the customer's needs precisely, without bothering or bothering them. The next requirement is brevity and elegance so that the product is a pleasure to own and use.

The Definition of User Experience (UX) - Nielsen Norman Group (translation and emphasis added by IID)
This means that UX is not only about how users use a product or service, but is also a larger concept that includes their impression of the product or service and the company that provides it.

So what is 'UX design', where 'design' is added to 'UX'? This refers to "planning and providing products and services so that users have an ideal experience".

The expression 'UX design' tends to lead to the misconception that UX, like UI, can be designed directly by manufacturers and service providers. However, as we have discussed, UX is subjective to the individual user, so it is necessary to bear in mind that they can only design for UX.


Week 2 :
For this week I still couldn't attend the class, so after the class were recorded, I tried to learn about this session. Also we're given some exercise to utilize the knowledge of UX Design so far in Miro. 

Designing good UX design requires a research phase about the target users before developing the product. Understand what users need and want, and what they feel about similar products on the market.

If you already have a product on the market and are working to improve the user experience, you start with a similar stage of understanding your users in depth. However, in this situation, it is advisable to ask more specific questions about the current user experience in the product.

User-centred thinking puts the needs of users first when developing and improving products. This requires detailed and individualised customer analysis rather than general consumer trends or large-scale market analysis.

Instead, aim to understand the customer as deeply as possible in order to understand not only why the customer buys the product, but also its place in the customer's life. In other words, this way you get a detailed and comprehensive view of the product as an all-encompassing experience rather than just a product.





Week 3 :
Also I couldn't attend this class with technical issue, so I tried to catch up with learning myself form some website and youtube.

Empathy-driven UX design is design that pays attention not only to the usability of the product, but also to the user's emotions that arise during their interaction with the product.

David Kelly, founder of IDEO, describes the importance of empathy as follows.

'What matters in design thinking is empathy for the people you are designing for. Like leadership, it's about building empathetic relationships with the people you support."

Think back, for example, to the first time you bought an Apple device and switched it on. Many people probably felt excitement, joy and satisfaction. The success of a product depends on its ability to provide these feelings every time it is used.

The same applies to digital products. The following innovations can sway user emotions for mobile apps and websites
  • Eliminate navigation flaws.
  • Pay attention to the aesthetics of the design
  • Conduct thorough UX testing
  • Add flourishes with animations and illustrations
Empathy-driven design is closely related to a user-oriented (user-viewpoint) approach.

In order to create products that meet users' needs, you have to look at users' everyday lives. Research the problems they encounter in their daily lives and create products that solve them. If you imagine your target users in a realistic way and understand their lives, you will be able to create products that they need.

Researching the target user is essential before creating a product. The following elements should be established to create a picture of the specific people who will use the product
  • Occupation
  • Family status
  • Age
  • Gender
  • Nationality
If qualitative and quantitative data on target users can be researched in advance, products can be made that better match reality.

The next step is to investigate the problem the user is having.

The key is to focus on the bottleneck of the problem, not the superficial symptoms. Once you have identified the bottleneck, you can reduce the risk of other problems occurring. It is important to try to accurately identify the user's problem and try to solve it.

You can learn a lot from competitors who have already launched products. Research their product reviews and social networking reviews to understand your target audience's preferences. Social networking sites are not only a tool for spreading information, but also for gathering customer feedback about your product and brand. Anticipate UX problems before the product launch by researching your competitors. If you devise ways to avoid such problems in advance, you can reduce the time and effort of user testing.





Week 4 :

In this week, after the brief session of how to recognize the user goals with details and about the UX design more deeper, we got some feedback of User Journey Map to explore in next week. Especially, we learned how to compose the Journey map of UX Design.

1. What is a User Journey Map?

A graph that lists the touchpoints between a service or product and a user in chronological order is called a user journey map. By adding the user's psychology, reasons for action, emotional ups and downs, etc. at each touchpoint to the graph, it is not only possible to get a bird's eye view of the service or product experience, but also to design the experience from the customer's perspective.

In addition, the graph itself can be rearranged according to the form of service and can therefore be used in a variety of situations. For example, LEGO has published a template of a graph transformed into a circle shape.


This template focuses on the experience of flying to New York, and by daring to transform it into a cirque shape, the experience can be thought of in a cyclical way, from before the plane ride, to after the ride, and before the ride again. This allows us to propose how we can make people want to fly again, and how we can encourage them to do so without offending them.

Makoto Shinkai, famous for Kimi no na wa (Your Name), used this customer journey map method in the plot of his film (a kind of blueprint for the entire film) to calculate the timing of when the viewer's mood would be lifted, along with the timeline of the film.


2. How to create it
This section reviews the process of creating a user journey map.
  1. Set objectives.
  2. Setting personas.
  3. Listing the touchpoints.
  4. Filling in the user's psychology and feelings at each touchpoint.
  5. Analysing issues.
  6. Update and improve.

Key points for creating and utilising effective customer journey maps

In order to use customer journey maps effectively, it is important to use them over the long term, rather than as part of a process. By doing so, not only can the invisible value of the experience be efficiently improved, but it can also function as a message board for communicating and passing on a sense of issues and perceptions in an age of high human mobility and rapid service evolution.

1. Based on actual research and user behaviour and comparison
This is the most important point in the use of customer journey maps. In many cases, the persona behaviour described in the map produced the first time will be based on the producer's imagination based on their actual experiences. In reality, however, there is a significant gap between reality and assumptions.

Therefore, in order to understand this gap, we actually observe people who are close to the persona image we have set up and verify it using prototypes that are created as the project progresses. The emotional ups and downs of the actual users and their psychological state of mind are then drawn into a new map. In this way, the points where there are large gaps can be identified.

This is a key action to improve the user experience using customer journey maps. If there are gaps in a good way, this is not a problem, but if there are gaps in a bad way, the experience can be improved efficiently by starting from the largest gaps and working to resolve them in that order.

2. Edit with many people
When creating or improving a map, it is better to invite people from different professions and positions. The reason is simple: it increases the types of issues that can be envisaged for a single touchpoint and the types of solutions that can be proposed.

For example, let's say that the experience of an app for hailing a taxi is designed and validated using a customer journey map. The results showed that customers had more negative emotions than expected when waiting for a taxi to be dispatched. At this point, an engineer might consider whether the matching of taxis could be made more efficient, while a designer might suggest services or content that would make the waiting time less boring.

In this way, different positions can broaden the perspective from which one issue in the experience is considered to be the pain point. Thus, the possibility of finding the essence of the issue is greatly increased.

3. Create maps that are easy to read and move around.
The long-term use of the map will mean that people will be involved in editing the map along the way. Therefore, it is necessary to create an environment in which everyone can edit the map flexibly, while maintaining the map's legibility so that its contents can be grasped clearly when the whole map is viewed from some distance.

If people can understand to some extent when the experience is bad and when it is good, even if they do not need to read the text in detail, it will make it easier for people who are new to the editing process to give their opinion. It is also preferable to be able to make changes to the content immediately, as long-term use of the map will create work to compare and improve it.

During the rebranding of our company, we used Figma and the work was always in a state where anyone could edit it. Some people often use whiteboards and sticky notes, or designers use Illustrator to create maps, but this is not recommended as there are many areas where the creation and editing is left to a few people, and in the case of sticky notes, it is also time-consuming to maintain the state of the map. It is important to always create maps in an open and stable environment.

4. Express the user's emotions in as much detail as possible
In the diagrams showing the ups and downs of emotions, which are the heart of this graph, it is advisable to use emoticons that are rich in expression. What is not recommended is to express 'good', 'bad' and 'normal' using inorganic, low-pattern emoticons with dots and lines in a circle. This is not suitable for long-term communication as it is difficult to recall the atmosphere of what was good when looking back at the map later.

When actual user feelings are included in the map, it is possible to see not only how good it was, but also "what was good", such as "it was comfortable", "it was fun" or "it was convenient". Conversely, the bad points also reveal detailed nuances, such as "was it difficult to use", "I didn't understand the content" or "it was boring".

If these are expressed in a clear pictorial form on the graph, it is possible to quickly understand the atmosphere and the impression of the issue at the time the map was produced.


Experiences are difficult to make consistent and improve because they are invisible. UX designers in particular need to communicate the UX they have designed to others and revisit it many times later to improve the service or product. This requires the long-term use of customer journey maps, and the ability to visualize and share experiences with others is key.

In this article, we have identified the key points for understanding the gap between the ideal and the reality of the customer journey map and for smoothly communicating the experience to others. I hope I will make the most of it!




Week 5 :

We also learned about the User Journey Map with how to create and focus point which can show clear and useful.

The user journey is a marketing technique that aims to organize the process of a user's decision-making process, such as purchasing or registering for a company's product or service, as a 'journey', and at which touch points and what communication is necessary.

This series of 'journeys' is called the 'attitude change process' in marketing terms.

Attitudes are the psychological stages that users go through before deciding to purchase a product or service, such as 'want to know', 'interested' or 'want to consider'. Companies must change this attitude until the user finally takes the desired action. The user journey map visualizes this attitude change process (triggers and bottlenecks) in a single picture.

For example, in the above customer journey map, users are thinking at the cognitive stage: 'Cute! I want it!" but as they get closer to the purchase phase, they start to wonder, "Will I be able to wear it? Will I be able to wear it? As they approach the purchase phase, they change into specific concerns and feelings such as "Will I be able to wear it?

Naturally, if users' thoughts, feelings and concerns differ depending on the phase, the communication method that the company (apparel shop) should take will change.

In this way, the customer journey map is used to visualize the sequence of what users are thinking and doing in each attitude and to consider the most appropriate communication to change their attitudes.

Certainly, it is important to know the process in order to create attitudinal change and link it to business sales. But is there an absolute customer journey map for any marketing initiative? This is not always the case. This is because the diversity of touch points and user behavior means that individual behavioral models need to be assembled for each strategy and initiative, rather than traditional behavioral models.

In recent years, the digitalization of all information and platforms has led to a diversification of user needs and behaviors. It is almost impossible to fully capture this complex 'journey' connected to the user's daily life in just one chart in the first place.

Nevertheless, the three objectives of creating a user journey map are

1. to formulate hypotheses about touch points and user behavior

Users think and behave in so many different ways that it is almost impossible to predict all of them. However, with the spread of digital devices, the amount and quality of user information that can be obtained as data is increasing. It is also true that by utilizing this information, it is becoming easier to formulate hypotheses on individual user behavior. Therefore, by visualizing user behavior on a user journey map that enables a cross-sectional view of all touch points, including online and offline, it is easier to become aware of the thoughts and issues behind that behavior.

2. consolidate common understanding among internal and external teams

User journey maps provide a common understanding of the users to be targeted by the entire team, whether internal or external, with the same objectives. As targets and performance indicators differ from organization to organization, department to department and member to member, if there is no common understanding, each individual may pursue their own individual targets, which may lead to a blurring of the entire policy. However, if gaps in understanding throughout the organization can be eliminated using a user journey map, time loss in working together can be reduced, and the consideration and planning of measures can proceed smoothly and with a high degree of accuracy.

3. easier discussion of issues and priorities for measures

As marketing budgets and human resources are limited in any company, it is important to select and focus on the measures that need to be taken and to take the shortest route to maximize business results. In this respect, user journey maps provide a bird's-eye view of a series of user behaviors, so it is possible to visualize the issues and concerns that users have at each phase of their journey. Although it is not the end of the process once created and needs to be updated each time, being able to check the triggers and bottlenecks that cause users to change their attitude in a single table makes it easier for the team to discuss the urgency and importance of the situation. As a result, the team can make decisions faster.

In summary, the purpose of creating a user journey map is to organize the images of users and touch points that differ from one team member to another, to avoid gaps in perception, and to use the map as a basis for discussions towards effective marketing measures.

How to create a user journey map

STEP 1. set goals

Setting goals is particularly important in creating a user journey map. This is because the framework of the map to be created depends on the goal to be achieved. For example, if the goal is "to start with product awareness and to become a loyal customer who will make repeat purchases", it will be necessary to draw a journey that spans several years. For a goal with a short lead-time, such as 'sign-up from a campaign', the journey may take several days or even hours. There are many other possible goals, such as 'increase UGC on social networking sites' or 'increase pull-type enquiries, mainly from websites', rather than sales as the goal, but the time period to be assumed and the granularity to be drawn will vary for each of these.

STEP 2. Establish a user profile

Next, define the users for your company. If you have existing customers or are in the phase of optimizing the measures you have already taken, it is a good idea to set them up as personas in order to have a more concrete common image. Fans of your products and services in particular are ideal users for your company, and you should prioritize marketing activities to increase the number of users like them. Even in the case of new businesses, there are methods to collect information on people close to the ideal user through both quantitative and qualitative research in order to create personas. However, be aware that if you are too particular about the settings, there is a risk that the user journey map will diverge from the actual behavior and thoughts of the users.

Points to bear in mind when setting personas

It is very effective to use specific personas as personas in order to get a clearer picture of the user's behavior and thoughts. However, before setting personas, you need to be strongly aware of your target market. For example, 'Mr A', a frequent visitor to the shop, may visit the shop frequently but may not have a high spend per customer (the amount of money spent per purchase). If the aim is to improve shop sales, it may be more effective to target users such as 'Mr B', who visits the shop infrequently but has a high spend per customer. Before setting personas, it is important to understand in advance what kind of users your company wants to target, and the size and trends of that market, including profitability.

STEP 3: Create a template

The next step is to create a user journey map template. As an example, if you set the horizontal axis to the stages of the user's purchasing psychology and the vertical axis to the user's 'behavior', 'contact points', 'thoughts', 'sense of issues' and 'measures' to be taken at each stage, you can visualize not only the user's issues but also the measures to be taken. However, as mentioned above, it is important to note that the duration of the journey and the user's stage of action will vary depending on the goals set. For example, if the goal is to "increase UGC on SNS" as mentioned earlier, the stages would be "awareness", "interest", "consideration", "purchase", "repeat purchase" and "word of mouth", while if the goal is to "increase pull-type enquiries mainly on the website", the stages might be "awareness", "interest" and "enquiries". If the goal is to "increase the number of pull-type enquiries mainly through the website", then the goals may be "awareness", "interest" and "enquiries". If the goal is "repeat purchase", the start may be "after purchase". Incidentally, the elements on the vertical axis are not necessarily in the correct form, as it is important to understand where the user is in each phase and what issues they are facing, and to be able to think of solutions. In any case, it is important to create a user journey map template for each goal.

STEP 4: Filling in the elements of the map

Based on the goals, user images and the template established in the previous steps, the sheet is now ready to be filled in. We identify all the touch points that users come into contact with up to the goal set at the beginning, and organize the triggers and bottlenecks that caused the attitudinal change, as well as the feelings and thoughts of the users at that time, along the time line. If possible, bring together members of diverse ages, genders and job types from several organizations to discuss the journey from multiple perspectives. This is also effective in deepening common understanding. It is also easier to proceed if information on users is collected beforehand, so it is advisable to conduct quantitative and qualitative research on users. If it is difficult to interview the company's customers, it is also effective to interview sales staff with whom you have regular contact. The user journey map is only a cut-out of the user's buying cycle, and there are cases where users do not behave as shown in the map, or skip the expected steps. With this in mind, organize each piece of information and create a user journey map.

Points to note when using user journey maps

Don't make it up just on the company's own wishes and speculation.

The basis of marketing is the user's perspective. Actions such as purchases and registration are natural occurrences in the daily lives of users, and should not be based on company wishes and assumptions. Company representatives may have preconceptions about users or points of view that they have focused on when selling their products, such as "I hope this resonates with you" or "I hope this resonates with you and you will buy". However, the journeys that reflect these ideas may not be in line with reality. User journey maps are not intended to change the attitude of users according to the wishes of the company, but to help companies get a correct picture of user-driven behavior. In order to create a customer journey map that is in line with the reality of the user, it is important to listen to the user's voice and to create it based on survey data.

Do not make it an objective to create

A user journey map is a way of organizing what needs to happen to lead users to the next stage in order to change their attitude, but it is meaningless if you just create a beautiful table and can't actually use it. To avoid this, it is important to set business goals and clarify what the user journey map is to be used for before creating it. If you start creating a user journey map without a goal in mind, you may find yourself in a situation where there is no place to utilize it. Instead of thinking "other companies are doing it, so let's just start from scratch", create a user journey map with a clear purpose for its use.

You need to keep reviewing and optimizing it on a regular basis.

It is not advisable to continue to use a user journey once it has been created for a number of years. This is because the user environment is constantly changing and so are their needs. For example, assuming a change in the "spread of coronavirus", it is expected that users who have started to refrain from going out have shifted their touch points from "information gathering to purchase" to the e-commerce site instead of the shop. And if there is an inflow of customers, but the results are not impressive, the sense of problems on the e-commerce site will emerge, such as "the site is difficult to view and the customers have left" or "the payment flow is troublesome". If the proportion of sales from e-commerce sites is rising across the business, these are urgent issues that need to be addressed. Regularly reviewing the user journey map is essential for understanding changes in the environment surrounding users, their behavior and their needs. In order to consistently deliver results, it is important to always be facing the users in front of you.

Value the awareness to keep facing the user's challenges.

A user journey map is a tool that visualizes user behavior and provides a bird's-eye view of the user's thoughts and sense of issues in each phase, enabling you to prioritize the appropriate stimuli (solutions) for each phase. By clarifying the purpose of use, rather than making it a goal or an end, it can make a significant contribution to the results of your marketing.






Week 9 : 
Wireframes allow us to map out the functionality of the pages, catch problems early, and save time on revisions later. Wireframes push usability to the forefront. Designers tend to measure a design's usability throughout the development process, from wireframes to prototypes to the final deliverable.





What is a wireframe (WF)?
A wireframe is a blueprint that expresses "what, where and how" to be arranged according to the purpose of a website. As the words 'wire' and 'frame' suggest, it refers to the framework of a website in which elements and information are simply arranged and visualised. It is often shortened to 'wire' or 'WF', so it is important to remember the expressions.

What is the difference between a wireframe, mock-up and prototype?
The terms 'mock-up' and 'prototype' are often used together with wireframe in web production What is the difference between the three? A wireframe is a structure, a mock-up is a design with added colours, etc., and a prototype is a prototype with added movements, such as clickable buttons, etc. The objects to be tested are different for each.

Who makes wireframes and at what time?
Wireframes are generally created by the director after the requirements are defined. In the requirements definition, the director decides what to communicate to what target audience and what results he or she wants to achieve. Based on this, the elements to be included, their order and priority are designed in wireframes. After the wireframes are completed, mock-ups and prototypes are generally created.

When the wireframes have been completed to a certain extent, we sometimes create a website mock-up made of several sheets of paper, called a paper prototype, in order to evaluate the structure. This is used for evaluation by manually expressing possible actions on the website, such as manually changing the paper to represent click transitions.

In UX design, the cycle of evaluation and improvement is repeated several times, and is based on creating a user-oriented service. Frequent prototypes are used for evaluation, especially when there is a lot of user interaction (e.g. clicks and inputs), and the design and design are solidified through a series of gradual revisions.

How to create wireframes

Wireframes generally start with an abstract sketch and gradually flesh out the elements.

1. preliminary preparation (information design)
In the pre-preparation phase, the information and functions that users want are organised and the 'what', 'where' and 'how' of the information and functions are placed are considered. Some of the preliminary preparations for the renewal of the Mielka Heatmap website are introduced below. In the preliminary research/analysis stage, we analysed the information and functions users were looking for using heatmaps, which can visualise user behaviour.
The heatmap data revealed that many users stopped at the price plan table. From this, we hypothesised that 'users are interested in rates and features and want to know more about them?' We then designed the price plan table, which had previously contained only the main points, by dividing it into overview and details. In this way, it is important to analyse and research in advance what kind of content users are interested in, and use this information in the design of the information.

Consider the placement of other necessary elements, such as placing the menu in a prominent position. However, as there is a limit to the space available for placement, it is necessary to prioritise and select the most important elements.

Also, when designing information, be able to explain why the elements are placed in the way they are based on your rationale. The reasons are discussed in detail below, but this rationale is important when evaluating the structure. Especially during site renewal, heatmaps can easily show user behaviour and help to provide a rationale.

Refer to other websites.
If you have a rough idea of what you want the design to look like beforehand, you can get hints on the structure and create wireframes smoothly. Once you have a clear idea of the direction you want users to take within the website (user flow) and the hierarchy of the website (sitemap), look for an ideal website. Once you have a clear image of your ideal website, it will be easier to align your perceptions with those of your team members and clients, and later work will proceed more smoothly. You may look at websites in the same industry sector, but it is also useful to check 'compilation websites' for web creators.

2. sketching
Visualise the arrangement and order of the designed elements in a simple sketch. It can be a grouping of elements without text or images. It is named low-fidelity wireframe because it is far from the final form.

The purpose is to get an idea of the structure, so do not elaborate too much, but draw roughly.

Sometimes sketches are used to seek feedback from stakeholders to see if there are any problems with the general flow or framework. Draw simply enough to get a general idea of the elements and structure.

3. clean drafting
Clean up the sketch so that you can easily add text and elements later. Do not include specific text or sentences here, but rather draw the elements in a graphic form and place them as you would a sketch. You can use either handwriting or a tool, but a tool is recommended as it is easier to share and edit. Some tools are free to use, such as Adobe XD and Figma.
These are efficient because they can be shared between team members, and mock-ups and prototypes can be created continuously. A simple website may be created in PowerPoint or Excel, and any tool can be used.

4. element filling
Finally, concrete elements such as text and images are added to the clean draft. These are named high-fidelity wireframes as they are the closest to the finished form.

Colouring is not required, but the text should be the actual text that will be used. Using the actual text allows you to see the connections between the text before and after, making it easier to verify and evaluate the structure. Also, try to include the images that you plan to insert, as this will make it easier to match perceptions with those involved. Again, it is important to verbalise the reasons for each element and its placement. Being able to explain the structure will help stakeholders understand it better, making it easier to get feedback and refine it into a better wireframe.

Key points and considerations when creating wireframes

Provide clear reasons and rationale for each element.
Conduct research and analysis well in advance.
The purpose of wireframes is not to create design but to design information.
Keep wireframes simple.
Include as much actual text as possible in the wireframe when finished.

Provide clear reasons and rationale for each element.

Why does the user need this information?" Verbalise the elements themselves and the reasons for their placement, e.g. "From the user's point of view, the priority is this." There are two main reasons.

To have constructive discussions based on the rationale.
To test hypotheses and make improvements after creation.

To have constructive discussions based on the evidence
During discussions with clients and team members, subjective opinions are often exchanged. When multiple opinions are expressed, without evidence and reasons, it becomes difficult to consider which opinion should be prioritised, which can lead to a website that is not user-oriented.

For example, if you can explain the intention and reason for placing A in a prominent position, such as "Based on interviews with users, we placed A in a prominent position", you will be more persuasive and can have a constructive discussion.

To verify hypotheses after creation and link them to improvements
After the website is completed, the effectiveness of the website is measured to verify whether the 'hypothesis' at the time of wireframe creation was correct.

If you have a hypothesis at the time of creation, even if it is incorrect, it will be easier to consider where improvements should be made. Always verbalise your reasons and rationale, rather than just saying "I just thought it looked better", so that your explanations to stakeholders are more convincing and gaps in perception can be eliminated. If you cannot explain, you may not have packed the elements well enough.

Conduct research and analysis well in advance.
Clarify the purpose of why the website is being created or renewed. If the objectives are clear, it will be easier to decide what the priorities should be, even if there are differences of opinion with other stakeholders.

The objectives of production and renewal can vary widely. For example, 'to improve usability and reduce abandonment rates' or 'to provide users with the information they want in an easy-to-understand manner'.

In order to clarify the objectives, it is essential to research and analyse user behaviour in advance and clarify the current issues. Using a free heatmap that shows user behaviour at a glance, it is possible to pinpoint in detail which parts of the current website users are not reading, where they are losing interest and leaving the site, and the causes within the page.

Information design, not design creation, is the objective.

The purpose of wireframes is to design information, such as what to place where.

While thinking about placement and layout, it is often the case that you start to 'design' before you know it, for example, whether red or blue is better for buttons. Creating the design from the beginning can take extra time if there are changes to the underlying design.

At the wireframe creation stage, think about the structure and information design, not the design, such as the use of colour. Design is handled by the designer after the structure has been completed.

Keep wireframes simple.

Keep wireframes simple so that they can be easily changed. They are rarely completed in a single step, and many changes are made through discussions with stakeholders and feedback from external parties.

Discussions will increase the completeness of the structure and reduce the cost of subsequent modifications. Create a simple wireframe first so that you can make changes later.

Include as much actual text as possible in the wireframe on completion.

If you include temporary text such as "text will be inserted here", it will be out of sync with the finished image. Making changes in the later stages of the process will take time and effort and incur significant renovation costs, so insert actual text and images as much as possible to reduce the discrepancy with the finished image.




●Exercise
Week 1 :

For this exercise, we're required to think about the some bad UX Design and how it is wrong design. After that we also prepared some solution of it. For my idea, I selected the cup and the sensor.


Figure 1.1 the example of bad UX design with door

Figure 1.2 the cup image with bad UX design

The cup design :
I'm a customer. I'm trying to hold a cup, but....

–The cup is too heavy and tilts to the left, spilling coffee

–If you try to support the cup from below with your middle and ring fingers to prevent the coffee from spilling, the cup is too hot and burns you.

–Trying to hold the cup in place by pressing down with the thumb from above the knob, but the middle finger touches the bottom and burns itself and spills the coffee

Because,

–The cup part is heavy

–Cannot be supported from below

–Slippery because of the slippery top

which makes me feel frustrated and hurt hands. As for solution, Balance the weight of the cup part with the handle part which is 

–Can be lifted by inserting fingers

–Supported from below by the middle finger to prevent it from rotating

–Guarded so that the middle finger does not burn itself by touching the cup surface.

To add, Other cups are also good, where the cup is thick enough to not transfer heat to the fingers (although it tends to be heavier), or where there is a wide surface in the thumb area that provides firm support and thereby reduces rotation.

 
Figure 1.3 and 4 the example of good cup design 

Figure 1.5 the screenshot of cup design in Miro


Figure 1.6 the image of sensor

The sensor design :
I'm a customer. I'm trying to flush the toilet, but...

If the lift button has exactly this form (silver rectangular base with a black round shape and colour with a clear border), it is easy to press it and say "Oh, this is the button", but with this sensor, you misinterpret it as if it were a button and press the black part in the middle.

Because of, Once you recognise it as a 'push', you keep doing it, and it is harder than you might think to rethink, 'Oh, is that a sensor?' which makes me feel frustrated and confused.

For solution, Change the size and shape of the sensor which is

 –Can make customer clean with hands(especially for the covid-19 issue) 

–Any human can use

To add, Still, "Please hold it up for 6 seconds" seems a little too long. I understand that the purpose is to prevent malfunctions, but I think it is too much of an inconvenience to the user.

Figure 1.7 the screenshot of sensor in Miro

Week 2 : User personas

User personas are researched and proposed representations of your target user. Each Persona would be framed from real user discovery by researching and observing their:
  • needs
  • goals
  • behavioral patterns

The aim of this exercise is to allow you to gain valuable insights on your users’:
  • requirements
  • wants
  • demands


Week 3 and 4 : Tips for an Effective Empathy Mapping Session

Some participants might be concerned about putting things in the “right” quadrant. (e.g. Is that a pain or a feeling? Did she see it or hear it?) If you have multiple groups working on building out maps for the same user. there will be nuances on how people categorize things. That’s okay. The goal isn’t to correctly classify information, it’s to identify with the user.

This exercise isn’t about logging every emotional and behavioral aspect of the user. It’s about focusing on the target audience and understanding his or her world as it relates to your work. Going too broad will get things off track.

Change or streamline the categories to work with the session goal, persona or available data. For example, if the persona is a purchasing manager at a B2B company, feelings might not have been relevant or revealed by the research. Make whatever changes are needed to ensure the outcome is useful and the session is productive.



Figure 3.1 the example of Empathy Map Canvas

Figure 3.2 the example of Empathy Map Canvas

For this week, I tried to catch up with this task, so I just research about the app I was curious. After that I explored the data with some images in Miro. (User Journey Map)
For this exercise, task, I selected the Japanese cosmetic app for the woman because my mother also think about it confused application. 

Figure 3.3 the app logo


Improved UX design of cosmetics shopping and e-commerce app

- Dr Ci:Labo

  • Category :Shopping
  • App Store Rating : 1.7/5 points
In 2016, the domestic Japanese EC market for business-to-consumer transactions increased to 15.1 trillion (+9.9% year-on-year), according to research from the Ministry of Economy, Trade, and Industry. The EC conversion rate increased to 5.43% (+0.68 percentage points year-on-year), as well. When it comes to smartphone apps, there are a tonne of shopping apps on the market, including free market apps like Mercari and Frill, in addition to mail-order and EC apps like Amazon, Rakuten Ichiba, and Zozotown.

The category of the Dr. Ci:Labo app is Shopping, but the App Store rating is 1.7 out of 5, which is not a good result, and it seems that it has been out of the category ranking in the App Store for some time. Looking at the user review comments, there were many complaints about the slow start-up and operation speed, and the lack of the crispness characteristic of the app. It is thought that the UI/UX could be improved a lot just by improving this communication speed.

Figure 3.4 and 5 the example of app and table of showing the avarege of user

Strengths and characteristics of Dr Ci:Labo (Seeds Holdings)

1. mail order (EC) is the main sales channel

Since the company was established in 1999, the main sales channels for cosmetics and cosmetic products have been mail order and EC, which currently account for approximately 60% of sales.

2. leading company in the medical cosmetics market

Seeds Holdings is strong in medical cosmetics, cosmetics developed by specialists from a medical perspective, and holds an approximately 40% share of the domestic medical cosmetics market.

3. many female fans in their 30s and early 40s

The 2010 financial results presentation of Seeds Holdings shows a positioning map for Dr Ci:Labo, which suggests that the company has many female fans in their 30s and early 40s. The price range is around ¥5,000 and appears to be aimed at the mid-priced general user group.

What are the challenges for Dr Ci:Labo?

Let's look at Dr. Ci:Labo's mail order and e-commerce service situation in a little more detail. Seeds Holdings' segments include the Dr. Ci:Labo business, which is responsible for the retail business of cosmetics and cosmetic products, and the esthetic salon business. Dr. Ci:Labo accounts for 94% of segment sales (and 95% of segment profit) and is the main business.

For the increase in the number of new purchasers, advertising, campaigns and other promotions can be considered as one of the measures. On the other hand, measures to increase the number of repeat buyers include improving the UI/UX design of e-commerce sites and apps. In particular, smartphone apps can be an effective means of increasing repeat users, as they can use push notification functions and operate faster than the web.

Personas will be defined when considering the UI/UX design of Dr Ci:Labo's mail order and e-commerce app.

According to the Ministry of Internal Affairs and Communications' Telecommunications Usage Trends Survey 2016, the most common age group to purchase products and services on the internet is the 30s, at 58.8%.

Given that Dr Ci:Labo's fan base is also women in their 30s and early 40s, the persona for this mail order/EC app also seems to be women in their 30s. Also, considering that the price range of products handled by Dr. Ci:Labo is around ¥5,000, it seems better to assume women from relatively general households.

Figure 3.6 the table of user details

The persona was assumed to be a woman as shown in the following slide. The following is a brief summary of what they might expect from the Dr. Ci:Labo mail order and EC app.

I want to easily find and purchase the products I want to buy on the EC app.

We want to be able to easily find and purchase the products we want to buy.

I want the functions to be as easy to use as possible.


Figure 3.7 the user persona

In this persona, there seems to be a high demand for easy purchase while looking at a proper product description, and it would be good to be aware of this when designing the UX, as an easy and continuous UI/UX design can also aim to increase the number of repeat purchases.

Figure 3.8 and 9 the example of bad design of app

(1) The first view, but the display area of the campaign section is large, making it difficult to quickly find product categories and listings.

(2) The footer menu always displays a 'Back' button, and there are menus such as free samples and campaigns that could be combined into one, and the UI design does not look easy to use.

(3) The category list for searching for products is located at the bottom of the screen where it is difficult for users to find it, and the combination of tab switching and accordion open/close UI gives an impression that is slightly different from the smartphone app UX design trend.


Figure 3.10 and 11 the example of bad design of app

(1) The area for search hits and categories is large, and because the list of products searched for cannot be seen in the first view, the user has to scroll each time, which is likely to be time-consuming.

(2) The UI design is a little difficult to use for smartphones, where vertical scrolling is easier to see, because of the pager switching.

Figure 3.12 and 13 the example of bad design of app

(1) Information such as product prices, sizes and descriptions, which users may be interested in, are not displayed in an organised manner. In addition, the purchase button is not always displayed, which increases the likelihood of users leaving the site.

(2) Detailed product information is separated into tabs and accordions, making it difficult to view the information.

Figure 3.14 the example of bad design of app

(1) There is no share button and the design makes it difficult for product information to spread.

Figure 3.15 the User Empathy

Figure 3.16 the Project Definition


Week 4 :

As continuing the Week 3  task, I just add some details for the map.

Figure 4.1 the User Persona

(Brand & visual identity) INTERNAL →  EXTERNAL (Channels & Touch points)

A design audit is
basically a checkup to make sure that the company is expressing itself
consistently across all channels and touch points.

Touchpoints

what users are actually seeing and engaging with throughout their user journey, and
remedy any inconsistencies

Touch-points are external (for the users), such as visuals, written, and
verbal communications that range from the website to ads to social media marketing and
advertising, events, workshops or webinars hosted to the actual
product launch and the product itself.

There are dozens, if not
hundreds, of touch points in their journey to and through the journey to your product.

Is their experience
consistent and trustworthy, or erratic and unpredictable

WHY?
Building consistency is building trust 

WHAT?

  •  Any style guides or existing design systems
  •  Website pages (screenshots)
  •  Logo in all formats and use cases
  •  Web ads / third party integration
  •  Standalone landing pages, marketing campaigns, and all their collateral
  •  Classes, workshops, presentations, promotional speaking engagements
  •  Social media content
  •  Original design files vs. what’s live right now


Week 5 :

Figure 5.1 the User Experience Journey Map

The User Experience Journey Map envisaged simple actions such as (1) find the product, (2) be interested in the product, (3) buy the product and (4) share the product.

(1)Search.

In order to make it easier to find the product you are looking for, it is necessary to organize the UI design of the product list to make it easier to find, not only by keyword search, but also by barcode search and, in the first place, by organizing the product list. It may also be necessary to register favorite products that are frequently purchased, and provide an immediate purchase path from My Page, etc.

(2)Interest

The UI design needs to make it easy to see explanations of product effects and features, advice from experts and word-of-mouth information to make people feel more comfortable with the product.

(3)Purchase

Screen transitions and too many input items are likely to cause people to leave the site, so it is better to keep the purchase screen to one screen, minimize keyboard input items and use a selection system.

(3)Share.

As word-of-mouth information from acquaintances is still an important factor in gaining recognition of a product and considering a purchase, it may be better to have a function that allows users to share information immediately after purchasing a product. Also, as people are more likely to use LINE than Twitter or Facebook to share with acquaintances, it would be better to design the UI in such a way that people are aware of this.

Figure  5.2 The screenshot of the process in Miro

Week 6-9 :

You are to create a User Experience Survey(Questionnaire) regarding the Product that you have chosen to redesign.

Asking for customer feedback before redeveloping/developing a product is ideal and would save the project a great deal of money and effort.

The exercise:
You are to come up with 10-15 survey questions to be applied to  a selected user persona. You should survey at least 5 of these individuals.

Use: for survey forms
https://www.google.com/forms/

Work on compiling the following instructions on your current Miro board. Submission for your findings would be in a short presentation deck on Miro.

Use: template found as attachment below https://miro.com/app/board/uXjVPMtqrNA=/?share_link_id=579522559039

How to start?

First
Before coming up with the questionnaire, first you would need to establish what you expect to get out of the questionnaire, how will it help you improve the product, define pain points and even identify what to lose or to keep in the product. Thus you would need to detail the following:
  • Deciding on what and how to measure.
  • Sampling from your user persona's
  • Analysing the data; finding trends.
  • Turn the data into information; storytelling
Second

Look into this

https://surveysparrow.com/blog/user-experience-survey-questions/

Provides 60 questions sample that you can use for your survey. You could use between 10-15 of these questions and customize it for you chosen product and user persona. The answers may be open ended (subjective), which would provide quite a number of opportunities. Or it could be objective and the participants would choose from a series of answers, this would allow you to create quantitative graphs, etc.

What to look for in the users feedback:
Usefulness. Usability. Enjoyability. Equitability.

What benefit did the product provide?
Example, problem’s, challenges that the product solved; what was found useful by the users?

Pain Points: identify what’s Usable or what isn’t usable.

The user’s experiences and expectations of the product and whether it was Enjoyable.

Other than the target users, would the product benefit other users? How equitable would the product be rated?

Final
Provide the key findings by compiling it, into a comparable flow in presented in your MIRO board. This will be used to redesign the app. Which is the next Assignment where you will be building Wireframes.

User Experience Survey
So I did the questionnaire to get information. After I prepared details, I also tried to think about the design improvement of app.


The question :
1. Please select the category that best describes your profession:
2. Was the information clearly presented?
3. Were you able to find what you were looking for?
4. Overall, how would you rate our app?
5. How could we make the app easier to use?
6. Considering that you’ve used our interface extensively, how likely are you to recommend it to your friends and colleagues?
7. Anything else you want to share or get off your chest?

Figure  6.1 The screenshot of the process in Miro

First of all, I started with rough sketch. And then I did it in Adobe Illustrator. After I prepared application design base, I tried create the mock-up.

Figure  6.2 The sketch of application

Figure  6.3 The application design



Top and search screens :

  • The top page is a product list screen so that the persona can quickly find the product they want to find.

  • Swiping allows the user to switch between product categories. More detailed categorisation can be switched by using the accordion open/close under the header menu.

  • The sorting button makes it easier to find products you are interested in by switching by price or popularity.

  • The barcode search function also allows you to quickly search for the products you have.

  • The information that is easy to grasp by simply displaying the product image, product name, rating score, price and other information that is likely to be of interest to the persona.




Product details :

  • The first view displays product information in an organised manner, making it easier for the persona to grasp the information.

  • The footer displays the Add to Cart and Favourites buttons, making it easy for the persona to take action and preventing abandonment.

  • The footer is also used to easily change the size of the same product category, reducing the hassle of changing the size.

  • The effectiveness and features of the products and how to use them can be shown not only in images and text, but also in video content, which may help to further promote the benefits of the products.




Order complete screen :

  • The UX design was designed to encourage diffusion by placing social networking share buttons after the order is completed, so that the product can be easily shared with other people. The LINE share button is placed at the top of the page, as it is thought that the product is likely to be shared on LINE due to its characteristics.

  • The function to recommend products purchased by other users who have purchased this product could be used as a measure to increase the average purchase price by promoting follow-on purchases.


Figure 5.3-5 the improved design

Other UI/UX design directions

Finally, other UI/UX design directions for the Dr. Ci:Labo mail order and e-commerce application could include the following measures.

1. optimising push notifications
By sending out push notifications in line with the timing of new campaign information, coupons and other point information, or when a favourite product has been reduced in price, it is thought that the number of user visits can be increased.

2. support for foreign languages such as Chinese
Dr. Ci:Labo's overseas sales of products to China and other countries have increased by 192.3% year-on-year, the largest increase of any channel, so it may be possible to increase sales via the app by making the app available in Chinese and other foreign languages.

3. Promoting sharing through coupons/points
While improving the UI/UX design of the app, it may be possible to increase the number of new visits and repeat visits by implementing campaigns whereby users receive coupons or points for sharing.

As well as I prepared the slides of presentation for next week session.

Figure  5.6 Google slides for next week presentation

https://www.notion.so/Dr-Ci-Labo-4871c5d9caae49de852cc60ecd14ab21




●Feedback

Week 1, 2 and 3 :
For these week, honestly, I couldn't attend enough with technical issues and I was in Japan, so I tried to catch up with the lecture learning about UX Design with some books, website and Youtube. Also I just did the exercise myself although it's not necessary to submit. I really appreciate to Devina who supported me to do it.

Week 4 :
In this week, I tried to create the Miro account again to clarify the tasks. Also I explored the User Journey Map more and more to show it clearly. I was just still confusing about the presentation in week 6(?), so I tried to prepared some resource of the app I selected in case that I gotta presentation soon.

Week 5 :
After the lecture with watching the youtube, I tried to figure out about the presentation and start preparing for it. Also prepared the slides with design of improvement of apps.

Week 6-9 :
I prepared question for gathering information in order to improve the app design. It's really difficult for me to understand the issue with the app, but I got learn about UX Design. It's really good opportunity for me too.





●References

Experience : 
In this exercise session, I could learn what is UX Design and how to improve the design. This opportunity is really good time for me to know about the process of creating UX Design. It could be utilize for me to explore some stuff in the future.

Observation : 
From this session, I could realized that what we gotta see details as gathering information for design. It's also need to think about whole persona in the world as well as this era. There is a lot of kind of person who wants good design to use easily and simply. So I supposed that I need to focus on the people who needs support with UX Design more and more even if I cannot see them.

Findings :
This time, I just noticed that there is some fundamental process of UX Design. I didn't expect that I can learn how to figure out the issue of design with persona, user journey map and so on. It could be more easier for me to think about the UX Design as well.

References : 

Innovation skill set

Contents.
The author is Mr Tagawa, head of Takram, one of Japan's top design firms, who is also an Honorary Fellow at the Royal College of Art in the UK.
The book contains wisdom on how to achieve three things: business, technology and creativity.
You will also learn about the need for BTC human resources who have all of these and the future of design.
You will learn that delivering experiences to users is not only about design, but also about engineering and strategy.
The book is a strong reminder of the importance of design thinking and technology.　

Recommendations.
Learn about the changing times and the future from a design perspective.
Written from the perspective of Japan's best design
Learn why design thinking and UX design are important　　　
Recommended for
Designers who want to grasp design in a broad sense
Creators who are unsure about their future career.
Managers who think about the importance of creativity　　
Impressions
In the course of my work in design, I have vaguely wondered "How will design evolve in the future?" I have been thinking vaguely about this.
The future of design described here is one solution to this question.
In recent years, the border crossing between designers and engineers has evolved, and the importance of design in management has come to be talked about.


Textbook of UX Design.

Contents.
This book provides a systematic introduction to UX design, from its somewhat academic content, such as the background and history of the need for UX design, to the processes and methods, from the way of thinking.
The book provides a deeper understanding of UX because it is written from the author's experience of what the essence of UX design is.　

Recommendations.
Gives an overview of UX design
Understand the concept of UX
Learn why UX is necessary　
Recommended for
People who want to understand UX carefully from the concept.
People who want to learn more about UX　　
Impressions.
This book is not easy to read for everyone, but that is why I think it is a book that gives deeper knowledge.
It gave me the opportunity to relearn the basics of UX, which I had thought I understood somehow.
I recommend this book to people who want to learn what UX is in detail, rather than wanting to know specific examples.


LEAN UX

Contents
In order for a business to succeed, it is important to repeatedly test hypotheses and improve the accuracy of services.
This book introduces the thinking and practical process on how to pursue the essence of UX design while reducing waste and increasing the accuracy of success.
The book also covers good/bad examples based on several specific case studies, so that you can raise your resolution to proceed with UX design in a lean way.

Recommendations.
Understands the importance of not doing the whole UX design process, but releasing it anyway
You can learn professional methods in lean UX design
Understand the methods involved in the project, such as team management, in addition to the hands-on methods
Recommended for
People who want to practice UX design but feel that it is a lot of process and time-consuming.
People who want to achieve service improvement results in the shortest possible time.
People who want to speed up the project team, including development.　　　
Impressions
This book made me realise that creating something easy to use is just an ego thing, and that at the core of the original UX design, there is a business perspective mixed in.
In UX design, I learnt how to make something usable and sellable.
Each step in the methodology is quite specific, so the content can be put into practice immediately.
I think this is a book that should be recommended to every new project member, because every engineer, project manager and UXUI designer should have this thinking.




Labels:

Comments

Post a Comment