UX/UI Design
Languify
At the start of the summer season of 2021, I had the opportunity to participate in an industry design project as a part of my enrollment in UX/UI bootcamp provided by Springboard.com.
For this industry design project, I was teamed up with 2 other students, and we were matched with a startup company to complete a 1-month UX project.
The company we were paired with was Languify–a software company based in India that provides a product for users to improve their English communication skills with an AI engine that analyses mistakes to improve both writing and speech skills.
My role was to collaborate with my two teammates as a design team to solve a real problem for Languify within a 4 week period. All three teammates would have to come up with a UX process together–dividing up tasks while combining our ideas into deliverables as a unit. The three of us led different sections of research and design, but each also had to be ready to do anything at any time, such as documentation, user testing, prototyping on Figma, and writing e-mail drafts.
Here's an overview of our team's one month project that spanned between May 21 and June 23.
The team at Languify assigned us with the task of creating a web browser extension that does the following:
Because Languify is designed for users based in India, we hoped to gain a better understanding of how extensions are used in India as well as privacy and usage concerns that they might have. In addition, we also hoped to understand how users want to be rewarded and engaged when learning a language.
It's really important for the extension to use its limited space efficiently, and provide users with the most important text. This includes:
Before anything else, a potential user must be able download and install a browser extension, so we designed a landing page on Languify's website specifically for the extension.
We designed a landing page that presents the best features of the Languify extension with graphics and scannable text. In our design, we kept the extension download button pinned on the left side of the page. This way, the download button will be easily accessible at all times as the user scans through the features.
From our research, we designed the browser extension window as seen here:
On Languify's current website, users can submit a text sample of their writing or a recording of their speech to be analyzed. We wanted to provide users access to this feature at any time on the extension, so we added two links on the bottom of the extension window.
Lastly, we wanted to design features that best utilize what only a browser extension can offer.
During our research, we learned that it's important to learn different "tones" of English (e.g. formal, casual, etc.) for different settings. There are also various types of English (American, British, Canadian, Australian). Languify's AI is designed to help specifically with what the user is learning English for. We included both of these variations as preferences in our extension, as seen here:
The extension shows the above window to clarify with the user if they would like to analyze the current meeting.
Permission to access the microphone and camera must be provided, so we added it to the prototype's wireflow.
We also added a status bar that the extension will show when Languify's AI is performing live analysis for the video call.
After a call has ended, a user flow of screens was created to confirm the end of the call, provide a preview of the AI analysis, and finally connect the user to the learning materials on Languify's website.
With a prototype complete, our team conducted 5 usability test interviews, hoping to understand how we can improve the usability of our extension design.
Overall, both the testing participants completed the flow in a timely fashion with only a few hiccups along the way. The following are three key findings we made to focus on when designing our final prototype iteration.
Testing participants expressed instances of intrusiveness. Also, there was not enough user control over the voice and video recording. We highlighted two instances that raised concern:
Using our research insights, we put more effort into Languify's extension landing page to present the best features of the Languify extension with graphics and scannable text. We kept the extension download button pinned on the left side of the page. This way, the download button will be easily accessible at all times as the user scans through the features.
Here is our final extension window in action:
During our testing, some of the wording used for our buttons confused many participants. We made the following two corrections:
The user interface for the live spelling and grammar feedback was enhanced for the final iteration to match the existing styling on Languify's website.
For video calls, we focused on designing an experience that gave user more control and less intrusive.
We added the initial window from a large popup center screen to the top right corner by the extension thumbnail.
We added this control panel with featuring large "Pause" and "End" buttons in case the video call is no longer relevant for English analysis.
Lastly, we updated the post call flow. The large and centered windows were decreased in size and moved to the top right corner of the window by the extension thumbnail.
As we finished our final prototype iterations, the end of our one month with Languify was approaching. To conclude, we did the following:
This one month industry project was a very memorable one, and provided me with so many real-world experiences to learn from. Here are the top 3 things I learned during my month with Languify.
If you have any feedback regarding this project, questions about my experience with Springboard, or if you would like to collaborate with me, feel free to send me a message.
