Adobe Photoshop

Case Study • UX + UI Design • Design System

Assignment
Brief

You have the task of improving the experience of Adobe Photoshop for beginners.

Outline the challenges these users face, and how would you solve those issues.

Demonstrate your design process to solve this problem. Provide some ideas and designs (sketches, mockups) to support the ideas.

Suggestions:

  • Try to focus on your design process.
  • Focus on fewer problems to solve but ensure that the solution would have maximum impact.
  • Show some examples with final visual designs.

Project
Overview

Initial Problem

Improve the user experience for beginner (new) users of Adobe Photoshop. Focus on fewer problems to solve but ensure that the solution would have maximum impact.

Final Outcome

I came up with a simpler onboarding experience and a beginner-friendly interface for Photoshop by approaching this problem from three different angles – from that of a teacher, a novice designer and a marketeer.

My roles

Product Designer

UX Researcher

UX Designer

UI Designer

Tools Used

Notion

Qualtrics

Typeform

Adobe XD

Skills Gained

Competitive Analysis

Cognitive Psychology

Design Systems

User Research

UWP Design

popup image

Introduction

Process
Flow

popup image

Describe

Expanded
Brief

An expanded brief is my way of utilising the design thinking principles that I have come to learn and adapt for my practice to scrutinize the project brief that I received from my clients.

Here, I combine all the preliminary information that is available to me to question the origin of the brief that I received.

I try and place the user as the point of focus in the brief. This step is akin to reverse engineering a physical product.

In this scenario, I had the assignment brief given to me by my client, details about the company which he works for and the product that they build.

Current Brief

Improve the experience of Adobe Photoshop for beginners.

The Company

Developed Grip, a design tool intended to be mostly used by marketing staff rather than designers.

They market B2B which is clearly evident from the website well (unable to trial or view the product without direct contact with the company).

The Product

A design tool that utilises prebuilt 3D models to create product mockups and ads. Shares functionalities with Adobe Dimension, Photoshop etc.

It simplifies the creation of marketing materials for a variety of target locations simultaneously by easily managing the assets used.

Expanded Brief

From the information that I have with me, I can postulate that the task given to me is meant to test whether I have the skills to make their product (Grip) to be more user friendly to people like marketing professionals who lack design experience. With this in mind, I develop an expanded brief as follows:

popup image

Describe

User
Levels

Almost all product/service especially cloud-based will have multiple levels of users. For example, a CMS will have a developer, designer and a viewer as the user levels. So, when I design, I try and identify these different user levels for the project at-hand.

From the expanded brief, I can clearly identify these user levels:

  • The beginner here could either be a designer with some level of design experience or a marketing professional with minimum design experience.
  • Considering this is a niche project aimed at large scale businesses with requirements for a huge variety of creatives customised for multiple locations, it is possible for the company to provide either online/at office training to the employees. This brings about the third level of users – the teachers.

Describe

Competitive
Analysis

Over the course of 3 decades, Adobe Photoshop has managed to be the industry standard for graphic editing software without much competition. But, in recent years, since the advent of touch-based devices like smartphones and tablets, things have started to change. So many of the competition have began focusing on creating touch-first image editors that users can access from almost any device.

They are custom made to satisfy the needs of the digital generation and provide single-click editing capabilities which satisfy most users demands. This has resulted in a huge increase in competition for Photoshop in a very short span of time.

Our target users in this study might find it easier to satisfy their design needs through a competitors product than go through the steep learning curve associated with learning to use Photoshop. Here, I haven’t mentioned any negatives of the competitors because the flaws either do not relate to Photoshop, or Photoshop already does these better.

Affinity Photo

Fully customisable KB shortcuts, Real-time preview of adjustments, Saveable undo history, Full mobile app, File save interface.

Pixlr • PicsArt

Online storage linking, Effect presets, Powerful properties panel for each tool.

Canva

Single click effects, Preset document sizes, Searchable elements, Immersive menu structure.

Procreate

Simple and unobtrusive UI, Portability, Colour picking, gestures and swipes, screen drawing.

Photoshop (iPad)

Simpler tools lists, Layer view + Layer panel, Popup tool menu near mouse.

Adobe XD • Figma

Extensions & Plugins, Responsive artboards.

Describe

Product
Reviews

Photoshop is undeniably one of the most famous and influential software products to have ever been developed. When I first used Photoshop there was no question regarding which tool to learn to enter into the world of graphic design. So, after so many years of using Photoshop, when I finally read the reviews of the product for the first time, it became very clear to me the faults that most of us have taken for granted.

The most prominent ones amongst all the reviews that I went through was the absence of support for novices, overwhelming interface and the lack of easy to use effects and presets. All of these clearly were in line with my current study. I also found quite a few suggestions made by users on the review sites that were helpful in developing ideas for this study.

popup image

Describe

Case
Studies

I couldn’t find a proper case study related to Photoshop, so I looked into some of them that were related to its competitors. Most of these case studies – post 2015 – were focused on allowing the users to share the works online or collaborating with other users. While almost all of them praised the simplified layout of the UI, especially of products like Procreate.

This is a clear signifier that Photoshop’s UI can tend to cause cognitive overload on the users.

popup image

Describe

Literature
Review

An inspiring study based on the iconography used in Photoshop by a Dutch researcher was influential in helping me understand the users perspective – especially that of a modern-day designer – upon seeing the product interface for the first time. Tools like the burn tool may be symbolic of yesteryears technology, but its application is far form the actual tool.

This brings to light the issue of cognitive dissonance that is present in the current Photoshop UI

popup image

Describe

YouTube
Tutorials

Almost all people, especially beginners, make use of online tutorials to learn new skills. So, I decided to browse through YouTube to see which were the most commonly addressed issues mentioned in Photoshop tutorials targeted at beginners.

Many of the tutorials used tools and features in photoshop such as filters, masking, clipping mask, pen tool etc. and focused on recreating trending effects, removing backgrounds and objects from images, adjusting colour, contrast etc. of the images. This paints a picture of what features most beginners find useful with the product.

popup image

Describe

Functional
Requirements

When you are working on a product made by a company like Adobe, you have to factor in the design guidelines developed by them to create consistency amongst the products.

So it was vital that I follow, to the best of my abilities, Adobe’s design system, Spectrum  when I was designing my prototype.

popup image

Empathise

Interviews

Since I had prior experience teaching and introducing students without a design background to applications like Photoshop and Illustrator, I used this opportunity to rekindle old relationships with my students and collect their experiences of using Photoshop during their initial stages of learning the application.

I conducted phone interviews with two and managed to chat with a few to understand their experiences and opinions on how to improve Photoshop’s UI and UX to better support beginners.

popup image

Empathise

Questionnaire

I created online surveys that helped me gather in-depth information from all the 3 user levels. There were 2 separate questionnaires – one meant to be answered by both beginner and expert Adobe Photoshop users while another meant to be answered by people who teach Photoshop. This was the biggest source of information for me as I proceeded further.

popup image

Empathise

Survey

I am a member of quite a few Facebook groups related to design and research. So I created a few posts across the groups where I asked the members about the difficulties they had the first time they started using Photoshop.

Some of the posts were very successful even garnering close to 100 comments from the users. These replies were from users across the world composed of people with various levels of experiences.

popup image

Diverge

User
Profiles

During my brief expansion stage, I had identified 3 levels of users, and during my primary research stage I had gotten in touch with various people that belong to these categories. Since I am a firm believer of Designing for one, or as Microsoft puts it, “Solve for one, extend to many”, I always tend to prefer creating user profiles over user personas.

or me, user profiles are pictorial descriptions of actual target users, and I create one user profile for each user level. In this case, the 3 user levels are:

  • User 0: Teacher (Experienced user)
  • User 1: Beginner designer (Target user)
  • User 2: Marketing professional (Related user)
popup image

Diverge

User Journey
Maps

Usually, I create journey maps for all the users, but due to time restrictions for this project, I limited it to just the main user – User 1, the beginner.

popup image

Diverge

Feature
Box

From the secondary research onwards, I note down all the ideas that spring to mind for new features that I feel might be useful for all the different user levels.

The importance of these features is validated by comparing with the user pain points and through co-design with the informant users (source of the user profiles).

popup image

Diverge

Validate
Needs

For the current brief, I had to create a UI that the beginner users will find more easy to get accustomed to. So a few of the ideas from the feature box had to go because they were not directly correlated to updating of the UI but rather based on improving the underlying technology.

After filtering out those needs, I focused on the user needs that might alleviate or remove the user pain points that I found during the User Journey Mapping. It is these tasks that I usually create epics for in the later stage.

Due to time restrictions, I got in touch with the users again to select just one single issue from the list which I could address. It was these ideas that went on to the next stage:

User 0
Teachers

They wanted an easier way to communicate with the students while teaching.

User 1
Beginners

They needed help with deciding which appropriate tool or action that they should take next.

User 2
Marketeers

They needed a much simple interface that gives bare-bones functions related to their day-to-day tasks.

Diverge

Brainstorming

With these ideas as the base, it was time to put the research aside and come up with creative ways to develop the design. I brainstormed a lot of concepts that might help the users.

They vary from the absurd to the obvious and eventually I set down the most possible, and problem-related ideas to be developed into User Epics and further into User Stories

User 0 • Teachers

I had to come up with a way for them to collaborate and share their workspace with the students and vice versa.

Why a collaborative workspace?

Endowment Effect.

If the teachers are able to show the students how they themselves have set up their workspace and are able to give very clear self-explanatory directions on how they navigate through space, then students will take it as an initiative to create a custom workspace of their own.

This can create a feeling within the students where they start to feel like the product is “theirs” now. This is supported by the Endowment Effect which states that you value something more once you feel like you own it in some way.

User 1 • Beginners

I had to design a popup quick actions menu once they have performed an action so it will be easier for them to decide on what to do next.

Why popup actions?

Mental Modal Migration.

Since Photoshop is a pretty innovative product, it is likely that new users would need guidance to understand the new concepts

We will have to help them migrate from their old mental models (e.g. MS Paint) to our new concepts (e.g. layers, masking, blend tools etc.).

User 2 • Marketeers

I had to create a new onboarding experience which will enable them to land onto a much simpler, beginner-level interface that is mainly focused on social media content generation or photo editing whichever is their main reason to use the product.

Why onboarding?

Experience segmentation.

Because prompting users to self segment through one simple question (e.g. choosing their use case) and customizing their onboarding experience can increase their chances of reaching their peak emotional level.

A study conducted by Appcues reported that this improved their users’ activation time by 74%.

Decide

User
Epics

Creating User Epics allows me to get an overview of what I am building for each user level.

popup image

Decide

User
Stories

From the user epics, I create user stories which help me keep track of the things that I have to do.

popup image

Decide

Storyboards

For the onboarding process, I decided to sketch out some storyboards to see if the users would be happy with the process first. Once I validated this, I found it easier to focus on my design.

popup image

Design

Wireframes

For the onboarding process, I decided to sketch out some storyboards to see if the users would be happy with the process first. Once I validated this, I found it easier to focus on my design.

popup image

Design

Mockups

Due to the overwhelming response, I got from all my users, I was able to come up with numerous features that could make Photoshop better. Though the User Stories helped me structure out these needs in a clear way, the nature of the software pushed me to create more stories.

The new features were interlinked in so many ways that as a designer I found it unethical to shy away from not designing them. Thus I ended up designing more than a dozen new features.

User 0
Teachers
  • Collaboration features
  • Inbuilt chats
  • Inbuilt comments
  • New trace actions panel
  • Prominent shortcuts
User 1
Beginners
  • Quick actions
  • Easy access to help & tips
  • More functional properties panel
  • Simplified layers panel
  • Responsive resize
User 2
Marketeers
  • New Onboarding experience
  • Preset document sizes
  • Smart style suggestions
  • Easy export options
  • Shortcut guides

UI Elements
Since Adobe already had a strong design system, I decided to respect their work and made good use of it for creating the mockups.

Find the details here:
spectrum.adobe.com

popup image

Design

New Onboarding
Experience

This allows users to easily understand and navigate the Photoshop UI by providing them with a customised experience.

Design

Preset Document
Sizes

Most beginner designers and marketeers are not aware of the standard image sizes used in the industry. This is to help these people out.

popup image

Design

Simplified
Layers Panel

Removed the clutter from the existing layers panel. Combined some of Adobe XD’s best features with a new intuitive, efficient layout

popup image

Design

Functional
Properties Panel

Using Adobe’s design specs and my research insights, I created a functional properties panel that was easy on the eyes as well.

popup image

Design

Quick
Actions

These are contextual tools that activate when the user selects a particular layer. It aids the user in performing his next action

popup image

Design

Smart
Style Suggestions

These are context-based suggestions generated by Photoshop which helps beginners to come up with new ideas.

popup image

Design

Responsive
Resize

Allows easy resize to multiple sizes without the need for manual intervention. Can be extended to support multiple social media templates

popup image

Design

Easy
Export Options

Now developers and marketeers do not have to be confused regarding which option to use to save their images.

popup image

Design

Easy Access
to Help & Tips

Beginners always need help. So instead of rummaging through a complex UI, we put help right on the front page.

popup image

Design

Collaboration
Features

Now teachers can come to the aid of their students where ever they are. Teams looking to edit the same image? That’s possible too.

popup image

Design

Inbuilt
Chat

Take a class without the need for a third-party application. Bring together your students and teach them by showing how you work

popup image

Design

Inbuilt
Comments

Teams and teachers, now share your suggestions and tips right on the artboard.

popup image

Design

New Trace Actions
Panel

Students and novices can play, pause, fast forward, rewind and even see and direct to each of their teacher’s actions to learn better.

popup image

Design

Prominent
Shortcuts

Almost every user that I surveyed supported the need for beginners to learn shortcuts. This is a way to help with that, through strong visual cues

popup image

Design

Shortcut
Guides

Confused which combination of keys was the shortcut? Now long press on any key and get shortcut suggestions.

popup image

Design

Prototyping

Prototyping was done mainly with the intention to do user tests. It allows me to collect opinions from the users which I can then use to make changes to the design in the next iteration.

Onboarding
Collaborative Teaching

Design

User Testing
& Feedback

Though I mostly perform guerilla tests and often use tools like Maze, in this circumstance I made use of Adobe XD’s in-built user testing and design review functionalities to collect user feedback.

The feedback was really positive. The onboarding process and simplified UI were praised. Further iterations are needed to iron out a few suggestions, but it was clear that I was moving in the right direction.

popup image

Conclusion

Reflection

Deciding on features that just focused on improving the experience for a beginner was a tough task. There was always a tendency to bring in tools and experiences that were more engaging and out-of-the-box. That would have looked good too on a presentation, especially for a job interview.

But sticking to the user research and feedbacks helped me keep control of the task to perform and the features to add. But time shortage was another concern, and I still have a desire to design a few more features, which unfortunately I couldn’t now:

Expanded
tool bar

Currently, the toolbar hides additional tools within each tool. I would create an expanded tool bar (opened using the hamburger icon I have used) that shows clearly the tools and its uses.

Detailed
status bar

Though I have put complex information usually found on the window tab to the status bar on my design, I think it has more potential that that. We could take some tips from MS Office apps and create new ideas.

Easy
search

Though Photoshop currently has a Ctrl+F shortcut for search, it is not as frequently used as it is supposed to be. Spotlight feature in the mac is a very good example for a user friendly and inviting seach function.

Conclusion

Closing
Statement

Though it may have been a coincidence, it was a great feeling to get an opportunity to redesign this great software right when it was turning 30! It was a humbling challenge to rework a product so loved in the industry. But I took this as an opportunity to re-learn an interface that I have gotten quite used to.

Though I know that I could do a bit better if I had more time, I think I have managed to do give this assignment its due respect and have succeeded in creating a compelling submission.

To see designs in full resolution and to watch the prototype videos, click here