This project is what Springboard calls the Industry Design Project (IDP). The purpose of the IDP is to give Springboard students the opportunity to work on real life UI/UX Design projects with a client and other students. Myself and two other Springboard students were matched with Languify. Languify is an online platform that helps users speak English more fluently. Languify does this by offering courses, games, and practice exercises. They have created multiple practice exercises, each focusing on different aspects of the English language. They are able to use AI to give the user feedback on spoken exercises, written exercises, and video exercises. These practice video exercises can be conducted alone or within a group chat with other users who also want to speak English more fluently.
Business Goal:
Languify wants to grow their number of users and introduce a subscription model. They feel they can accomplish this by redesigning their web app to be easier to use, by giving the users opportunities to share their accomplishments on social media, and/or refer the Languify platform to their friends.
Problems:
Challenges:
Solutions:
Languify partnered with Springboard to have their site application redesigned to be more intuitive and welcoming for users. Since we only had 5 weeks to work with them on this project, we had to prioritize and adjust the usual user centered methodologies to best meet the client’s needs within that time frame. Since we were only able to work on so many screens and pages we spoke to Languify letting them know they could request a second team to pick up where we left off and to work on other features that they have plans for. With the 5 week deadline and knowing another team will be coming on board we developed a project plan that laid out the scope and timeline for our deliverables. We broke it up into 3 phases.
Phase 1 (2 weeks)
Phase 2 (2 weeks)
Phase 3 (1 week)
During the first week of working with Languify and my team, I took on the role of Team Lead. This consisted of being the point of contact for the client, speaking for my team at the majority of the meetings with the client, setting agendas for team meetings and client meetings, helping my team to stay on task during meetings and to accomplish what we set out to do during the meeting, and I was able give UI feedback due to my years of experience as a graphic designer.
Since my team and I had limited time for this project we decided not to do any primary research of our own but instead relied on the data that was compiled by Languify. One of our team members began analyzing and synthesizing this data. We also looked at the other UX assets that they had, such as user journey maps. This gave us a good starting point to understand the user and the pain points they were having with the current site.
Another teammate did a competitive analysis so we could have a better understanding of what similar companies are doing,what to implement, and what to avoid.
I worked on assessing the current site's usability by running a heuristic evaluation based on Jakob Neilsen’s 10 general principles for interaction design. The heuristic evaluation helped us decide what areas needed more work and refinement.
After each of us completed our tasks we put together a report with our findings. This list gave us things that we could implement and change currently, and also gives Languify some things to think about for future versions.
Address Now:
Suggestions for Future Versions:
From our findings we can see that the current site didn’t have a logical sense of hierarchy and organization for the different features and sections of the web based application. The top navigation was overcrowded with too many links. The names did not clearly define where it would send the user. This causes confusion, a lack of direction for the user, and decision fatigue.
We went through the pages and organized them into logical groupings, cutting down on the clutter of the top navigation. While doing this we also renamed different sections and pages to make navigation clear and easy for the user. We cut the top navigation buttons down to 4 from 10. We did this by combining all of the “modes” into the “Practice” section, pulling “veteran mode” out as a separate link called “Mentor Call” combining the course section and games into the “Learn” section, and creating a dropdown menu to access profile/account information.
After structuring the sitemap, we set out to create different user flows that a typical user would use. Doing so allowed us to see if we needed any additional screens or pop up modals. It also allowed us to better streamline some of the flows to make it easier for the user.
To help us get to our goal of delivering hi-fidelity screens at the end we decided to skip wireframes to start working on mid-fi mockups. We were able to do this since we were reusing some of Languify’s style guide and UI components. As my team started iterating and designing the mid-fi mockups another teammate and myself also edited and added updated design elements and components to the style guide as we worked through our screens. This process took a little more time but allowed us to expedite our process to hit our deadline.
We split up the screens and each of us took on at least one of the more important and intricate sections/screens. Those screens are the dashboard, courses screen, practice screens, and analysis screens.
In addition to several miscellaneous screens I was also responsible for the dashboard and the payment flow that included Unified Payments Interface (UPI). It is a real-time payment system that facilitates interbank transactions is very popular and widely used across India. Each brings their own different challenges to work though.
We kept some of the original design elements such as the logo, main brand color, and typography. We then added more colors to the brand color palette, defined text sizes/styles, layout grid, components, and icons.
We presented the mid-fi mockups to Languify for feedback and approval. After receiving feedback on our screens we built a prototype with the screens.
After creating the prototype we conducted 5 moderated remote usability tests, focusing on certain screens and flows. Languify helped us to procure these 5 users all of whom have had some experience with their current site.
Through the testing we found that all users were able to complete the tasks assigned during the test. We didn’t uncover or run into any critical issues within any of the flows or screens. We synthesized the feedback and observations made during the interviews.
Some of the main findings were:
The tests also brought up some good questions and suggestions:
We shared our findings with Languify to receive feedback and direction. We then began converting and iterating the mid-fi screens into hi-fi screens.
As we finished iterating and updating the screens we prepared all of our research, findings, and design files for hand off to the next team of Springboard students. This team will be picking up where we left off and working on other features for Languify. We also put together some suggestions and next steps of how to pick up where we left off.
As a team we were able to redesign the majority of the web application into a better functioning and more usable tool to help users to develop their English fluency. By doing this we’ve added great value to the product that will allow people to easily use it and will use it repeatedly. We were also able to introduce a simple pay screen with the option to pay with credit card or UPI for subscribing and adding minutes.
If we had more time to work on this project, I would have done more quantitative and qualitative research up front, specifically looking into what users were looking for on dashboard and analysis screens, how they would like to see their scores, and what they could do with that information. It would have benefited the project to do more usability tests, focusing on some of the more important or complicated flows to get more in depth feedback and data.
