Design a feature, working through all the major phases of design
Project Context
As a UX/UI design at Rosetta Stone. My project specifically was to design a Fluency Builder Activity.
This project will be focusing on my RS capstone experience. My main role mainly focused on designing wireframes, prototypes and making iterations based on the user studies and testing I conducted
ROLE
UX/UI Designer
DESIGN TOOLS: Figma
DATE
Duration: Jan 2020-March 2021
PRACTICES: Iterative design of low to high fidelity wireframe, Design Tools, Rapid prototyping, Usability testing, Visual Design
Goal-To Improve vocabulary skills for learners
Solution- Design fun and engaging activities for learners to learn and understand new words
Early Explorations- After discussing and brainstorming, I had an idea of how I wanted screens to look and I started translating my initial ideas into rough sketches
Designing Wireframes- Before moving on to hi-fi mockups, I knew I wanted to do some user testing at this stage. I created a low-fi prototype with my wireframes using Figma. It allowed me to explore ideas quickly and efficiently prior to moving on to high-fidelity wireframes.
This was an important step since I was able to receive feedback early on that would help me revise key action items
Usability Testing- To get a better sense of the ease and feel of the Activity, I conducted Remote usability tests to gather feedback from Rosetta Stone learners to improve the design using BlueJeans 9 participants total, 20-30 minute 1:1 sessions.
I had them complete simple tasks such as, Imagine you click the letter tile “A” and drag it to the correct space. What would you expect to happen? what you would do next after you click one of the letter tiles in the grid? what would you want to happen if you dragged the wrong letter etc?
Results From User Testing
7/7 participants were able to complete the task
7/7 want a dialog box to appear or some sort of prompt if they get it correct and get an error message and to try again they get something wrong
The general impressions about the overall activity intuitive and easy to use
One user mentioned that they loved the look and feel of the activity screen
Based on the feedback from usability testing, here are the revisions that were made to the Fluency Builder Activity:
Added the error message to signal that they have picked the wrong tile and to try again
Added the dialog box letting them know that they have picked the right letter tile
Final Design
Reflection
I was raised in a way that I should listen more and speak less, and I shouldn't say anything if I am not sure. I was so scared to be wrong I was so scared to be wrong or to show something that is imperfect. but I stepped out of my comfort zone and the first thing I learned was that not knowing what to do is completely normal. In fact, it will help me during my career.
What did I learn from this project?
Having the opportunity to experience the entire product development process really taught me a lot about how to approach each and every step from brainstorming and all the way to creating high-fidelity prototypes. I also learned a lot about collaborating with Stakeholders.
While designing Fluency builder I really enjoyed conducting my first remote usability test, and since it was my first test, I learned a great deal about why it’s so important that we test our designs. Watching users find bugs as they were using the activity, and me not being able to rectify the problem immediately was a hard thing to oversee as a designer because we want to fix everything right!? Yet, this valuable information and receiving their input is what helps us build better products in the future. I look forward to continuing to practice the design thinking process and make improvements with the next iteration.
If I had more time
More testing at different phases of a project and iterating our product
More interviews to find out more features that users want