Analyzed artifacts in BlockStudio programming language to recognize computational patterns among families.
Facilitated and conducted field study observations, reflections, focus groups.
Qualitative coding on 6 BlockStudio (visual programming interface) workshops.
Built qualitative coding framework used for analysis.
Contributed to paper submission writing in prose.
Publication
Banerjee, R., Liu, L., Sobel, K., Pitt, C., Lee, K.J., Wang, M., Chen, S., Davison, L., Yip, J., Ko, A., & Popović, Z. (2018). Empowering families facing English literacy challenges to jointly engage in computer programming. In Proceedings of SIGCHI Human Factors in Computing Systems (CHI ‘18).Association for Computing Machinery. https://doi.org/10.1145/3173574.3174196 HONORABLE MENTION Best Paper Award (Top 5% of 2,500 submissions)
Programming is primarily authored in English text, and requires some technical background from parents to support their children’s access to programming. Such requirements put English-language learning (ELL) families from marginalized communities to face challenges in understanding and supporting programming for children.
What is BlockStudio?
We present BlockStudio, a text-free and visually concrete programming tool for empowering ELL families to jointly engage in introductory coding. Users can create stories and video games. This research is part of KidsTeam UW. In this study, we investigate family joint media engagement (JME) of BlockStudio involving three community centers serving immigrant and refugee populations.
Our findings indicate ELL families understand aspects of programming within BlockStudio’s environment. Evidence of family JME are shown through co-creation, flexible roles, and creating artifacts. We hope to see future applications for designing text-free programming and supporting ELL families to code together.
Next steps: redesign coming soon
BlockStudio's potential to benefit ELL communities and content creators inspires me time and time again. I am now working on a redesign for BlockStudio, focusing on a more engaging and beginner friendly experience. The largest addition to BlockStudio will be the tutorial experience that provides applicable game mechanics for new and intermediate users.
Doodle your friend's and your video in real-time to share the fun.
Overview
I propose a personalized virtual experience for users to engage with their friends during a Houseparty video call. Hand-drawn doodles and annotations on one's own and each other's videos in real time can share the fun of being together and getting creative. *Unofficial designs.
Time August 2020
Focus UX Design, Product Design, UI Design
Challenge
How might we design a personal experience to share the fun of being together with friends using Houseparty?
Concept Designs
Hand-written doodles and annotations can be a fun and personalized method to share ideas and creativity. Some examples that have close to real time hand-written doodles and annotations include Pictochat (Nintendo DS), Zoom, and MagicalDraw.
I created UX and UI concept designs for a real-time doodle experience for Houseparty users. The doodle experience allows users to draw on their and their friend's videos using their finger. Users can also "lock" their video, preventing others from doodling on their video.
1
2
3
4
5
Enter room
Select icon
Unlock or lock video
Doodle on video
Clear and close
Begin a call with friends.
Select the doodle icon to adjust color and pen size.
Videos are unlocked by default.
Draw and undo mistakes in real time.
Select the X to clear and close.
Going Forward
Looking into the future, I would create interactive prototypes to gauge how users may interact with this feature. I will also interview Houseparty users if this feature is desired, and how they might use this feature.
Tattrack is a tracking app and smart band experience for tattoo artists to be mindful of their wrist health.
Overview
Many tattoo artists love their jobs. However, many artists encounter short industry life due to wrist pain, also known as carpal tunnel syndrome. In this project, my team aims to assist tattoo artists to take better care for their wrists to prolong their careers, so they can continue doing what they love.
Team Members | Roles
Leanne Liu | UX Designer, Industrial Designer
Franklin Huynh | UX Designer
Rachel Wallace | UX Designer
Joseph Yoon | UX Designer
Time September 2018 - December 2018
Setting University of Washington, Seattle
Focus UX Design, UX Research, Industrial Design
Problem
Many tattoo artists develop carpal tunnel syndrome after many years of using tattoo machines. Carpal tunnel syndrome is a large cause of industry drop out.
How might we help tattoo artists be more mindful about improving the health of their wrists while doing work to prolong their careers?
Solution
Our team developed the concept of a wellness tracking experience for tattoo artists to wear during their work. The tracking device is a smart armband that sends wrist health data to a smartphone app. I designed and created the device using Solidworks. Here is what our solution looks below.
Dashboard
Users can view their day's accomplishments ("Training Goals" and "Healthy Wrist Position") in this screen.
Users will be able to tell whether they have been mindful of their wrist health during their tattoo work.
Suggestions
Users are able to do guided stretches suggested by Tattrack based on the wrist train data collected by the armband.
Stretches can be marked as a "Favorite" and can be seen in the "Favorite" tab. All stretches can be viewed in the "Library" tab.
Progress history
After tapping "View Data History" in the Dashboard screen, users can view wrist strain progress over time as a visual graph.
Smart armband
Users will wear this armband on their dominant tattooing forearm. The armband will collect data of the users' wrist strain and sends it to the app.
Dashboard
Users can view their day's accomplishments ("Training Goals" and "Healthy Wrist Position") in this screen.
Users will be able to tell whether they have been mindful of their wrist health during their tattoo work.
Suggestions
Users are able to do guided stretches suggested by Tattrack based on the wrist train data collected by the armband.
Stretches can be marked as a "Favorite" and can be seen in the "Favorite" tab. All stretches can be viewed in the "Library" tab.
Progress history
After tapping "View Data History" in the Dashboard screen, users can view wrist strain progress over time as a visual graph.
Smart armband
Users will wear this armband on their dominant tattooing forearm. The armband will collect data of the users' wrist strain and sends it to the app.
Design Process
The design process consisted of three main parts:
(1) Research This phase consisted of conducting semi-structured interviews and secondary research to better understand tattoo artists.
(2) Synthesis Information from research was synthesized to create personas and a UX journey map.
(3) Design I ideated and sketched, built an information architecture, iterated on wireframes, created prototypes, conducted user tests, and created high-fidelity mockups.
1. Understanding tattoo artists
In order to gain an understanding of our user group, we conducted a total of four semi-structured interviews with tattoo artists, each having different backgrounds and experiences. A wide range of questions about their profession, from working with clients to explaining each part of their process were asked to develop a solid understanding of this user group while minimizing stereotype bias.
Tattrack team composing affinity diagram in the design lab.
After conducting interviews, we identified patterns and user-centered design opportunities through an affinity diagram analysis. A major theme we discovered was the physical pain(wrist and back pain) while the tattoo artist was on the job.
Wrist pain
during and after tattooing is the most common pain point that tattoo artists experience.
Tattoo artists experience
back pain
during tattooing, which negatively influences their work experiences.
Carpal tunnel syndrome is a major cause of tattoo artist
dropout later in their careers.
Sticky notes affinity diagram of interview findings, which resulted in a total of 18 themes. The themes with the most themes were physical discomfort, which consisted of wrist and back pain during tattooing.
Sticky notes affinity diagram of interview findings.
The most common themes from the sticky notes affinity diagram are compiled to 6 themes in the form of a digital diagram: tattoo process, physical discomfort, business operations, experience, working with clients, and tools.
The 6 most common themes in a digital affinity diagram.
2. Persona creation
Based on the research findings we found in the previous step, we identified user needs, goals, pain points, and characteristics to include in our two personas. Any assumptions and interview data were identified and noted while building the persona content. These personas served to tie our work back to the research and user needs, goals, and pain points.
The persona of Kelly, a novice tattoo artist who uses a rotary tattoo machine.
The persona of Stanley, an experienced tattoo artist who uses a coil machine.
The persona of Kelly, a novice tattoo artist who uses a rotary tattoo machine.
Kelly's highlights
New tattoo artist
Uses rotary tattoo machine
Neck and back pain while tattooing
Wants to learn to use coil machine, but is scared it could shorten her career
Desires to prolong her career life in tattooing
The persona of Stanley, an experienced tattoo artist who uses a coil machine.
Stanley's highlights
Experienced tattoo artist
Uses coil tattoo machine
Has carpal tunnel syndrome symptoms
Goal is to reduce eye, neck, back, and wrist pain
Desires to tattoo without physical pain in eyes, neck, back, and wrists
3. Mapping the journey
Based on the personas created previously, I created a UX journey map for Kelly, one of our two personas. This UX journey map shows a day in the life of Kelly as a tattoo artist, while representing the person’s emotions during her experience. This helped us identify design opportunities to address points of frustration. I decided to focus on Kelly’s frustration point of experiencing wrist pain during tattooing.
UX Journey Map for Kelly, a beginner tattoo artist.
4. Ideation and sketching
Through the previous research and analysis, a clear design opportunity was identified. We first did divergent ideation, in which each of us ideated sketches on our own, and then came together for convergent ideation. Through ideation, we developed our solution concept.
Three sketches during ideation of Tattrack: information collected and shown (left), initial information architecture for the grip on the tattooing machine (middle), and sketch of a smart band and smart grip idea (right). The grip idea was later removed to streamline the smart band and app experience.
Solution concept We envisioned “Tattrack,” our solution that consists of a smart band tracking wrist health while being worn by tattoo artists as they were tattooing. The data is visualized in a smartphone applciation on the user’s phone, representing wrist health in a consumable design. The application will also recommend stretches and exercise depending on the user’s wrist strain.
5. Building the information architecture
With our vision of a wearable smart band and smartphone app in mind, we wanted to create a seamless experience between the two components. I created an information architecture (IA) to map the transitions between features, components, and devices.
This IA shows how the user may interact and navigate through our design. The IA has three main task scenarios: setup (pairing devices), during tattooing (smart band), and post tattooing (smartphone app)
IA for Tattrack maps out the user flow of pairing the smart band with the app (purple), during tattoo interactions (red), and post tattoo interactions (green).
6. Iterations of wireframes, prototypes, user tests
Our first step of bringing my design to life was creating paper prototypes. Using the paper prototypes, I conducted three usability tests to determine the understandability and ease of navigation of the design. The usability test findings were used to revise our wireframe design for Tattrack. Finally, I designed and 3D modeled the smart armband in Solidworks.
During the setup process for theapplication, participants expected the interface to slide to the next page on some pages instead of tapping the arrow to move on.
Finding 2: Low skimmability
Many participantsfound the data to be overwhelming. Information on the statistics page must be more concise and skimmable.
Finding 3: Icon and image ambiguity
All participants had difficulty distinguishing stretches just by the images. Some participants also had minor trouble with recognizing icons at thebottom of the screen.
Dashboard
Users can view their day's accomplishments ("Training Goals" and "Healthy Wrist Position") in this screen.
Users will be able to tell whether they have been mindful of their wrist health during their tattoo work.
Finding 2: Low skimmability
Many participantsfound the data to be overwhelming. Information on the statistics page must be more concise and skimmable.
Finding 3: Icon and image ambiguity
All participants had difficulty distinguishing stretches just by the images. Some participants also had minor trouble with recognizing icons at thebottom of the screen.
Wireframes for wrist training suggestion (wrist training) user flow are shown below. First the user can start from a suggested exercise plan, or select from a library of exercises to build their own plan. Ultimately, users are able to follow a training course to stretch along.
Wireframe flow for a suggested wrist exercise.
Annotated drawing of the wearable smart armband.
7. User interface design for high-fidelity mockups
After reviewing the wireframes, I designed UI for to visualize data collected from the smart band. We continued to make adjustments as the team saw fit for the readibility of the UI.
Suggestions
Dashboard
Data history
Right view
Isometric view
Top view
Future steps and reflection
Design implications
We had the opportunity to present our project to a panel of UX Designers from Amazon, and placed top 3 out of 13 other design groups. One of the panelists made an insightful suggestion to include a community feature for users to share their wrist care tips and tricks. This way, tattoo artists can better connect with the community, while simultaneously caring for their wrists.
Future steps
(1) seek feedback from tattoo designers and conduct a usability test (2) community features to connect tattoo artists (3) extend to other users that may benefit from wrist mindfulness (4) create a working prototype of Tattrack
Reflection
This project helped me build my foundations in user-centered design. This project is one of my favorite ones I’ve done so far, thanks to my ink-redible team mates, the tattoo artists we encountered, and our professors. A lesson I learned was to prioritize evidence over assumption. Making note of my own assumptions was crucial for making a user-centered product. I hope to champion the voices of the users, no matter what profession or project I work on in the future.
Meet my wondeful team that made this project ink-redible! From left to right: Joseph Yoon, Franklin Huynh, Rachel Wallace, Leanne Liu.
%20(1).png)
-02-min.png)
-06-min.png)
-10-min.png)
