top of page
123132_edited.jpg

Adobe Design Challenge

A 1-week design challenge I took part in as a part of Adobe Design's 2nd round of internship process

Brief

"To review the existing workflow and propose a design concept that relooks at the current Command+N experience for a user who creates a document for the first time in Adobe Illustrator"

Asset 3@2x.png

Approach

The whole project was divided into 3 phases

Phase 1
Research

Phase 2
Ideation

Phase 3
Design

Existing user flow

Journey mapping 

Storyboarding

Redefined problem statement

Requirement definition

Concept generation

Rough sketches

Wire-framing

UI Design

Phase 1
Research

Observing the existing workflow helped me map out the multiple interactions present & the possible ways a new 

user would create a new document.

Since carrying out this task required me to observe every screen very carefully, I took this as an opportunity to observe possible inconsistencies or usability issues that could be present in the UI

Reviewing the existing workflow

Adobe Assignment-04.png

Existing task flow

The current workflow is quite straight forward & a well-presented one. It presents the most appropriate options required by the user to create a document. 

Along my journey of reviewing the flow, I came up with a few suggestions which could

  • help maintain consistency in UI in general

  • ease up the process while making documents related to web or mobile

Key insights from task flow

1. The heading for different units is missing as compared to its neighbouring options

Asset 3@2x.png
Units missing from the new document window while being present in more settings

2. Options like bleed for Mobile and Web (screen focused content) are redundant and settings like grids 
(gutter & column width) can be included to improve workflow speed

Asset 4@2x.png

3. Templates present in New from template provide no information about their use-case 

Asset 5@2x.png
Screenshot of artboards from template “Banners & Presentation”. A text box with the names of the artboards will be helpful (eg banner large)

Okay, so now onto the main task, What does the user journey of a first-time user creating a new document look like?

Since there can be multiple use-cases to this, I focused on the one which best represents the problems of most first time users introduced to Illustrator. 

Remember assignments and competitions where you need to make fancy posters ? That’s our use case. The reason for considering this scenario is,  events and assignments like these in schools & colleges where students are most commonly introduced to design tools. 

The Journey

Scenario

“Vedant’s college is holding its annual college fest and is holding a digital poster competition for the same. Vedant decides to take part in it and extremely excited to see what he can design digitally for the first time”

Persona

daniel-h-tong-jiBds7-nxTc-unsplash.jpg

Vedant, 18

University Student

Vedant is a first year design student who loves doing art & craft. He always carries a sketchbook around with himself, sketching down what inspires him. He isn't hands-on with technology and finds himself to be a slow learner. Attending classes of design tools in college didn't help him cause it was too overwhelming  

Goals

To keep exploring and creating art which satisfies him. He aims to start creating a professional portfolio this year as well

Frustrations

Unfamiliar with design softwares. Takes a lot of time learning softwares and ends up losing motivation in the process. Hesitant to jump ship on digital art

Storyboarding

Asset 2@2x.png

Journey Mapping

Journey map
Journey map of creating a new document by the new user

Key insights from Journey mapping 

1.
The physical world is their reference. 

  • Difficulty in visualising the size of the canvas they will be working on on the screen.

3.
Complex terms like bleed & raster cause unnecessary confusion.

  • First time users are not familiar to Terms like bleed, raster and colour profiles.
     

  • Imagine a first time user making a poster in RGB and printing it out only to notice that the colour are not what he was expecting to be because it was printed in CMYK 

2.
Lack of contextual information about presets slows down the decision-making process.

  • Quantity of presets confuses a new user in deciding which one is appropriate for their use-case.

4.
Digital measurements are not convenient to relate to the real world. 

  • Units like points and picas are difficult to gauge when compared to the physical measurement units such as centi-meter etc.
     

  • It’s much more faster & convenient to gauge the dimension of something in cm’s because of past experience of how we measure things.

The focused design brief

First time user of illustrator can’t visualise their artboard size when coming from the real world to the digital world. The lack of contextual information about presets can lead to confusion in selecting the correct one to use”

Phase 2
Ideate

After gaining all the insights and defining the problem statement, now I went to my sketchbook to start making some rough concepts of what the opportunity areas I had discovered from the Journey map. To get start making the concepts I needed to first translate these opportunity areas into features.

Adobe Assignment2-15.png
Converting opportunity areas into design solutions

Concept generation

Concept : Comparing selected preset to A4/Letter size

ema_1576029724585.jpg

People generally know the size of an A4 sheet, so they can use it as a reference to imagine the scale of their artboard in Illustrator. This helps bridge the gap of not knowing how big or small the canvas actually is.

Phase 3
Design

After all the concept sketches, came the part to bring them to life. The UI was also made into a clickable prototype to give a better idea of how the concept would look like when it would be used by the user. 
(A prototype speaks a thousand words, doesn’t it?)

Asset 2@2x.png

UI for main concept highlighting the preset preview and the sort by feature

UI for the compare feature and it in the expanded view 
(Click the image to enlarge)

sort by the large to small size or vice versa

Feature to sort by the large to small size or vice versa according to the dimension of the artboard

Asset 4@2x.png

Tooltip for options like bleeds, color mode and raster size. Feature contextual tooltips also help first time users also learn more about the  features while setting up a new artboard

Thank you for reading till the end!

Made with ❤️ & ☕️  in Hyderabad, IN

bottom of page