Lynch Heppner
Roles
UX/UI Designer | Usability Tester
Timeline
4 Weeks
Tools
Figma | Loom
Project Brief
My IDP team and I were tasked with helping a new start-up, The Emprint Lab (TEL), visualize the company’s product - to bring the owner’s ideas to life by creating realistic mock-ups and prototypes that portray the founder’s ideas in a tangible medium.
Since TEL’s founder had previously worked with a Springboard UX Design cohort, my team and I were given access to their previous design file. We were instructed to work from where they left off and to more or less explore where we think made the most sense given where they landed.
My team and I decided on a SOW based on the design file we were given, and after receiving confirmation from TEL’s founder, we began working on our respective deliverables, while meeting regularly to collaborate and ensure cohesion between each of our projects. I was tasked with designing the first iteration of what TEL’s founder called their AI Chat Assist feature.
Bearings
Since we were the second team to work with TEL, we inherited a working file from the previous team.
The first order of business was to dive into the Figma file and get our bearings with where the last team had wrapped up and to familiarize ourselves with the design language of the project.
The first team was able to produce high-fidelity first draft mockups of most of the major screens.
​
After exploring the files a bit, my team and I decided on which parts of the client's needs we each wanted to work on - I really wanted to focus on building the AI Chat Assist portion of the video interface.
​
Ideation
I was tasked with creating a new portion of the project that had not previously been worked on. This meant I have more freedom but also would be required to ideate.
The requirements I was given for the AI-Assist Chat Function were as follows:
-
Transcribes spoken words live, in real time
-
Is integrated in the same window as the text chat box
-
Grades speech on a Green, Yellow, Red scale
-
Green = Perfect, needs no rephrasing​
-
Yellow = OK, but could be rephrased better to promote healthy discourse
-
Red = Needs to be rephrased
-
Yellow grades offer optional AI suggestions to rephrase
Mock Ups
Once I felt comfortable with the sketches I had, I took them to the Figma file we were given to begin creating realistic mock ups.
High fidelity version of yellow display toggle. Can be ignored if needed.
Integrating the AI-Assist into the preexisting chat window means fewer areas the user needs to look on the screen while also trying to have a conversation. The colors and shapes used were iterated on until my team and I felt they were the perfect balance of clarity without being distracting. They are meant to be suggestions rather than alarming notification that detract from the live conversation.
Red grades are the most prominent and cannot be minimized. It is highly suggested the user rephrase their previous statement.
Prototype
After receiving approval from the team and owner, I brought the high fidelity mock ups to life by adding prototype interactions.
​
This not only helped share my designs with the rest of my team but also created a file that could go into testing with users for feedback and further iterations.
Lessons
This was a fantastic experience that allowed me to gain experience working with a team of designers as opposed to being the sole designer working for a customer. Since everyone has their own design ideas, it was crucial to be able to communicate clearly with all stakeholders and to be able to collaborate with them as they simultaneously worked on their components to ensure a cohesive product was delivered.
​
This was also a great lesson in how to use various design techniques to create hierarchy and prominence within the overall design. As mentioned above, we needed to walk a fine line with the AI-Assist elements such that they were clearly displayed but did not detract from everything else that is happening on the screen. While working on this project, I liked to think of it like a pilot's flight instruments: the user needs to be able to quickly find and digest information from the components without being distracted when not necessary. I feel that I grew immensely as a designer coming out of this challenge.
​
I also sharpened my Figma prototyping skills during this project by figuring out how to use large components with 15+ states, including additional nested components, in unison with advanced auto-layouts to make the text appear from the bottom up and allow for toggle-able pieces within each state. It was one of the most complex prototypes that I've built, but was worth every minute spent working on it because of everything I learned about Figma prototyping.
​
Additionally, having the opportunity to create interview questions and administer user testing sessions was an invaluable experience. While we did not have enough time in the project to test the AI-Assist feature, we were able to test the scheduling feature that my teammates worked on. I worked with my colleague to create a series of questions to test our designs with potential real-world users. The recordings can be viewed below!
