Context: What are Dialogues?

Dialogues were something that I was looking forward to testing when I started this project. During my 2+ years of self-studying, I haven’t been able to find many opportunities to practice speaking or texting. Currently at a N5~N4 level, dialogues is an easy way for me to practice using the grammar concepts I’ve been learning so diligently.

I found this to be the most useful feature in Bunpo. During testing, conversing with the free-tier dialogue helped me practice some of the concepts that I have learned — this is an experience that I do not get on other apps that I use. However, I did notice some UX issues that, once improved, will make this feature of Bunpo’s even better.

In figure 1, you can take a look at some of the more design-specific areas that I highlighted. I will focus mainly on the realization of the feature’s concept. To do this, I focus on the dialogue’s home screen, and the chat screens.

figure 1. Bunpo's dialogue screen

Dialogues

When users first access the dialogue feature, they are greeted by the screen below (figure 1). Because this feature is called “dialogues”, I assumed a chat-like interface. However, this home screen looks very similar to a lesson overview. Mimicking a messaging app may motivate users to interact with the feature more because it would feel more like chatting with friends. To explore this, I re-designed the interface to closely resemble a messaging app (figure 2).

figure 2. My redesign of the dialogue screen

In the redesign, I took inspiration from spaces like iMessage, X DMs, and WeChat to see how different companies have structured their chatting interfaces. Something that consistently exists across all messaging platforms is automatically sorting chats by last opened, so I knew it was something I wanted to implement. However, I also was working within Bunpo’s system of having a number of challenges a user needs to complete before a conversation can be marked as “completed”, so I added tags to indicate whether a certain conversation was in progress (challenges were currently underway), completed (all challenges were met), or not started. These worked in conjunction with the auto-sorting, moving completed conversations to the bottom of the list.

I removed the number of challenges from the overview screen. The reason for this was simple: this information should not be a factor that is taken into account when a user is selecting a conversation. This information is still accessible within a specific chat (see figure 3b). A user can easily take note of their incomplete challenges in the top right corner. Upon click, a simple tracker appears, showing the details of each challenge (see figure 3c). As challenges are met, they are marked as completed and moved to the bottom of the list.

The original design (figure 3a), had users access some suggested sentences via the pencil icon next to the text input. However, I felt this was unintuitive: the icon choice didn’t make sense to me that this was where I could find suggestions. Instead, I looked at services like Perplexity and Dia Browser to see how they offered suggestions to users. Perplexity’s implementation is a dropdown menu, but that didn’t make too much sense here because I wasn’t building a search bar; I modified their design to provide suggestions within the text input field, with the sentences changing every couple of seconds.

With this new design, I believe that the experience of the dialogues feature feels more natural and akin to a messaging app, motivating users to practice their Japanese in conversation.

figure 3a. Bunpo's chatting screen (left); figure 3b. My redesign of the chatting screen (center); figure 3c. Chatting challenge tracker (right)

Context: What are Leagues?

Similar to Duolingo’s leaderboard feature, leagues allows users to see where their learning ranks amongst other Bunpo users (see figure 5). For a first time user, leagues are initially locked – a certain amount of activities must be completed before one can unlock them. However, when I was testing this, I ran into a lot of obstacles with this particular screen (see figure 4). The main issues were 1) the number of activities I had to complete didn’t change even after I completed lessons, confusing me on what these “activities” were; and 2) there wasn’t any motivation to unlock leagues. Of course, as I went through my lessons, this feature would be unlocked, but I never thought about leagues while I was studying.

figure 4. Leagues are initially locked (left); figure 5. Bunpo's leagues screen (right)

Leagues

To combat these issues, I removed the initial barrier of accessing leagues, allowing users to explore the feature before deciding if this is something they want to spend more energy on (figure 6). In my redesign, I changed the visual hierarchy, putting more emphasis on the top 3 students in each league rather than the league itself. I kept the highlight from the original design, making it easy for users to see where they rank. Because leaderboards are a commonly seen element across the web (e.g. language learning, gaming platforms), I did not find it necessary to provide information on how a user can level up.

Personally, I don’t find leaderboards a necessary feature of language learning platforms. Users should be studying regardless; unless a high ranking on the leaderboard gives a user perks like unlocking pro features or access to a closed group of learners, there is not a lot of motivation as to why a user should be trying to rank. For Bunpo, I would like to see rewards be implemented. Right now, it is not clear if high ranked users gain rewards. I think it would be motivating if users had a number of “coins” or “badges” that they could collect and display on their profile from leaderboard rankings. Along the same thread, being able to add friends and compete against them for leaderboard coins would be a fun way to keep a user’s learning journey consistent.

With a couple of these small changes that I’ve outlined in the redesign and in this writeup, I believe that the leagues feature within Bunpo can become much stronger and entice users to use it more!

figure 5. My redesign of the leagues screen

Context: Homepage Redesign

A large part of my energy for this project was looking at the redesign that Bunpo did for the homepage. As the first screen that users see, I wanted to be more diligent with the research that I conducted. In figure 7, you can take a look at all the areas of improvement I pointed out.

Bunpo's home screen

On Bunpo, chapters are shown simultaneously in a list, forcing users to scroll incessantly to get to later chapters. I wanted to explore a different way of organizing the chapters, which you can see in figure 8. I wanted to give users a way to view their chapters in multiple ways, which is why they can toggle between grid or list views. Chapters have different colours based on completion (pink), in progress (yellow), or locked (grey). When users attempt to open a locked chapter, it will instead lead them to a screen to purchase a pro membership. With this grid view, users are offered an overview of the chapters, decreasing the amount of time they have to spend scrolling to view lessons.

My redesign of the home screen

I have also given users the ability to minimize the bunpo membership banner, allocating more space to the main content on the screen. With the new language and proficiency picker I’ve designed, users now have a more simplified way to select their learning mode.