Artboard 1.png

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.

https://en.jubo-health.com/

DURATION

2 months, Jul 2020 - Aug 2020

INTERNSHIP

CONTRIBUTION

Jubo, Taiwan

UX research, Ideation, UI/UX Design, Motion Design

IMG_2917.jpg

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.

Customer Satisfaction Survey
Survey Result
Jubo Easter Egg

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

Artboard 1 copy 2.png

heartwarming

Artboard 1 copy.png

spirited and playful

Artboard 1.png

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.

Artboard 1 copy 2.png
Artboard 1 copy.png
Artboard 1.png

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.

 
ezgif.com-optimize (3).gif

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)

Artboard 1.png

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

Chinese New Year Demonstration-min.gif
ezgif.com-gif-maker (1).gif
Lantern Festival Demonstration-min.gif
端午節 Demonstration-min.gif

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

Artboard 1 copy 5.png

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.

 
Comp 1.gif

(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.  

制定表單(NIS).png

cat in line style playing with the features icon in NIS

Artboard 3 copy 5.png

initial sketch

Jubo Chatbot as the main visual juggling feature icons in NIS

Artboard 3 copy 2.png
Artboard 3 copy 3.png
Artboard 3 copy 4.png

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.

Screen Shot 2020-09-13 at 5.58.31 PM.png

content and sections from selected component

acknowledgement

Many thanks to the participants in the design workshop for their creativity and enthusiasm. Thank you to my colleagues for expanding my thinking in the field of long-term care and including me in the conversation. Most importantly, thank you to my mentor, Alu Liu, for her constant guidance and support.