Design Challenge

How might we serve the caregiving needs diabetes patients with a product that is fun and useful for both patients and caregivers?





Final Concept Demo


Drop-in is a project sponsored by Premera, a local health insurance company whose primary business areas are Washington and Alaska. Our team was asked to provide a digital solution for Premera’s current or prospective customers in aftercare field.




Send a Message

Retrieve a Message

Maintain Habits




1. Mike wants to encourage his friends Sophia to get some exercise from her busy schedule. He starts by recording a video message and drops his message on a specific location. 


2. Sophia receives a notification from Drop-in that her friend Mike just sent her a message. However, before she can watch the message, she needs to take a walk.

3. The message was dropped 14 minutes from her. She decides to take a walk right away. Following the map, she walks towards the message.

4. Getting closer and closer, finally, Sophia found that message! She taps on the “view” button to watch the message now.

5. The message plays. In the video, Mike reminds her to take a walk every day to build exercise habit, getting outside to enjoy natural views.





Research and Findings


We started with secondary research about caregiving in general, issues around aftercare,  how behavior change can be impacted by technology, and the most common medical conditions in the area served by Premera. We also supplemented our research with additional primary research.
 




Ideation and Down-selection


Process
We used a mind map to explore the connections between each subtopic and uncover areas in the problem space we hadn’t previously considered.

We came up with around 100 ideas and sorted them into 7 different themes. The following critique session with Premera helped sharpen our focus in order to pull out the strongest 20 concepts from our group of 100.


Downselection Criteria
Combining the feedback from Premera and our own perspective from our research, we chose 6 criteria for evaluating our concepts:

  • Innovative
  • Contextual
  • Beneficial to Caregivers
  • Beneficial to Patients
  • Increased Knowledge
  • Coordinative






After multiple rounds of downselection sessions, we felt the geocached messaging concept can serve our users and Premera’s business goals best.

The geocached messaging concept will allow caregivers located locally or remotely to send video messages that can only be accessed in a specific location. The patient will have to be physically active in order to access the motivational messages from their loved ones. They will then have the ability to send a geocached message back to the caregivers.




Competitive Analysis



I researched on a variety of fitness apps and diabetes management apps, and analyzed them using these 3 metrics: being motivated, exercise orientedand, and diabetes targeted.





Discovery design opportunities





Desired Goals and Key Features








Key User Flows


*View the detailed flows map here



Key Path #1   
Send a Message
The caregiver would be able to send video messages that can only be accessed in a specific location.

Key Path #2
Retrieve a Message
The patient will have to be physically active in order to access the motivational messages from their loved ones. They will then have the ability to send a geocached message back to the caregivers.




Lo-Fi Prototype Test


To further develop the concept, we created prototypes of key user flows using paper prototypes and tested them with users.  

Main Finding #1
  • Message senders expected more guidance of where to drop the message; when retrieving the message, people wished to have more control of their walking routes.

Solution
Added My Favorite Places feature, which users can define their start locations.

Main Finding #2
  • Users brought up accessibility concerns. Patients may have different levels of mobility issues.

Solution
Provided accessibility filters on the map including Steep Grades, Obstruction, and Stairs to better serve wheelchair users.
Main Finding #3
  • Users have different opinions about the order of dropping the message and choosing the recipient.

Solution
Conducted another round of competitive analysis on popular video messaging apps such as Snapchat and Instagram. Followed the most conventional order, but leave freedom for users to jump back and forth.



UI Mockups


Send a Message

Retrieve a Message


Inbox
Maintain Healthy Habits
 
Onboarding




Animations



Find a Message

Explore New Goals

Maintain Habits




Visual System


Interface Style
In order to create a clean look and allow users to focus on the key tasks, I used the flat visual style to reduce unnecessary distraction.
Color Palette
I chose orange as one of the primary colors because of its association with joy, enthusiasm and encouragement. Black and white created strong contrasts to other colors which provided effective visual cues.



*View the detailed UI specification document here



Reflection




Should think more about collaborative elements in the goal setting part where patients and caregivers share the ownership of the goal. They can accomplish the daily walk together. 

Enable the system to learn patients’ habites and routes. Should avoid making sending messages become burdon on caregivers. They system should be able to send messages intermittently. 

More research needed for the accessibility map data sources.




    Design Challenge

    How might we improve the communication efficiency between childcare providers and parents?





    Introduction


    In most U.S. families, both parents work outside of the home. Daycare is usually their first option.

    Elepho is a new system that improves the communication efficiency between childcare providers and parents. Keeps parents well-informed, while simultaneously make daycare teachers’ work more manageable.



    Process







    Research Findings


    Insight 1
    ︎Most people have trouble to accommodate their busy schedules and feel the lack of time with children and families.




          


    *View the detailed survey report here


    Insight 2
    ︎Parents’ expectations and complaints about daycare services are different and vary along with the children’s growth.





    *View more about the MakeTool sessions here


    Insight 3
    ︎For daycare teachers, paper reports and emails as the main communication methods with parents are cumbersome and easily misplaced.







    User Types


    From the formative research findings. I summarized parents’ and teachers’ representative daily tasks, device preferences, and needs and goals.


    1. Parents

    2. Teachers



    Design Principles



    Aligning with users’ goals and expectations, I developed 4 design principles as my guidelines for the following ideation and design process. 






    Design Opportunities & Ideation




    I looked for design opportunities around parents’ bags, kids’ daily supplies, and daycare equipment to build the connection between parents and children through technologies which can provide proper feedback when they are not taking care of their children in person.



    I brainstormed different concepts based on these three steps:

    • Sending information from childcare providers such as the daycare center, nanny, baby sitter, etc. 

    • Processing information via digital platforms such as baby monitors and mobile/desktop apps.

    • Receiving and reacting to information on the parents’ side. 





    Down Selection



    1. Users’ Feedback

    I brought these ideas back to 3 parents and asked them about the desirability of each idea. They wrote about their thoughts on sticky notes and voted for their favorite ones. For teachers, I called back to 2 daycare teachers (one from toddler class, and one from mixed age class) and walked them through these ideas. After gathering feedback from parents and teachers, I reached 3 major insights.




    2. Competitive Analysis

    To better understand the design opportunities, I conducted a competitive analysis of 6 popular software usually used in daycare centers and 6 child monitor/communication tools used by parents. I examined them in terms of their features and the values they provided for daycare facilities and/or parents.


    Daycare Software

    Child Monitor & Communication Tools

    *Click to zoom the charts above 




    3. Synthesis

    After synthesizing all 5 insights from users’ feedback and the competitive analysis, and taking the 4 design principles into consideration, I reached the conclusion that a two-way information interactive service could fit best in this scenario. 



    System Diagram


    I proposed a responsive and interactive service system to address the communication problem between childcare providers and parents.





    Media Selection


    1. Information Design Opportunities

    Parents have strong emotional connections with their kids. The special bond between parents and children makes them miss their children very hard. Current software and products on the market can provide information and feedback to parents but few could think about when and how the information would be sent and received.

    In this case, I used the Media Richness Theory as the reference to categorize and analyze different types of communication media and their capabilities of carrying information.



    2. Media Channels Analysis


    When the parents cannot take care of their children in person, they expect to receive proper feedback from other care providers to make sure their kids are safe and happy. Different communication channels can carry different amount and types of information. 



    3. Information Flow
     

    *Click to zoom the charts above



    Concept Development


    1. Mobile App Design


    Low-fi Prototyping and Testing
    I made paper prototypes and invited 5 parents (4 female and 1 male) to attend the testing sessions. I was able to perceive how the participants would interact with the app and observed if they encountered any usability problems.


    Main Finding #1
    • 2 participants pointed out the multiple entries on the homepage did not provide useful information directly.

    Solution
    Revised the homepage content to be more informatic. Simplified the navigation structure and provided accesses to the most important features on the bottom navigation bar. 
    Main Finding #2
    • Parents expected an easier way to set up the Customized Feeds section. 

    Solution
    Provided two pre-setted modes that users could modify the amount of feeds they want to receive. 




    High-fi Prototyping and Testing
    During the low-fi prototype testing, I got a lot of useful feedback from the participants. However, due to the limitations of the low-fi prototype in both functional and visual aspects, some functions were unclear in terms of what were supposed to work and what were not. It required a lot of imaginations from users. For the next step, combining the feedback got from previous testing sessions, I developed a set of high-fi prototype and conducted another round of testing. 




    Main Finding #1
    • Having the daily reports listed by dates was not the most convenient way for parents to locate the information they want.

    Solution
    Added a search bar that enables users could use keywords to find related information  

    Main Finding #2
    • All the participants liked this Gallery feature. However, people wished this section could be more personal and creative.

    Solution
    Considered to develop more customized editing and reviewing features for photos and videos.  


    • Nothing stood out from this flow

    Secondary Finding
    • The male participant hoped the theme colors could be more gender neutral.

    Solution
    Explored broader color schemes and used gender neutral colors
    .


    Sitemap
    Based on users’ feedback, I revised the sitemap to be easier to navigate. I re-ordered contents and arranged them in a logical, intuitive way to increase their discoverabilities. 





    Final UI Mockups


    Achievements


    • Use Journey or List view to see important dates and achievements
    • Understand what should be expected next

    Rationales:
    • New born babies may bring a lot of anxieties. Parents hope to be proactive about what should be expected next (interview).
    • Parents’ expectations vary along with the children’s growth (survey, interview).


    Gallery


    • View all the photos and videos at one place
    • Select your favorite ones to export customized posters

    Rationales:
    • Parents participants expressed a desire for creating a photo memory book to savour the baby’ journey (round 2 testing).



    Reports


    • Have the daily reports at your fingertip
    • Use keywords and pictures to create your own reports at home

    Rationales:
    • Paper reports are hard to keep on file and are easily misplaced (interview, MakeTool session).
    • Allowing parents to input the night reports would help to streamline the childcare task (interview).

    Setting


    • Use 1-click to switch modes between “Busy” and “Free
    • Adjust the amount of feedback you receive

    Rationales:
    • For working parents, being able to adjust the amount of notifications helps to reduice the unnecessary distractions from work (interview, round 1 testing). 




    Other Features


    Parents’ Group

    • Start a conversation with other parents in the discussion group
    Calendar

    • View incoming events and payment due dates

    Events

    • Check out the daycare center’s events, and save the interesting ones into your Favorite
    • Use “Going” or “Maybe” to indicate if you’re interested in or not


    2. Hand Device

    This device was specifically designed for daycare teachers. It is small, lightweight and easily be carried with. The built-in front and back cameras that incorporate with Facial Recognition and Object Recognition technologies can help to smartly capture information about each activity of each child by pairing with different Hotspots located in daycare centers.
    Primary functions include:
    • Photo capturing
    • Tasks confirming

    No extra writing is needed from the teachers’ side and the accuracy of tasks’ record is guaranteed.


    Final design


    Process






    3. Childcare Robot

    The elebot is an Artificial Intelligence Robot who is able to communicate efficiently with children and teachers by analyzing the words and tones in conversations and people’s facial expression and then give natural reactions. He is responsible for collecting and selecting useful data and send them to the central hub. That information will be used for generating children’s daily reports that the parents can save as references.
    Daily tasks include:
    • Captures photos and videos during activities
    • Displays customized educational materials and teaches lower-level classes
    • Connects video calls upon to parents’ request. Immediately syncs data with the central hub

    Final design


    Process






    Visual System


    I hoped to create safe, energetic and lively feelings. Most of my inspiration pictures have pastel tones of mild color themes.

    Color Palette



    Logo Design





    System Performance


    Childcare is a complicated task. It brings joys and excitements to parents, but also requires a lot of efforts on a daily basis. Existing tools are mostly one-way communication that lacks interaction. To fulfill both parents’ and teachers’ needs, a interactive system would provide more comprehensive information feeds which could not be achieved by a single product.
     





    Reflection



    Should consider design the device’s user interfaces and tested them with teacher users if I had more time. 

    Should prototype the hand device with proper materials and test it with teacher users in their working environment.

    Should test the prototypes in the parent users’ home to mimic the usage scenarios (eg. parents are writing new reports at home while they’re performing other childcare tasks at the same time).

    Should think about other types of users and usage scenarios. For example, other childcare providers such as baby sitters or nannies might also utilize the system to provide feedback to parents. 

    If I had time to design more components in the system (the device screens, the robot screen, etc), I would like to test them with teachers and parents together. Thus, I can understand if the system provides suitable assistants for both types of users. 

    Mark

    UX Specialist Internship



    From May to August 2017, I worked as a UX specialist intern in the digital team at Owens Corning's headquarter, Toledo, OH

    I was highly involved in multiple projects across different business units in a  collaborative setting. 
    Skills:
    - UI design
    - lo-fi & hi-fi prototyping
    - usability test
    - research planning
    - user interview
    - heuristic evaluation
    - card sorting

    - interpersonal skills
    - collaboration
    - presentation skill

    Collaborated with: 
    - Stakeholders
    - Project Manager
    - Senior UX Researcher
    - Web Analytics Lead
    - UX Architect
    - Visual Designer
    - Software Engineers
    - Marketing Specialists - Internal Users

    Roofing Contractor Experience


    PreConnect is an online 24/7 resource portal that provides rooting contractors with full access to a wide range of communication tools. For this project, we were trying to transfer the current portal onto a new platform where can provide a better user experience for the customers. 

    Research Methods

    • Card Sorting
    • Usability Test
    Design





    Building Enclosure


    Building Enclosure website is a launched website, rather than researching and testing on the overall user experience, our goal was to validate several specific functionalities including navigation structures and CTA buttons.


    Research Methods

    • Heat Map Analaysis
    • Usability Test

    Design





    Customer Relationship Management


    The CRM system is an essential tool that helps the sales team manage customer relationships effectively. It can asset commercial leaders to predict marketing trends. 


    Research Methods
    • Heuristic Evaluation
     




    Please contact me to know more about the details! Thanks! 



    Mark

    On-boarding Experience Redesign
    for Sonos

    Onboarding flow redesign for Sonos smart speaker app

    Individual project.


    Skills used:
    - Research
    - Illustration
    - User interface design





    Problem Statement


    The Sonos app eables users quickly search through all music services to track down favorite music, send it to different rooms, and adjust the volume and other settings.

    However, the onboarding and setting-up process are not as pleasing as it should be. Even Sonos has a lot of tutorials available on their website showing how to setup the speakers, people still get confused about this process. 
    The How-to’s videos on their YouTube Channel
    Most of them received more than 100k views, which indicates that a lot of users have been searching for how to set up the system online. 



    Users’ reviews about one of the “how to set up” videos







    Cognitive Walkthrough


    I watched the tutorial videos from Sonos official Youtube channel and listed all the steps that a user need to go through for setting up a single speaker. The video is about 6 minutes. I went through the setting process of a PLAY 1 speaker as a first-time user. The whole process took me around 25 minutes.







    Style and Colors


    Other than the pure white and black, Sonos released several series of limited edition speakers such as the PLAY:1 Blue Not, and HAY Collection. Both series got people’s like and sold out quickly. I was inspired by their clean looks, fresh colors, and the innovative values that they brings to modern homes.







    On-boarding Flow Mock-up


    After conducting semi-structured interviews with couple Sonos’ s users, I decided to combine the setup process with the on-boarding flow together, which I believe that can make the setting-up process easier. At the meantime, leaves users options to exit the flow if they wish to set up their speakers later.

    For its style and colors, I used concise illustrations and muted color collections to create a relaxing and fresh feeling. 


    MURA


    Designing a streamlined process to schedule meetings across different time zones


    Individual project

    Keywords:
    - User Research
    - UI design

    - Animations










    Problem Statement

    How might we help the individuals in different time zones to manage and communicate their schedules with their co-workers?






    Methods


    I inherited the research findings from the client. I started with a research process to understand the pain points of the users who need to coordinate and schedule meetings in global organizations. During the interview sessions, I took close observations of users’ process of scheduling meetings with people in different time zones and learned about their tools, preferences, and goals.

    Then, I summarised their common pain points and generated two archetypes and a user journey map. Thus, in the next step, I could propose design ideas that target directly on the problems that I found in the research phase.




    Finding 1

    When a business has multiple offices or works with remote workers, their hours are flexible, work locations are far and wide, and meetings need to be virtual. Collaborating across several time zones is hard


    “ International meetings can be particularly difficult to schedule, especially since different countries perform their seasonal clock adjustments .” 

    Finding 2

    Coordinating a long distance meeting with multiple time zones requires taking the physical setting of each person attending in to consideration


    “It is possible to find an open time slot on everyone’s calendar, but it is hard to estimate where the scattered attendees will be and what time of day inconveniences the least number of people.”





    Archetypes















    Desired Outcomes and Key Features




    Provide a holistic view of meeting schedules for the meeting hosts to reduce miscommunications that are caused by different time zones and locations

    Provide real-time notifications for attendees when receiving meeting invitations, and able them to keep track of accepted meetings and have meeting details on fingertips


    Optimize and simplify meeting scheduling process to provide a hassle-free experience
    Relevant Features
    • Local time converter
    • Relevant information about past, current, and incoming events
    • Quick accesses to adding new locations and creating new events
    Relevant Features
    • Notifications when receiving meeting invitations
    • Immediately respond options
    • Inbox feature that helps to manage received invitations
    Relevant Features
    • Clear steps and interfaces of booking a meeting
    • Alternative ways to edit invitations’ details in the later steps
    • Preview dialogues before sending out invitations to attendees







    Key Screens









    1. View Dashboard


    MURA meeting app provides a quick view of scheduled meetings’ information that includes dates, durations and all attendees’ locations and time zones. Switch between the card view and the list view to see more or less information of each meeting. 






    1. Uses tabs on the top to view past, ongoing and upcoming meetings

    2. Swipes cards to the left or the right to review different meetings’ information

    3. In the global time section, the time indicator shows current local time and corresponding times in other time zones
    4. The List View provides a brief version of meeting schedules. More details are available if the user clicks on the arrows

    5. Adds a new meeting by clicking on the plus button

    6. Uses “Add New Locations” button to add other offices’ locations
    7. Uses the slider to switch between the Card View and the List View

    8. Connects with other tools and platforms in the Media Integrations section
















    2. Review Meeting Details


    Review meeting details by a single click. Look at attendees’ responses, change previous responses or reschedule incoming meetings. 





    9. In the Meeting Details page, the user reviews detailed information of a specific meeting. Swipes to the left or to the right to review previous and next ones

    10. Clicks on the arrow to check out attendees’ responses
    11. Reviews responded statuses (going, declined and pending) of each attendee

    12. Proposes a new meeting time or decline an accepted meeting.

    * Please view the detailed logic diagram here










    3. Book a Meeting


    Book a new meeting and send invitations to attendees through three simple steps. Users can add multiple locations and time zones and use customized notes to provide further details. 









    13. Chooses from pre-setted tags to label the types of meetings or adds new ones. Includes meeting details in the invitation by filling out a short form
    14. Checks out the availability of each potential attendees

    15. The user has the option of including notes along with the meeting invitation. Includes instructions, video call links and other information in the notes section if it is needed
    16. Reviews the meeting details before sending out an invitation
    17. The user reaches a confirmation page and is prompted to schedule another meeting or go back to home page
















    4. Receive New Invitations


    Users receive notifications when being invited to meetings. Respond to meeting invitations right away or use Inbox feature to keep track of them. 






    19. The user receives notifications of new meeting invitations. Responds immediately by clicking on Yes or No, or discards this notification and check it later in the Inbox by clicking on blank space
    20. A reminder that notifies users of new invitations

    21. Checks out the detailed information of the invitation
    22. Reviews the new invitations under the Unread tag

    23. Uses the Yes or No button to respond, or clicks on the arrow to check details











    Cross-device Design & Grid System


    In order to provide consistent experiences for users, I utilized the responsive layouts and the grid system to make the design adaptable to different screens, devices, and orientations.











    0-599 dp
    4 Colums 






    600-839 dp
    8 Colums


    840+ dp
    12 Colums





    Sum-up


    I inherited the secondary research (background information, competitive analysis) from the research team, and then I conducted my research and created the user archetypes that were used to present to the clients and brainstorm for possible features.
    The visual language followed the color palette that I was given by the client. 

    The design style was intently followed Google Material Design Guideline as required by the client.
    At the end of this project, I delivered a set of high-fi prototypes, design guidelines, research artifacts, and a presentation slide deck. 

    However, due to the nature of this freelance work and the tight timeline. I wasn’t able to follow up with the usability testing after I delivered my design. If I had more time, I would like to do another round of iteration based on users’ feedback.

    Sophia Li. 2019