English4TW
“English 4Tw”, was a web-based online English dictionary previously developed. Since the product was officially launched, we have received many feedbacks from users one after another. Among them, many problems have been reflected in the performance and user experience of the web version on the mobile, so we plan to develop an app dedicated to the mobile phone.
Due Date: 2020, 11 ~ 2022, 01
● ● ●
Design Thinking
This case is an existing product function optimization and interface redesign. After considering time and human resource allocation, the following user research methods are used to further analyse and find out the future improvement direction of the product:
The Challenge
After participating in the observation, It was found that there are bad user experience in "the network signal affects web page loading on mobile" and "the logic of functions and information architecture planning", such as it is difficult for users to find the core functions when they use the product for the first time, and it is not easy for users to read and understand the content format of the “vocabulary page” lacks organisation, and poor network signal interrupts the use of the product.
The above situations will easily lead to user doubts and frustrations during the initial exploration of the functions, which will lead to a bad impression of the product, even affect the language learning effect.
Therefore, we established several assumptions:
-
The logic of the information structure is poor, causing users to not find the function.
-
The content format of the "vocabulary page" lacks organisation, which makes it difficult for users to read and understand.
-
There is a gap between the understanding of interface image symbols and the actual functions, resulting in a situation that misleads users.
-
The environment causes unstable network signals, making the user unable to use the product normally.
Stakeholder Interview
Main Demands:
-
Strengthening the learning of phrases: I have been teaching English for many years, and found that Taiwanese students are generally weak in the ability to use phrases, and their inability to use phrases flexibly limits the English expression.
-
The main target focuses on high-Intermediate English users, and we look forward to providing a learning platform with high-quality content.
-
Developing offline mode: Holding a mobile device and enabling offline mode in advance, it can still be used normally in places where the network signal is unstable, and is no longer limited by the environment.
Product Positioning:
-
Advanced English dictionary for learners whose abilities have reached or exceeded the B2 level of the Common European Reference Standard for Languages.
-
In the past, users’ usage scenarios were mainly based on mobile devices, and were not limited to specific environments. Therefore, in the future, more consideration will be given to the use scenarios based on mobile phone operations to develop products that can be used offline.
● ● ●
UX Research
IA - Legacy
Problem Statement:
-
Poor classification, organisation, and hierarchy of product features.
-
The hierarchy of core features are inconsistent.
-
The related features distribution of "Vocabulary" and "Notes" is too scattered.
Solution (shown in the red box above):
-
Raise and highlight the hierarchy of core features: the page hyperlinks of "Home", "Glossary", "Notes", "Settings" are placed in the bottom tab, and displayed on all first-level pages.
-
"Vocabulary" and "Notes" related features are integrated into two main pages.
-
Based on the adjustment of the business model and information structure, some features have been deleted.
User Journey Map
The product functions are disassembled into different unit tasks, and at the same time, referring to the various user experiences of users on the "Feedback", and add personal feelings and suggestions after using the product.
The Dictionary
Why do the options and navigation bars in the interface more or less have a second or even third level?
Having more than 7 options in a hierarchy can lead to confusion and loss of focus for users, who no longer remember where the option they are looking for is. This is why in an application or service with multiple options, elements are grouped to reduce cognitive load.
Problem Statement:
-
The “Home” page does not provide a vocabulary search term function or navigation bar, and some styles of graphic buttons are easy to mislead users.
-
Poor information structure makes it take up to 4 clicks for users to open “Word Search” from “Home”.
-
Poor classification, organisation, and hierarchy of product features.
Solution:
-
Referring to Miller’s Law, the hierarchy of information architecture should not exceed three layers at most.
-
Raise and highlight the hierarchy of core features: the page hyperlinks of “Home”, “Glossary”, “Notes”, “Settings” are placed in the navigation bar, and displayed on all first-level pages.
Vocabulary Page
Problem Statement:
-
The content lacks “partitioning”, “paragraphs”, and “indentation”.
-
The content is overly long, which needs to be accommodated by “expand” and “collapse” functions.
Solution:
Referring to Miller’s Law, a key concept behind it is “partitioning”. Partitioning allows users to grasp the information they need to know more quickly, helps them complete tasks more smoothly, does not get overwhelmed by the process, and avoids mistakes .
-
Layout techniques: Use “indentation”, “annotation” and “color separation” to make the information hierarchy more clearly presented.
-
Organisation techniques: Use “cards” to categorise overly long content, and “expand and collapse” to present content.
-
Using the “anchor point” function, it is convenient for users to quickly jump to related content.
Competitive Analysis
Similarity and Difference:
-
The English4TW “Dictionary” function is highly similar to the Cambridge online dictionary, but there is no content planner in the development team and cannot produce “thematic learning content”.
-
The development team will arrange the “Notebook of Video and Text” function in English4TW, and similar projects have not been seen in other competing products.
Commercial Diagnosis:
-
English4TW was originally an “advanced paid membership system”, after competitive analysing, it is found that the product features have no special advantages, and it is difficult to cause users to want to pay for use or even switch to English4TW. In the future, it is necessary to continuously evaluate the business model according to the status of function development.
Solutions
The research topic comes from the list of problems sorted out after analysing the old products, and after adding the individual competitive product analysis, the following contents are listed, which can be used as a reference for future feature development of English4TW.
● ● ●
User Story
Persona
After sorting out the information compiled by the "Stakeholder Interviews", "User Feedback", and "Product Observation", the following possible target user prototypes were drawn up, and the possible potential user needs were summarised from them.
Common ground:
-
Non-native English speakers of intermediate and advanced users
-
There are a lot of “language output” needs for oral communication and academic applications
Insights:
-
When English learning enters the stage of “language output”, increasing the absorption of “phrases” can effectively make the content that users want to express more fluent and natural, and the semantics can be more vivid and interesting.
Value Proposition
After conducting focus interviews with stakeholders and feedback from users, the future core direction and vision of the product are sorted out, and users are expected to benefit from the new product.
Goals and Limitations
● ● ●
Flow- Add/Edit Note
● ● ●
Flow- Reset Passwords
● ● ●
Vocabulary Page Redesign
Motivation and tactics
Problem Statement:
-
To improve readability, the content must be properly organised.
-
The overly long content must be categorised, organised and collapsed by using design techniques.
Solution:
Referring to Miller’s Law, a key concept behind it is “partitioning”. Partitioning allows users to grasp the information they need to know more quickly, helps them complete tasks more smoothly, does not get overwhelmed by the process, and avoids mistakes .
-
Layout techniques: Use “indentation”, “annotation” and “colour separation” to make the information hierarchy more clearly presented.
-
Organisation techniques: Use “cards” to categorise overly long content, and “expand and collapse” to present content.
-
Using the “anchor point” function, it is convenient for users to quickly jump to related content.
Precautions:
-
If the paraphrase has more than one interpretation, then the “frequency of use of part-of-speech” is used as the sorting rule.
● ● ●
Design System
