jubo internship
Jubo (Smart Ageing Tech) focuses on digital solutions for long term care, bringing technologies to the traditional care industry. As a UI/UX summer intern, my role includes designing easter eggs for the Nursing Information System (NIS) to enhance the overall user experience and utilizing Sketch and Zero Height to organize UI specifications.
DURATION
2 months, Jul 2020 - Aug 2020
INTERNSHIP
CONTRIBUTION
Jubo, Taiwan
UX research, Ideation, UI/UX Design, Motion Design
easter egg design
How might we design hidden easter eggs in the Nursing Information System to add elements of warmth and surprise for the users while maintaining the visual style of the company?
background research
To better understand and gain empathy for our users, I proceeded in conducting research on care professionals using the Nursing Information System (NIS). Through semi-structured interviews and online surveys, I was able to gain insight into how long-term care facilities operate, how they use the system, and design opportunities for easter eggs.
SEMI-STRUCTURED INTERVIEWS
I interviewed three participants, two health care workers in long-term care facilities, and one colleague with nursing background. Questions included NIS, connection with residents, work-related stress, and easter eggs ideas for the system.
Action Success Feedback
Participants can get confused if the data inputted was saved or not. Showing feedback messages will help with clearer responses on what is happening on the screen.
Access Denied Screen
Nurse, health care professionals, and social workers all use NIS. But due to the regulations, not all data can only be inputted by one person. Designing the ‘access denied screen’ can potentially elevate the frustration that comes with it.
Holiday Home Page
When participants were asked what kind of easter egg design would they like to see on NIS, all three participants suggested having unique home pages for holidays.
Creative Animations
Participants prefer lively, spirited animations as opposed to still images on screens.
ONLINE SURVEY
After gathering insights from the interviews, I had a better understanding of the design opportunities. To reach more users and understand their views, I sent out a customer satisfaction survey that includes multiple-choice questions about the easter egg design (shown on right).
POSITIVE FEEDBACK
I also looked at previous easter eggs in the Nursing Information System and learned from the customer success team that users liked the birthday icon for the residents. They think it is a thoughtful and heart-warming design. Thus, I wanted to further implement designs in this direction.
design workshop
After the initial research phase, I hosted a design workshop to generate various and potential solutions as a company. Through the process of rapid ideation, discussion, sketches, and downselection, particiapnts from our company were able to visualize more than 20 ideas, ranging from icon designs, to reward systems, to theme songs. After analyzing the results from the interviews, survey, and workshop, I decided to develop three concepts: birthday surprise, holiday celebration, and error page design.
DESIGN PRINCIPLES
heartwarming
spirited and playful
integrated
IDEATION AND DOWNSELECTION
Participants had great responses and came up with creative ideas. However, some were harder to execute or were too abstract. After considering the results from the background research and dot voting, I chose three ideas to develop from the teams.
Birthday Surprise
Designed for the caregivers, after signing in to their account on their birthday, an animation will pop up.
Holiday Celebration
Appears in form of animation or images, they replace original designs of the home page for a feeling of celebration.
Error Page
Inspired by Google's dinosaur game, Jubo's mascot will remove obstacles, which are features in NIS, to pass through.
birthday surprise
After the initial sketches from the design workshop, I started to develop the concepts one by one. The birthday surprise is an added screen between the login and home page. As the user login, an animation will pop up to wish them a happy birthday. From sketches to prototypes to the final deliverable, this project took one week to complete. Below are the final design and the design process.
DESIGN PROCESS & CHALLENGES
Birthday animation had a detailed idea from the start. It is a small animation for the care professionals, as they enter the home page, they would see small easter eggs, such as a change in icon design, adding elements of joy and surprise to the system.
Initial Sketch
First, I drew out the basic components needed for the animation and their relative position to each other in Illustrator. I limited the colors to five since Jubo's NIS has a minimalistic style.
Prototype
Second, I used powerpoint to quickly visualize the placement of the birthday animation. After considering different screens it can exist on, I decided that adding another screen in between the login page and home page to create a smooth transition that has a consistent style.
After Effects Animation
Third, I started to make the animation. After Effects was relatively new to me so it took me a while to get used to the workflow. After a week, I designed a short birthday animation with confetti, fireworks, and a message to surprise the care professionals when they come to work on their birthday. (shown above)
initial sketch (translation: Jubo wishes you a happy birthday!)
prototype
holiday celebration
The holiday celebration is designed on the login page. Images that represents the holiday fade in and out, and appears every time the user login on the day. From sketches to prototypes to the final deliverable, this project took one week to complete. Below are the final design and the design process.
mid-autumn festival
dragon boat festival
chinese new year
christmas
DESIGN PROCESS & CHALLENGES
With consideration, we made changes to the design of the holiday celebration, creating a smoother workflow that fits the principles of Easter egg design.
Initial Design
I was told that the brand team makes media posts for holidays sent to the residents’ families. So I thought that reusing the materials in NIS would keep the style consistent.
Cross Team Collaboration
After creating the prototype, I realized that adding the image as a pop-up screen would interrupt the user’s workflow, designing it on the login page would be more ideal. After communicating with the software engineers, we decided to use images that represent the holiday instead of making an animation, because animations have larger file size and would not fit well on the variety of screen sizes.
Testing & After Effects Animation
We decided to create the animation effect through front end development by randomizing the position of the images and having them fade in and out. I proceeded to draw out the icons for the holidays using simples gray line stokes to fit the style of NIS, then demonstrated how it will look on the login page with animation.
initial design
iteration
error page
The error page design appears when the system has some problems. The Jubo chatbot will appear and gives direction to head back to the home page or previous page. From sketches to prototypes to the final deliverable, this project took one and a half weeks to complete. Below are the final design and the design process.
(translation: opps the page you're looking for got lost in the air...., please retry)
DESIGN PROCESS & CHALLENGES
Initial Sketch
The participant’s initial idea from the workshop was a humanized old cat hitting the obstacles of NIS's features icon as it walks. Even though it is fun and original, it does not fit with the image and brand of the company. I decided to reiterate the sketch and create the line stroked cat playing with the features icon.
Cross Team Collaboration
I then asked the brand team designer for advice. After discussion, we agreed that the cat does not relate to the company and that having visuals that already exist in Jubo’s service would make more sense. I went back to the sketch from the design workshop and determined that the features icon and gamification were the key aspects of the idea. Thus, I decided to design a Jubo chatbot juggling three feature icons from NIS.
After Effects Animation
I then made the animation in a loop using After Effects. Every time the error page appears, Jubo chatbot will be juggling, different messages will show to explain the error, and buttons to return to the previous or home page.
.png)
cat in line style playing with the features icon in NIS
initial sketch
Jubo Chatbot as the main visual juggling feature icons in NIS
iteration
UI specification organization
Organize the user interface components using Sketch and Zero height to present the overall design, anatomy, different states, and specs in a clear manner.
organization
To document the design system and to organize the UI components for Jubo, I looked at the organization of Material Design for reference and categorized each section by overview, anatomy, states, and specs in Zero Height.
ZERO HEIGHT ORGANIZATION
Throughout the summer, I organized 16 UI components, including the app bar, header, footer, buttons, dialogs, snack bars, tabs, and more. I was given the Sketch file that includes all the basic components, then I added elements needed, reorganized how it should be presented on Zero Height, and uploaded them. Below are the sections and information included in one component.
OVERVIEW
The overview section shows the different variations of the component. For example, a plain button, a text button, a button with an icon in the front, a button with an icon in the end, etc.
ANATOMY
If the component is created using other smaller components, such as a dialog, an anatomy section will explain the parts that form it with hyperlinks linking to those pages.
STATES (FSM)
The states section shows the behaviors while under different actions or the hierarchy of the components. It is shown through the FSM table, written in a way that shows how each state corresponds to a different state with an action.
SPECS
The specs section shows the width, height, placement, color, style of the component. It is shown with different spacing blocks and annotations on the side. Whether it can expand sideways or crossways with the amount of information in the area is also specified here.
content and sections from selected component
