​
︎

Jade Milan  

Interactive Designer, Art Director + Artist

Work      About    Research
J&J Medical Devices Companies is a platform designed to support and connect with all of J&J’s medical device franchises and their users. It is to combine all individual brand websites into one cohesive system. The project consists of three teams the Platform, Health Care Professionals, and a Patients team to support specified content and user's needs.
As a lead designer on the project, I had the opportunity to work on the HCP team and the platform team. I focused on system development of the user experience for our front-end and back-end users, future enhanced capabilities, and individually highlighting the identity of a brand and its needs within one holistic system.
ROLE
UX/ INteraction Design Lead

COMPANY
Johnson & Johnson


Process


Teams work within an agile system of two-week sprints, to prioritize and achieve oriented tasks for teams and collaborative goals and solutions.

To help organize and support teams in documenting and communicating the stage a task, we use Jira and Confluence. To track each phase in identifying and analyze concepts, identify problems, create future enhancements, or in development.




Deliverables


  • UX Research
  • UX Design + Audits
  • Competitive Analysis
  • User Flows
  • Wireframes
  • Content Strategy
  • Design System
  • Protoypes
  • UI Design
  • Design QA


Identify and Analyze

Concepts, Problems and Enhancements


Determining what design task to prioritize within each sprint is dependent on what requirements for a new feature or enhancements is most important to have on our platform. By analyzing each franchise's needs, the design and user experience would be determined by the best solution that's most beneficial for the user and supports content needs to pass SEO requirements.

I would create prototypes to test my investigation and receive feedback from our users. Also, provide visual context for franchises and the development team regarding how the user experience would interact with a new feature. Along with examples of different sites for teams and franchises visually understand similar concepts and trends of interactions and relatable user experiences that could be adapted to our platform.


Building out the UI Kit


I was also responsible for was to build out the design system in a documented UI Kit that supports our style guide, component libraries, and page templates that will work for the various content need for each business unit and users coming to the site. Along with the UI Kit, I also would work through the user experience needs based on specific country and business level requirements on how various audiences would understand how to interact, explore content, and engage with a site.

Key Design Principles


  • Follow brand guidelines for visual design
  • Extend brand guidelines for digital design
  • Strong usage of typography and images
  • Employ layout and responsive design
  • Consistency with UI elements: Atoms: Molecules, and Components

For the UI Kit we created a standard visual design for each element to follow J&J Brand guidelines, but to be flixable to for other franhcises to customize elements with their own brand colors, and element styles.

Typography


The typographic scale is a harmonious scale that allows an ordered set of character sizes linked to each other by a common ratio. It makes the user to understand the heirchary of the page and the type sizes have the flixibity change scale between break points, then to have to define type sizes for each screen sizes.

Navigation


The global navigation menu functions as a masthead for J&J digital sites. The red logo against the white background ties our sites together visually, while the links helps the user understand the content of the site. There should be indicators for the user to let them know where they navigated to.

As the site has been evolving, one goal was to strategy the best solution to allow the user to navigate and search for particular content within different franchises. The secondary navigation menu is a sub-menu to focus on a microsite or business unit of a distinct franchise, to allow users to search for particular products and information that is geared towards their surgery profession.

A secondary nav menu also brings flexibility in addressing the accessibility needs of various audiences from different countries and what best practices to understand how users interpret content.


Components


Components library are a variety set of blocks created using elements and patterns within our design system. The components are to support the flexibility to build page layouts and be a unified system for the different content from our franchises.

Page Templates


Pages Templates are pre-built pages using existing components within our system to create custom layouts for franchises to upload common content categories. It also allows users to understand and identify pages of similar content as they navigate through the site. Such as Product Detail Pages, Specialties pages, Overview pages, and many other page layouts that use specific components and features for the particular user and content needs.



Additionally, I had the opportunity to work closely with the Japan team to define the user experience and how our JJMD design system can follow accessibility needs for their users. As this was a challenge in making sure our system can be adaptable for their users. As I worked with the team and researched how the Japanese language is read, it informed me how the user understands visual cues and hierarchy. I created new modules, which the user can understand the behavior of each module to be able to analyze the content as they are guided through each page. The new modules also can be adjusted and flexible to follow our standard grid and designs if other sites have similar needs.

Final Step: Testing and Review


Once design discovery, prototyping, and receiving approval from POs, and Franchises. The design solution then goes through the development stage to be developed for the actual site, but before going live on the site, our team goes through a process of UAT and design QA to make sure it follows the final design requirements and user experience. Often goes accompanied by visual markups and critiques before final approval.

OVERVIEW


Continuously people encounter and spontaneously hearing new music or podcasts in passing during their day to day life. As they come to discover new tunes that they are interested to know more about what is playing or information about the artist, or just want to save it to listen to it for later. Audio Discovery is a feature designed to allow users to discover, search, and play any song or podcast to help users to recognize what is playing within their surroundings. Through the use of sound recognition to help users search results within Spotify's collective library. The audio discovery feature allows you to view a preview of your findings, view lyrics, get to know more about the artists, and save and share songs to your playlists within the Spotify app.
Role
Product Lead
UX/UI
Design Research


Research

I was curious about why Spotify didn’t have a feature that helps users find out the details of what is currently playing in real time within their environment and if I was the only person who would want some sort of feature like this built within the app.To get contexts of what kind of features users would want to have developed within the main application to store and listen to music and podcast.

Spotify Community Findings:


At the beginning of my search, my first steps brought be to explore what users posted through Spotify’s community board on what kinds of requests and feedback that they had on the app. I did come across a handle full of comments interested in having a sound recognition tool within the app as it would be helpful for them in various scenarios.

Competitive Analysis


I analyzed what Spotify’s main competitors are currently doing using sound recognition tools and get a better understand what is successful and unsuccessful on their apps in terms of search for a song and connecting them to user’s music libraries.

User Research + Interviews:


I have asked user’s who use Spotify and existing apps to get to know more about how they decide what techniques or steps to search for new music or podcasts that is playing within their surroundings.

Some questions I was interested in asking:
  1. If you hear a song or artists playing within your environment in live time and you don’t know who it is. How do you go about searching for the artists or title of the song?
  2. If you use a particular app, why do you use this app versus other similar apps that currently exist?
  3. Are you able to save the search result through the app or do you save it elsewhere? If so, where do you save it and how?
  4. Are there any particular features that you like within the app you use?
  5. Does your app connect easily to where you mainly store your music library or the streaming service that you use?

User Persona


From the information, I gathered from user's I created user personas that would help me achieve the right user experience and design to implement this audio recognition tool within the Spotify app.



Ideation


After analyzing my data and research, I began to strategize the best solutions for how users would access a sound recognition tool within the Spotify mobile app. As well has taken in the kinds of feedback that users enjoyed with other competitors.

My main goal was to make the users would have a simple experience, to be able to quickly capture a song or podcast if they are only able to hear part of what is playing. By creating a site map and user flows based on scenarios. I was able to define the organization, hierarchy, and general flow of the product. To visually propose the necessary features to include in the structure of the mobile app.


Spotify Site Map


User Flows and Scenarios

Wireframes


Next, I create wireframes to visualize the possible user flow I have mapped out. Mocking up sketches allowed me to brainstorm how user-friendly the new features could be integrated within the design. Additionally, this helped me visualize new CTAs or other elements that could be designed to incorporate into Spotify's design systems to highlight the sound recognition tool.



Mockup


Next, I designed high-fidelity mockups of the Spotify app with the new feature. I wanted to map out the visual interface to be able to test the effectiveness of the visual hierarchy and flow of using the new feature.

I explored two different ways to bring a visual components to the layout of the feed, while maximizing the amount of details included. Each way visually emphasized different aspects of the experience:

Focus A: I have incorporated the new feature to be located within multiple areas of the app. To have easy access to allow the user to tap and quickly start their search. 



Focus B: As the recognition tool becomes activated to calculate its results, it then highlighting the title and artist. Once finished, the user will land the detail page for more information based on their findings.



Focus C: Create an automated playlist and recommendations based on a user's sound captures history. Also, add a feature to archive a song from their list. By implementing this feature, users can still view their full history and create a better experience to view actual future recommendations that applies to them.



Reflection


Spotify is a major media resource for users to store, listen, and discover music and podcasts. After conducting my research and user testing it would be beneficial for Spotify to have an audio capture feature within the app that allows users to have a deeper relationship with the product that they enjoy and utilize their time. As users currently use other apps to figure out what is playing, they tend to overlook to add their discoveries to a music library or playlists. Having this feature within the app will inform the user they can add or listen to the full track within one platform and brings curiosity to other content that the user might not know exists within Spotify.

Next Steps, I would want to work with other designers, researchers, and engineers to develop and integrate this feature within the mobile app. I would want to explore other new opportunities to push the experience of using a recognition tool to how much and how clear the tool can determine a sound. To see if users can hum, sing, or use other forms of voice tones to see how we can help people discover different kinds of content.

Continually innovating Spotify’s app will help a deeper connection with our users and build a trustworthy platform for how artists can connect with their audiences.
What would a smart device experience be like in a hotel or communal living space? 

A virtual concierge service allowing guests to connect with hospitality owners and employees during their stay with various features and tools to enhance their experience within a smart device system. It is designed to be a simple and intuitive experience within the hospitality world, by creating a meaningful connection for guests and enhance new opportunities for employees. This digital experience connects the whole journey of checking-in/out and having access to services and resources provided to explore new spaces during their stay.
Role
Product Lead + Designer
UX/UI
Design Research
Branding & Identity


TOOLS
Adobe XD, Indesign, Illustrator, Photoshop

Categories
Ui/ Visual
Typography
Branding & IdentitY



CONCEPT MISSION STATEMENT
To build an experience that is shared by interchangeable users to interact with the services and resources provided during their stay.

WHO:  Digital Smart Design + Lodging Facilities
WHAT:  Simple and Easy access to information and services
WHY:  To Seek, Enhance, and Embrace
WHERE:  Lodging Establishments, Paid Living Quarters, Communal Travelers Space

PERSONAL RESEARCH
Through this research, I was investigating the needs that both Employees and guests in comparison to the way people live with smart home devices. To think about how we can incorporate the way people are living in smart homes with sharing these devices with more with one user. 

RESEARCH AND SURVEY
Asked an audience to fill a survey and reflect on their interaction within the hospitality world; interacting in a temporarily "home".



EXAMPLE OF HOTELS MISSION STATEMENTS
Hilton– “To be the most hospitable company in the world– by creating heartfelt experiences for Guests, meaningful opportunities for Team Members, high value for Owners and a positive impact in our Communities.”
Ace Hotel– “Ace Hotel is a collection of individuals, multiple and inclusive, seeking to embrace the cities we’re in by building spaces for collective gathering. Whether thoughtfully reinterpreting historic buildings or imagining radical new structures, our aim is always to make something energized, human and useful.”

Airbnb– “Airbnb's mission is to help create a world where you can belong anywhere and where people can live in a place, instead of just traveling to it.”




INTERACTIVE USABILITY SENSES
The device allows the user to use voice, touch, and visual recognition to help communicate, translate and understand different forms of language in support to
make a fluid experience.

Research – Visual Interface Alexa Undersanding Sign language:
https://www.theverge.com/2018/7/24/17606614/amazon-alexa-echo-mod-sign-language-gestures-ai

Visual recognition

voice recognition

Chatbot–Messaging



USER FLOWS AND SCENARIOS

USER JOURNEY
WIREFRAME SKETCHES
 
INFORMATION ARCHITECTURE
WIREFRAMES
VISUAL IDENTITY

WELCOME DESCRIPTION FOR NEW USERS


The app allows you to control and access your assigned Smart Room by connecting the app to your phone and the device in the room. You will be able to view, add and send a request through the app to the hotel and explore local activities during your stay.






The app collects data information of your previous stays in allowing future use of the app at different locations to help you and their employees to understand your interests giving options and enhance new experiences.

My Health Portal is designed to simplify communicating between physicians and patients in exchanging information seamlessly. This platform is to help improve the overall quality of care and allow patients to have access to personal medical records and use various self-service features. This was a design challenge to improve the visual interface and the overall user experience that can be adapted for the web and mobile application. This digital service is intended for the user to have clear and trustworthy experience in knowing and controlling their health information.

ROLE
UX/UI Design

TOOLS
Adobe Illustrator,
Photoshop,
InVision

DURATION
2 WEEKS


USER RESEARCH
I asked users questions if they have or use a health portal to connect with their doctors other than during a physical encounter during an appointment. What other reasons they use their portal and how they receive their personal medical information.

I presented this image of a wellness result to users without explaining the meaning of the content. After allowing them to look at the image I asked: What they understand from the image shown. What hierarchy does the visual data inform them?



PROBLEMS
1. I asked users what are the reasons why they use their existing health portal and how do they connect with their physicians about questions or setting up an appointment. When trying to book an appointment through the portal the user is brought to the main website to complete the task and making them log back into their portal system.

2. Patients who don’t receive verbal communication through a phone call or email about their medical results after their appointment, but have access to view it through the app can’t understand or read the data that the is being displayed.

USER PERSONA
From the data, I gather I created a user persona that would help me achieve the right style and design for the app. The persona is based on users that visit the site who have physicians through the same Medical Group and can share her medical history through one system.

“Picking a foot or primary care doctor before setting up an appointment, I would want to a small bio about themselves and as well as their specialties”

NAME: Amanda
Age: 29
Location: New York, NY

Doesn’t always have time research new doctors through another web browser. Also, have to search for their doctor through a list of other doctors and that might not available under her insurance. Or after a normal check might forget to call or not been contacted by a doctor about your medical results.
WANT & NEED
Sometimes she is too busy or unable to reach her physician during office hours, but instead of having to call the doctor’s office and leaving a message or having to call repeatedly. Would like to have access to her medical records during any time and being able to contact her physician for a prescription refill or being able to ask for advice before making an appointment.
ANALYZING RESULTS
Booking and knowing about Upcoming Appointments: I have to call my doctor’s office to book or go through a different online platform to book an appointment. A front desk receptionist normally calls 24hrs in advance to inform me about an upcoming appointment.

Reason for seeing a physician: To see my primary physician to have my annual physical. Normally I have to my doctor call me or not hearing anything at all about my lab results after attending my appointment.

DESIGN GOALS
  1. To simplify and easy access to information

  2. To minimize the number of inputs in achieving a task

  3. To create empathy and impacting user’s needs

USER FLOW

WIREFRAMES


A/B TESTING
During my design process, I did A/B Testing for the pages to see what would be most effective for reading and understanding your medical results. Also gaining insight on what the user prefers on the amount of information and steps of scheduling their next appointment.



VIEWING YOUR MEDICAL RESULTS
The solution to designing a successful user experience is to provide enough content that the user would be able to read and understand in supporting the data visualizations of information. Designing a few different versions of the graph to help represent the data in a minimal, but convey enough explanation without it being to compact with additional information. Creating a bar graph that indicates the most current result and providing colors to indicate a metric to help lead the eye in understanding the range of the reading level.



SCHEDULING A NEW APPOINTMENT
Users can keep track of upcoming on the home page and the appointment page. Creating a simple step by step experience of scheduling their next appointment users would have the ability to view their current physicians on top of the main Appointment History page as a feature, then having to go through a new appointment search.
When creating a new appointment is a simple experience, allowing the user to search based on what information they enter to increase their results. Using scale and color to help differentiate and establish a hierarchy within each page. The user is informed which section of scheduling their next appointment.



PROTOTYPE

I designed the experience to have a simple flow, that the user can click step by step in understanding the data results. To allow them to view their resent result and then expand to a larger graph that represents time relating to all past tests. The line graph is also designed so they can tap onto each main point to read the differentiation of each year. By emphasizing what the user can focus on since their test results might not have a drastic change over time. Sharing this prototype with a user to collect future data of how they can register and information to continue creating responsive designs to other future platforms.
Fashion For Good is an interactive museum that aims to teach visitors about sustainability innovations in the fashion and textiles industry. Visitors receive an RFID–enabled wristband that they create their own experience and interact with various Action stations throughout the space. They have the ability to design their own T-shirt, take a photo at the Good GIF photo booth, or making commitments to participate to change and contribute in having a more personal sustainable lifestyle.
My role was to help visual design experience from digital interactions to visual graphics and materials throughout the museum. My role was to help visual design experience from digital interactions to visual graphics and materials throughout the museum. Prototyped and used motion design to narrate the user experience for the different interactions would be activated within different kiosk stations, the Infinity Mirror, and printed materials. Worked with a diverse team from architects, creative technologists, content developers, art directors, designers, and producers to communicate and deliver the visual design direction within the team and the client.
Role
Visual Experience Designer
Motion Design

Company
Local Projects

Client
Fashion For Good’






Photos courtesy of Local Projects
© Jade Milan 2021