Design Collaboration App
Company: Sony PlayStation • Project Length: 1 month • Role: Lead UX Designer
As part of the Design Systems team, I worked on an application which supports the product development process at PlayStation. The users of the application were employees at PlayStation, and the purpose of the application was to aid collaboration between cross-functional teams such as Design, Engineering and QA teams mainly in Japan and the US.
Project Outcome
Successfully delivered designs while thinking of short term and long term product life cycle as well as using a user-centered design approach.
Design Problems
I was tasked to come up with designs for the first-time user onboarding and designs to inform users about new features due to the following three reasons.
1. Lack of awareness about new features
Using the agile development process, my team released numbers of new features every two weeks. However, the users often made feature requests that had already existed in the application. Furthermore, a large number of users did not know one particular feature even six months after the release.
2. The existing user onboarding was time intensive, ineffective and not scalable
There were mainly two user onboarding happening for the application. First, my Product Mangers invited new users and conducted one-hour long monthly new users training class. Second, within the application, the user onboarding little existed. Below is a screenshot of the homepage which the first-time user saw and taken before my design. Although there were some elements that the first-time users would appreciate, much of the onboarding was left to the users. Especially the application is specific to PlayStation, it made me feel uneasy to leave to the users to learn everything on their own because there was some strict rules that the users needed to follow when using the application. Additionally, the welcome page lacks guidance on what the user could do next. With this kind of little user onboarding, it costed my teams’ and the users’ productivity and time.
Onboarding user experience prior to my design. It lacks information like the purpose of the application and guidance for what the user can do next. It is also filled with pre-populated data which would be confusing for the first-time users without explanation.
3. My product team was overwhelmed with supporting users
My team especially developers were contacted by the users for questions related to how to use the application. Furthermore, the ease of sending a direct message using Slack had opened up an unwanted personal concierge service which costed the developers’ time and productivity.
User Research
After hearing from my team about the design problems, I wanted to investigate the users’ needs, motivation and behaviors focusing on the three design problems. I conducted five user interviews targeting users who had joined the company within the past 6 months. From the interviews, these were the trends that surfaced.
Most participants did not understand the purpose of the application when looking at it
Most participants did not learn about the application on their own by reading the user guide
No participant had read emails about new feature releases
Some participants had to wait for two to three weeks before they gained access to this application which was affecting their productivity
In addition to that, there were a couple of more findings that were worth communicating to my team. First, a participant needed help on a task because the application had usability issues related to discoverability. The participant did not know where to get help so reached out for a help by direct messaging the developer on my team. Second, there was a negative emotional reaction associated with the existing onboarding experience. One participant expressed frustration and resentment towards the company — “I didn’t expect this kind of onboarding from a multinational corporation.”
By interviewing actual users, I could connect dots between design problems and user behaviors. For example, one of the reasons why our users have lack of awareness about new features was because announcing via email was not an effective communication channel. Also, it became clear to me that there was an urgency for placing a better user onboarding and a better way to inform new features.
Project Goals and Design Constraints
Before diving into creating solutions, I wrote down goals for this project and shared with my team in order for us to be aligned with the project goals. The goals were:
Increase user awareness and adoption for new features
Onboard new users effectively and efficiently
Improve usability and make product help more accessible
Also, additional points which were important for my team:
Deliver short term solutions that were quick to implement, measure success and iterate on the design
Design reusable components to account for the product’s future
Use UI components that are available on the application today
Whiteboarding Session
Next, I facilitated a white boarding session with my team while drawing the user journey map and mind maps. The purpose of this session was to share the user research findings and brainstorm high-level design ideas. During this time, we came up with some ideas to implement on the application as well as change management oriented ideas which involve our upper-management stakeholders.
I quickly drew the user journey map and the mind map so that I could better facilitate the whiteboarding session in order to share my knowledge of user research and potential opportunities that my team could help. It led to a successful discussion yielding design ideas and change management plans of involving management teams.
User Stories
I put together user stories so that I could help get my development team ready for the next sprint as well as keep my design and product teams in sync for what we want to deliver to the users. Below are the user stories.
As a user, I need to know about new features and workflow changes so that I can minimize my learning curve
As a new user, I need to know how to perform my main tasks so that I can correctly follow the product development process at PlayStation
As a user, I need access to the information about the application so that I can learn and trouble shoot on my own
Finding Inspirations
I looked around the web for some inspirations, and I identified a few common design patterns in the market. I often do this kind of research as it helps with what our users today expect from a well designed application. I looked at the wide range of user onboarding strategies in mobile apps, gaming industry and enterprise applications.
I documented design patterns found around the web to gather some inspirations and reference them later.
Ideation Phase
After the research, the direction I wanted to take became clear. I decided to create an experience that personalizes the onboarding experience, provides contextual instructions and maximizes the empty (the beginning) screen. Also, I was interested in interjecting elements to trigger positive emotion to encourage our users with learning and interacting on the application.
I sketched out a few different ideas while keeping in mind known design constrains such as I should reuse existing UI components as much as possible and create reusable UI component. I also prioritized which solutions we should implement first and which ones we should implement later.
One of my sketches. I focused on creating as many ideas as possible.
Constrains on Personalized Onboarding
At this point, I had questions in mind whether we could create a personalized user onboarding experience. During my research phase, I found the design pattern popular in applications like Pinterest, QuickBooks and InVision. They collect information on the first-time user on the first screen while ask questions like “What is your role?” or “Why are you here?” I wanted to recommend the same design pattern and ask our first-time users about their roles (e.g. a designer, a developer) in order to customize their user onboarding. This idea was especially an ideal approach because each role got different main tasks to perform at PlayStation. For example, a user with designer role will be uploading a design document on the application. On the other hand, developer role and product manager role will be reading the uploaded design document and hardly ever upload any kind of document on their own.
Instead of asking our users to collect information about our user role, I thought it will be more efficient to automate the data collection. Initially, the automation seemed to be easy since our users’ manager needed to fill in a request form for accessing the application to be authorized for the users. Thus, I thought the data about user roles will be readily available in the system for us to tap into. So my proposal was to have the system check about the user role when the first-time user activates the application (indicated in the conditional branch or the triangle #2 in the user flow diagram below).
However, my product team told me that we cannot implement the logic in the upcoming sprints, thus this ideas had to be on hold.
Design Iterations
My next phase in my design process was to start creating low-fidelity wireframes. As I got feedback from my team, I made a few iterations. Below is an example of how my wireframes evolved from low to high-fidelity wireframes with design iterations.
This demonstrates how the welcome modal dialogue design has evolved. I focus on speed for low-fidelity screens in order to get my team’s feedback quickly. For high-fidelity screens, I pay attention to details and make them pixel perfect.
Final Solutions
A lot of my decision making was based on design constrains because of that, I mainly used existing UI components.
While coming up with solutions, I also thought about each UI components’ shortcomings. For example, people tend to ignore pop-ups no matter how well we design because they are hurry to complete their tasks. To account for that, I designed an additional logic to make a modal dialogue more persistent which is for announcing complex or important new features. Additionally, I designed a new permanent area in our application that our users can go there to read about the new features on their own time.
By thinking of the user journey map, I thought of opportunities outside of the application as well and discussed with my team and explained that I needed other team members and our upper-managements’ help in order to more holistically support our users’ success in using our application. As a result, a Product Manager came up with more user-friendly and scannable news letter about new features.
Because I was able to come up with the wide range of solutions, it was also important for me to label each solution to short-term or long-term solutions to help my Product Managers and Developers prepare for immediate upcoming sprints.
Below are the final solutions I delivered to my team.
User onboarding
I designed for the first-time users to feel welcome and supported when getting familiarized with the application. This flow is designed to give a gradual introduction to the application. The flow moves from telling the purpose and the value of the application at the high-level to an overview of UI, and it ends in the homepage where additional learning materials are available.
announcing new features
This design is for when users log in for the first time after new features were implemented to the application. My design included two types of design patterns, Focused Tip and Modal Dialogue.
Focused Tip — It is light-weight and contextual which helps our users to focus and glance quickly about an announcement of a new feature.
Examples of the focused tip design pattern.
Modal Dialogue — This design pattern is used for announcing more complex new features and features which may affect users’ current work flow. To help the users understand easily, I recommended to include an image or animated gif of the new feature. Also I recommended to use progressive disclosure so that we give a nice short summary of what the new feature is about up front but also provide a hyperlink, which takes our users to another webpage for additional information which aims to help reduce complexity and learning curve. Also, in order to increase the chance of being seen, I designed this modal dialogue to be persistent and will appear every time the user launches the application until the user explicitly clicks on “Do Not Show Me Again” button.
An example of the modal dialogue design pattern.
What’s New Section
This design uses a drawer UI component to provide new feature announcements in a permanent format. I designed this while considering scannability for the layout on the drawer and progressive disclosure on each list to reduce complexity. This design will be helpful especially when the users mistakenly closed out modals or focused tool-tips without reading the content or needed a refresher on a new feature because being so new, it may have not been integrated in the users’ work flow yet.
Clickable Tutorials
This design is to help our user get familiar with new features which have steep learning curves (e.g. features involve many steps). This will be a better experience for users to learn how to do a task on the application because it is contextual and using the concept of learning by doing.
User Guide
Because our application was vital in our product development at PlayStation, many of features and processes were specific to the company. Hence the team already had a support documentation hosted on Confluence which was called User Guide. In order to support my other designs, improving the User Guide was a must because of a couple of reasons. First, I use progressive disclosure in other designs to surface the most important information to our users and give a hyperlink or action buttons which takes them to one of a page on User Guides for showing more details. Second, for infrequent users, having one place to get a refresher about the application would be efficient use of their time and efforts.
This is one of the main pages of the user guide before starting of my project.
However, there were some problems with the existing User Guide. Navigability was one of the top usability flaws. Due to lack of information hierarchy and how it was embedded in Confluence. If users had a specific topic in mind, it was nearly impossible to find what they were looking for without clicking around and scrolling down for a long time. It also contained unnecessary technical terms which increased users cognitive load.
My initial proposal was to create a new website with better information architecture and migrate the contents, but it was not plausible as our development resources did not have the bandwidth, so I provided advice to maximize what we have on Confluence as a short-term solution.
I recommended my team to think about our user journey and organize the content based on our users’ needs. Specifically, I recommended the followings.
1. Create an overview area which quickly summarize our application’s purpose
2. Create task based how-tos for each user role with a short video, gifs, images or a step-by-step guide
3. Create areas for FAQs and Troubleshooting where users can look up common issues and workarounds
4. Create an area where our users can read about our recent feature releases and bug fixes
Additionally, I asked my team for help in creating a better process for releasing new features and manage the user guide since my design solutions require seamless coordination between Product, Design, Development and Project Management in order to implement.
Below is the final deliverables in a quick gif.
