Design Process

A structured design process helps me to take up any sort of problem, make sense of it and come up with solutions. Following is an outline of my design process.

1

Discover

I begin by understanding the following:

  • Your goals: what you want to achieve with your product
  • Your users’ goals: what your users want to achieve with the product
  • Users: Who your users are and how they’d use the product; their age, occupation, personality, characteristics, behavior patterns, etc.
  • Features you want to implement and how they are relevant to the goals
  • Your competitors and how your product is different from theirs
  • Constraints: Technology, deadline, etc.

Ideally your brief would contain most of the above information. Whatever is left out I’ll find out by emailing or talking to you.

I’ll try out your existing product, if you have one, to get a better understanding of the product. I’ll try out your competitors’ products to see where we stand compared to them and how they’ve solved some of our common problems. This is to understand who and what we’re against and use it to position and improve our product.

I’ll go through any information that can help me understand the users, their requirement and their behavior such as, survey results, customer feedback, app/site analytics reports, user testing videos, etc.

2

Define

With the insights I gather in the previous phase I’ll assess how best the features/functionality you’re planning to implement would add to the user experience of the product and help achieve our goals and our users’ goals. I’ll propose my ideas and concerns, if any. After discussion, together we’ll freeze the goals and the features for the project.

Next we’ll define the priorities of user tasks (for apps) and content (for websites):

For apps, I’ll create a use case diagram, a spreadsheet that lists the tasks and the paths a user can take to complete the tasks. We’ll prioritize the use cases into high, medium and low. The goal is to structure the app in such a way that a user can complete the highest priority tasks in minimum number of steps.

For websites I’ll create a rough site map that gives a bird’s eye view of the organization of content.

Use case diagram
3

Design the works

In this phase we’ll nail down the best way to organize information across the screens, within the screen, how to navigate between screens and how the product would respond to user actions.

I’ll begin by sketching the pages. I’ll explore a lot of possible ideas for layout, navigation and interaction. Then I’ll go through them with a critical eye to weigh them against our requirement, platform-specific design guidelines, established design patterns, basic design principles and our constraints to decide on the best.

Then I’ll create wireframes and send them to you. The wireframes will also contain notes on interaction and any other minutiae that should reach you and the developers. Usually I don’t communicate via sketches but if you’re hard-pressed for time I may send the sketches instead of wireframes.

Sketches
Wireframes

If the app is simple I’ll create a wireflow that shows the navigation between screens—where a link leads to, what happens when you click a button, etc.

If the app is complex it might be difficult to understand the flow using the wireframes alone. So, I’ll create a clickable prototype using the wireframes so that we can be sure that the app works the way we want. If you have access to users you can also show the prototypes to users and test the design.

Wireflow
4

Design the looks

Once we’re satisfied with the way the product would work, we’ll have to establish a visual style that is appropriate for the app and its users, and also agreeable to you. To get a feel for your preferred visual style I’d ask you to send me samples of designs that you like. Then I’ll flesh out the visuals of one or more key pages/screens using appropriate colors, typography, and icons. Once we agree on a visual style I’ll design the remaining screens in the same visual style.

5

Delivery

Once you’re happy with the design I’ll send you the final deliverables and communicate the design decisions in such a way that your development team can understand and implement. The final deliverables usually are:

Brand identity

  • Logo (in EPS, PDF/PNG/SVG formats)
  • Brand guidelines (in PDF format)

Mobile app and website

  • Wireframes (in PDF format)
  • Page/screen mockups (in Affinity Designer's .afdesign format and if you really need, in semi-editable PSD format).
  • Image/icon assets (in PNG/SVG format).
  • Style guide that specifies the dimensions, colors and typography (in PDF format).
  • HTML and CSS of the website/page/component.
6

Build and iterate

Once your development team has built the product I’ll do a test run and check if the design has come up as we envisioned. I’ll write down the discrepancies, annotate them in screenshots of the built UI and send it to your team for revision. After this round of feedback you can hire me at an extra cost for feedback on further builds and for further design revisions.

Note

Responsive web design: Creating wireframes or mockups for all of the pages for more than one device size is unwieldy, time consuming and tiring. So, I’d prefer to do responsive design in code after the first build. In case this is not feasible, I’ll pick one phone size and one tablet size and create wireframes (usually only wireframes; no visuals mockups) for a few key pages alone.

To better communicate the nuances of the design and to make the overall design–build process faster I may create some pages or parts of pages in HTML and CSS rather than in a design software such as Photoshop. This is completely at my discretion. In such cases I may create rough visual mockups to give an idea of the look and feel and I’d provide the HTML and CSS code but not the PSD files

The entire design process would vary between projects. Which stages I do and to what extent depends on the complexity of the project, the deadline and the budget. I try my best to do whatever is necessary to best communicate the design to you and your developers and see that it is implemented properly.

Brand identity design process

1
Research

A complete understanding of your product/company for which you require the brand identity is the critical starting point of the design process. I’ll send you a questionnaire to understand about your company, your goals, your target users, how you want to appear to them, what sort of feeling you want to evoke in them, your competitors, etc.

I’ll research your competitors' branding and other branding in your target market to see how we can create a different and emphatical brand identity.

2
Brainstorming

I’ll create a mind map using your product/company name and words that describe its main characteristics. From there I’ll branch out to associated words and form an 'idea cloud.' From this cloud I’ll look for ideas that could be represented visually and brainstorm more on them.

3
Sketching

After choosing the interesting and stronger ideas from the previous stage I’ll start sketching concepts for the logo/identity I’ll sketch them on paper. Sketching reveals stronger concepts and encourages further exploration.

4
Rendering

I’ll render the stronger concepts of the logo in Photoshop and share it with you. At this stage I usually create the concepts only in black and white or greyscale so that we won’t be distracted by color when selecting the concept.

5
Refining

Once you select a concept I’ll try to come up with more variations on it and present it to you. By this time I’d also introduce color and present some variations on it. Once you select the final design I’ll refine it if required.

6
Designing collaterals

Once we finalize the brand identity I’ll design the collaterals that you need, such as, business card, letterhead, favicon, etc.

Got something to discuss?

Contact me