CookUp!
User-centered Design @ Philips lighting
Improving efficiency for users & management.
Project 01: Cloud Management Web Tool
Designed a goal-oriented interface to save reading time for
both scientists and project managers.
UI/UX Design, Web Design
I Co-oped at Philips Lighting as a UI/UX and Visualization Designer during the spring of 2018 in Burlington, MA. During this project, I collaborated with senior UX designer Laura Cunningham,
project manager Deepali Khushraj on a Cloud Management Web to improve the user experience for both scientists and project managers. The followings are part of my design process. I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Philips Lighting.
DURATION
Feb 2018- Apr 2018
TEAM
Laura Cunningham
Deepali Khushraj
MY ROLES
UX Designer
Visual Designer
PRACTICES
Interview
Rapid-Prototyping
User Testing
Iteration
Philips Design Guideline
TOOLS
Sketch
InVision
Pens / Paper
- USER REQUIREMENTS -
Different Requirements from Two User Types
The Cloud Management Tool has two main purposes: to show data ingestion into the platform for data scientists and to show cost incurred by the platform account for project managers.
For both of them, a quick "health check" is important.
Project Managers:
"Need to ensure that budget is not exceeded."
"Budget distribution needs be viewed through time."
"Warning, comparison, and forecast needed."
Engineers and Data Scientists:
"Important to know ingested size, source types, volume, etc."
"Need regular cadence or real-time view for data ingestion."
"If error, needs to identify where and why."
- understand the problem -
Wide range of tools
IoT teams use a wide range of tools, so they have different analysis formats.
Various dataset types
Datasets have different units, so they could be visualized in various chart types.
Readability for managers
Datasets need to be read-friendly for non-data background managers.
Tiny errors
Errors or changes of data ingestion are always too small to be noticed.
- APPROACH -
Provide a unified and simplified chart to illustrate trends for all datasets.
Provide readability for all users, while ensuring the reliability of the data.
Allow sufficient quick glance at datasets and then find out problems.
- iteration PROCESS -
- Design solution 01 -
The Solution for Project Managers
- Design solution 02 -
The solution for Engineers and Data Scientists
4
Only shows the bold info and trends
that scientists care about.
Clicking the card will take users directly
to the relevant analytics sections.
3
The clickable info cards fill the available width, significantly increasing tap/click targets.
1
A light sidebar brings
focus to the content of the
dashboard, and the
active page is easily visible.
2
Use color code to allow a
quick glance on the overall
"health condition"
The color codes are also used on the dots, numbers that show the problematic area.
1
Hovering on a specific month bar could
let managers get an advanced review of
each pipelines' cost on that month.
2
Gray bar charts show the forecast
of future budgets of the rest months.
3
The info-box also shows as a legend.
Adding shadow when hovering on a specific
content indicates that it is a clickable bottom.
4
Only shows the bold info that managers
care about. Use red color code as a warning.
5
When clicking on a specific
content, the bar chart shows its
budget changes over months.
Project 02: Content Management Tool
A web tool designed for management of
scheduling and monitoring complex lighting contents.
UI/UX, Mobile and Responsive Web Design
During this project, I collaborated with senior UX designer Jessica Robison, project manager Subu Ramasamy on a Content Management Tool. I was mainly responsible for designing a schedule monitoring system to improve the user experience for managing complex contents.
- i'm so grateful -
It is a tool for Philips lighting internal customer use, so I have omitted and obfuscated confidential information in this case study. But I'd like to say I was so happy to take part in an Agile process and iterated on design based on user feedback from weekly meetings. And I was so grateful that I had been trusted to deliver my design handoff document on Jira for development.
The handoff document includes UI pattern libraries, composition and layout, and interaction guidelines. The final delivery on Jira includes documents, Sketch file, and interactive prototype on InVision.
- 😁Testimonials😁 -
Head of Design & User Experience | Americas at Philips Lighting
"Muling was with the team for a period of 6 months, enough time to appreciate her talent and dedication. covered areas of UX/UI and data visualization, a good thinker and tactical designer, with process and multiple tools at her disposal. She thrived with guidance and support, and exercised a good amount of autonomy, dealing directly with our internal customers, engaging and delivering with a high level of quality. I see a bright future for Muling, you'd be wise to check her out!"
Senior User Experience Designer at Philips Lighting
"Muling has a wonderful talent for working openly and collaboratively with others. She is able to pick up new tasks and subject matter quickly and has a strong set of technical skills to draw from. Muling was able to provide UI designs for in-progress applications as well as work in a less defined idea-generation exercise concerning data visualization – both of which yielded excellent results. I highly recommend Muling. She hit the ground running and soon became a major contributor to our UX design group during her co-op at Philips Lighting."