Conttext
Understanding the current experience:
This Japanese-learning application has an incredible amount of resources and tools that users deeply value and appreciate (myself included!), but this results in a few challenges, particularly for new users:
01
steep learning curve
This application has an incredible amount of resources and tools, as well as numerous customisation options, all spread across a navigation and four tabs. As a result, the UI often feels cluttered and confusing.
01
steep learning curve
This application has an incredible amount of resources and tools, as well as numerous customisation options, all spread across a navigation and four tabs. As a result, the UI often feels cluttered and confusing.
01
steep learning curve
This application has an incredible amount of resources and tools, as well as numerous customisation options, all spread across a navigation and four tabs. As a result, the UI often feels cluttered and confusing.
01
steep learning curve
This application has an incredible amount of resources and tools, as well as numerous customisation options, all spread across a navigation and four tabs. As a result, the UI often feels cluttered and confusing.
01
steep learning curve
This application has an incredible amount of resources and tools, as well as numerous customisation options, all spread across a navigation and four tabs. As a result, the UI often feels cluttered and confusing.
02
impedes on user goals
The time and effort dedicated to understanding the application can inhibit users' ability to access desired features and decreases the time users spend actually learning the language.
02
impedes on user goals
The time and effort dedicated to understanding the application can inhibit users' ability to access desired features and decreases the time users spend actually learning the language.
02
impedes on user goals
The time and effort dedicated to understanding the application can inhibit users' ability to access desired features and decreases the time users spend actually learning the language.
02
impedes on user goals
The time and effort dedicated to understanding the application can inhibit users' ability to access desired features and decreases the time users spend actually learning the language.
02
impedes on user goals
The time and effort dedicated to understanding the application can inhibit users' ability to access desired features and decreases the time users spend actually learning the language.
The Goal
declutter the navigation and ui to ensure users are immediately able to focus on utilising the app for its intended purpose.
The Solution
An Updated IA and Interface!
An integrated experience designed to assist users of all experience levels in their digital class registrations and discoveries.
Context (Cont.)
Existing User Feedback
User feedback confirms the previously stated difficulties.
The developer himself also believes that the level of content and customisation within the app limits the simplicity its UI can achieve. Perhaps this ends up being the case, but let’s dive a little deeper.
preliminary testing
Card Sort
With the primary issue for users being the navigation and organisation, I decided to start by creating a content inventory. I then conducted a hybrid card sort via Provenbyusers, along with a follow-up survey. A total of four participants completed the study.
43 cards
The copy for each card was taken directly from the existing application. The only amendment included the addition of brief explainers for Japanese-specific content, such as “Hiragana is a Japanese writing script.”
43 cards
The copy for each card was taken directly from the existing application. The only amendment included the addition of brief explainers for Japanese-specific content, such as “Hiragana is a Japanese writing script.”
43 cards
The copy for each card was taken directly from the existing application. The only amendment included the addition of brief explainers for Japanese-specific content, such as “Hiragana is a Japanese writing script.”
43 cards
The copy for each card was taken directly from the existing application. The only amendment included the addition of brief explainers for Japanese-specific content, such as “Hiragana is a Japanese writing script.”
43 cards
The copy for each card was taken directly from the existing application. The only amendment included the addition of brief explainers for Japanese-specific content, such as “Hiragana is a Japanese writing script.”
7 groups
The following categories were provided, based on the existing app: Me, Community, Resources, Support Us, Games, Tools, and Unsure. Users were able to rename categories, create their own categories, and add up to two subcategories.
7 groups
The following categories were provided, based on the existing app: Me, Community, Resources, Support Us, Games, Tools, and Unsure. Users were able to rename categories, create their own categories, and add up to two subcategories.
7 groups
The following categories were provided, based on the existing app: Me, Community, Resources, Support Us, Games, Tools, and Unsure. Users were able to rename categories, create their own categories, and add up to two subcategories.
7 groups
The following categories were provided, based on the existing app: Me, Community, Resources, Support Us, Games, Tools, and Unsure. Users were able to rename categories, create their own categories, and add up to two subcategories.
7 groups
The following categories were provided, based on the existing app: Me, Community, Resources, Support Us, Games, Tools, and Unsure. Users were able to rename categories, create their own categories, and add up to two subcategories.
finding 01
clear card placements
16 cards were unanimously placed in their respective groups.
11 other cards had a 75% majority of users agreeing on the group placement, while 10 had 50% majorities.
finding 01
clear card placements
16 cards were unanimously placed in their respective groups.
11 other cards had a 75% majority of users agreeing on the group placement, while 10 had 50% majorities.
finding 01
clear card placements
16 cards were unanimously placed in their respective groups.
11 other cards had a 75% majority of users agreeing on the group placement, while 10 had 50% majorities.
finding 01
clear card placements
16 cards were unanimously placed in their respective groups.
11 other cards had a 75% majority of users agreeing on the group placement, while 10 had 50% majorities.
finding 01
clear card placements
16 cards were unanimously placed in their respective groups.
11 other cards had a 75% majority of users agreeing on the group placement, while 10 had 50% majorities.
finding 02
lack of clarity between "resources" & "tools"
10 cards had placements split only across those two groups. All users noted this in the survey as well.
As such, I decided to combine these categories.
finding 02
lack of clarity between "resources" & "tools"
10 cards had placements split only across those two groups. All users noted this in the survey as well.
As such, I decided to combine these categories.
finding 02
lack of clarity between "resources" & "tools"
10 cards had placements split only across those two groups. All users noted this in the survey as well.
As such, I decided to combine these categories.
finding 02
lack of clarity between "resources" & "tools"
10 cards had placements split only across those two groups. All users noted this in the survey as well.
As such, I decided to combine these categories.
finding 02
lack of clarity between "resources" & "tools"
10 cards had placements split only across those two groups. All users noted this in the survey as well.
As such, I decided to combine these categories.
finding 03
need for further exploration
The remaining six cards had no agreement. Most of these seemed to be caused by unclear copy; for example, “Question Corner” and “Beginner Help” on their own do not offer much insight into the content of the page.
A second round of card sorts with a focus on a specific subset of cards would help explain this occurrence. For now, I took some liberties in their placement.
finding 03
need for further exploration
The remaining six cards had no agreement. Most of these seemed to be caused by unclear copy; for example, “Question Corner” and “Beginner Help” on their own do not offer much insight into the content of the page.
A second round of card sorts with a focus on a specific subset of cards would help explain this occurrence. For now, I took some liberties in their placement.
finding 03
need for further exploration
The remaining six cards had no agreement. Most of these seemed to be caused by unclear copy; for example, “Question Corner” and “Beginner Help” on their own do not offer much insight into the content of the page.
A second round of card sorts with a focus on a specific subset of cards would help explain this occurrence. For now, I took some liberties in their placement.
finding 03
need for further exploration
The remaining six cards had no agreement. Most of these seemed to be caused by unclear copy; for example, “Question Corner” and “Beginner Help” on their own do not offer much insight into the content of the page.
A second round of card sorts with a focus on a specific subset of cards would help explain this occurrence. For now, I took some liberties in their placement.
finding 03
need for further exploration
The remaining six cards had no agreement. Most of these seemed to be caused by unclear copy; for example, “Question Corner” and “Beginner Help” on their own do not offer much insight into the content of the page.
A second round of card sorts with a focus on a specific subset of cards would help explain this occurrence. For now, I took some liberties in their placement.
ideating
Lo-Fi Prototype
With the amount of content in the application, I felt that treating the primary navigation screens almost as full-page menus might be an effective approach at simplification. This would provide every piece of content on the application a dedicated place to live, ideally minimising the learning curve and increasing intuitiveness.
testing
User Interviews
I conducted a round of user interviews with three participants to gather feedback on the design.
finding 01
accessible content explanations
Two users were unclear on what the adventure level and gardens were, and wanted to easily access explanations for them.
finding 01
accessible content explanations
Two users were unclear on what the adventure level and gardens were, and wanted to easily access explanations for them.
finding 01
accessible content explanations
Two users were unclear on what the adventure level and gardens were, and wanted to easily access explanations for them.
finding 01
accessible content explanations
Two users were unclear on what the adventure level and gardens were, and wanted to easily access explanations for them.
finding 01
accessible content explanations
Two users were unclear on what the adventure level and gardens were, and wanted to easily access explanations for them.
finding 02
game tab content visibility
One user wanted games displayed immediately on the tab, before the garden and adventure level.
finding 02
game tab content visibility
One user wanted games displayed immediately on the tab, before the garden and adventure level.
finding 02
game tab content visibility
One user wanted games displayed immediately on the tab, before the garden and adventure level.
finding 02
game tab content visibility
One user wanted games displayed immediately on the tab, before the garden and adventure level.
finding 02
game tab content visibility
One user wanted games displayed immediately on the tab, before the garden and adventure level.
finding 03
unclear pinned community content
All users were unsure where the pinned content was coming from, and how any unpinned channels/forums could be accessed.
finding 03
unclear pinned community content
All users were unsure where the pinned content was coming from, and how any unpinned channels/forums could be accessed.
finding 03
unclear pinned community content
All users were unsure where the pinned content was coming from, and how any unpinned channels/forums could be accessed.
finding 03
unclear pinned community content
All users were unsure where the pinned content was coming from, and how any unpinned channels/forums could be accessed.
finding 03
unclear pinned community content
All users were unsure where the pinned content was coming from, and how any unpinned channels/forums could be accessed.
Designing
Style Guide
Before upscaling the fidelity, I created a loose style guide to help ensure consistency throughout the application.
I decided to use colours to distinguish between different types of lessons/content to provide an additional aid for users who are familiarising themselves with the navigation.
Hi-Fi Prototype
The main changes I made were according to the feedback above:
I added explanations to certain links, restructured the games page, and replaced the pinned section on the community page with scrollable tabs instead.
Figma link coming soon!
Retrospective
Takeaways
Looking at the part in relation to the whole
Managing the app’s extensive content did prove to be relatively challenging, as the developer anticipated! However, it wasn’t an impossible task once each page was broken down and reviewed in relation to the overall hierarchy, which the card sort helped immensely with.
Looking at the part in relation to the whole
Managing the app’s extensive content did prove to be relatively challenging, as the developer anticipated! However, it wasn’t an impossible task once each page was broken down and reviewed in relation to the overall hierarchy, which the card sort helped immensely with.
Looking at the part in relation to the whole
Managing the app’s extensive content did prove to be relatively challenging, as the developer anticipated! However, it wasn’t an impossible task once each page was broken down and reviewed in relation to the overall hierarchy, which the card sort helped immensely with.
Looking at the part in relation to the whole
Managing the app’s extensive content did prove to be relatively challenging, as the developer anticipated! However, it wasn’t an impossible task once each page was broken down and reviewed in relation to the overall hierarchy, which the card sort helped immensely with.
Looking at the part in relation to the whole
Managing the app’s extensive content did prove to be relatively challenging, as the developer anticipated! However, it wasn’t an impossible task once each page was broken down and reviewed in relation to the overall hierarchy, which the card sort helped immensely with.
Next Steps
Designing for immersion
Since my primary focus so far was to ensure all content is transferred intuitively, I’d love to prioritise the UI/visual design in the next iteration.
The developer himself stated he wanted to create a Japanese-learning "world," so ensuring immersion and user engagement through the UI is a core goal of the product. Making the design more interesting and inviting, and reincorporating the mascot imagery would be some potential steps towards that!
Designing for immersion
Since my primary focus so far was to ensure all content is transferred intuitively, I’d love to prioritise the UI/visual design in the next iteration.
The developer himself stated he wanted to create a Japanese-learning "world," so ensuring immersion and user engagement through the UI is a core goal of the product. Making the design more interesting and inviting, and reincorporating the mascot imagery would be some potential steps towards that!
Designing for immersion
Since my primary focus so far was to ensure all content is transferred intuitively, I’d love to prioritise the UI/visual design in the next iteration.
The developer himself stated he wanted to create a Japanese-learning "world," so ensuring immersion and user engagement through the UI is a core goal of the product. Making the design more interesting and inviting, and reincorporating the mascot imagery would be some potential steps towards that!
Designing for immersion
Since my primary focus so far was to ensure all content is transferred intuitively, I’d love to prioritise the UI/visual design in the next iteration.
The developer himself stated he wanted to create a Japanese-learning "world," so ensuring immersion and user engagement through the UI is a core goal of the product. Making the design more interesting and inviting, and reincorporating the mascot imagery would be some potential steps towards that!
Designing for immersion
Since my primary focus so far was to ensure all content is transferred intuitively, I’d love to prioritise the UI/visual design in the next iteration.
The developer himself stated he wanted to create a Japanese-learning "world," so ensuring immersion and user engagement through the UI is a core goal of the product. Making the design more interesting and inviting, and reincorporating the mascot imagery would be some potential steps towards that!
Additional testing
A second card sort would be great to confirm my findings. A second usability test would also help validate my decisions and uncover any remaining challenges.
Additional testing
A second card sort would be great to confirm my findings. A second usability test would also help validate my decisions and uncover any remaining challenges.
Additional testing
A second card sort would be great to confirm my findings. A second usability test would also help validate my decisions and uncover any remaining challenges.
Additional testing
A second card sort would be great to confirm my findings. A second usability test would also help validate my decisions and uncover any remaining challenges.
Additional testing
A second card sort would be great to confirm my findings. A second usability test would also help validate my decisions and uncover any remaining challenges.
Measuring success
If these updates launched, I would love to evaluate a range of metrics, including but not limited to: time on task, task success and error frequency, search vs. navigation, conversion and customer retention rates, user confidence ratings, and SUS and NPS.
Measuring success
If these updates launched, I would love to evaluate a range of metrics, including but not limited to: time on task, task success and error frequency, search vs. navigation, conversion and customer retention rates, user confidence ratings, and SUS and NPS.
Measuring success
If these updates launched, I would love to evaluate a range of metrics, including but not limited to: time on task, task success and error frequency, search vs. navigation, conversion and customer retention rates, user confidence ratings, and SUS and NPS.
Measuring success
If these updates launched, I would love to evaluate a range of metrics, including but not limited to: time on task, task success and error frequency, search vs. navigation, conversion and customer retention rates, user confidence ratings, and SUS and NPS.
Measuring success
If these updates launched, I would love to evaluate a range of metrics, including but not limited to: time on task, task success and error frequency, search vs. navigation, conversion and customer retention rates, user confidence ratings, and SUS and NPS.