Design Learnings

1) Upgrade myself in the latest trend and technology  
2) Learning as my continuous process  
3) Focused on Usability

Flow
• Process Flow
• Mean by Branding
• First thing to start any branding
• Why

Design
• Design has always been at the forefront of global trends, with
products that combined function with creativity. User is in centre of
the entire project in all cyclic design phases of UCD namely User
Research, Design and Evaluation
• Good design is as little design as possible
• We are a multi-disciplined web & digital design agency with a deep
passion for our craft and a sharp eye for detail. Working together
with innovative entrepreneurs and businesses, we take a user-
centered design approach to build scalable and stable product that
make a change in a person’s day-to-day life.
• represent the user in the context of their goals, needs and
experience.

WIREFRAME & DETAIL WIREFRAME WITH ANIMATION

KR – About Me
Exploring on Design Thinking on various products
A UI/UX Designer who understands the principles and methodology of usability and focus on Information Design exploring future
experience and products.
Comes from Art background and HFI Certified professional, I have commenced my profession as an Animator and risen myself as
UI/UX Designer.  
My Role in a Design team starts with Research 
(Understanding the Product or Service and their challenges and emotions) and brings business values and enables profit in business.

KR - Learning's
I Approach my Design with 5 S- Strategy, Scope, Structure Skeleton and Surface.
I love to Design components for mobile and exploring various apps with understanding user needs and believe in understanding user personas
and capture their data and not using our own fantasies.
And following the process of What, When, Where, Why, How and for whom the user following the UCD Methodology and following the
usability principles.
UX Design, User Centred Design, Usability/Web UX, Information Architecture, UI Design, Agile, Mobile UX, wireframing, prototyping,
Axure, Sketch, Omnigraffle.

Duties & Responsibilities:
 
·         As a designer in our Product team you'll be a key part of the idea generation process, & design interactions for applications (web
& mobile), work closely with engineering, product/program management, design team and company leaders to successfully go from
early-stage product concepts to launch.
·         You need to visualize detail level of design concepts from wireframes into creative visual design and prototypes (Lo-fi and hi-fi
prototyping skills)to communicate ideas for navigation and interactions.
·         You’ll be given full ownership of your ideas, and so you’ll be required to create both beautiful mockups/wireframes/prototypes -
and implement them using Twitter Responsive Bootstrap Framework.( HTML5/CSS3/ SASS). You don't need to be an expert, but you
need to be willing and eager to get your hands dirty in the code 
Required Skills & Qualifications: 
·         3 -8 years experience in designing user interfaces for web & Mobile Platforms & responsive Web UI.
·         Bachelor Degree or equivalent professional design experience.
·         We think a formal educational qualification in the design or human-computer interaction field NOT important if you don’t have
it’s not the end of the world. You actions will design will tell the right story.
·         Strong technical knowledge with an understanding of how digital products are built, particularly mobile, eg. Responsive,
Adaptive, Mobile sites.
·         Expertise using workflow and wireframe tools such as Illustrator, OmniGraffle, Fireworks, InDesign or Visio, Photoshop,
Fireworks, illustrator, Keynote, Dreamweaver, Coda, Sublime Text.
·         Proficiency in HTML5, CSS3, and Frameworks like Bootstrap.
·         Understanding of different mobile screen densities such as ldpi, mdpi, hdpi, xhdpi, etc.
·         Strong design and communication skills, with an ability to rationalize and articulate your design thinking.
An avid reader of Smashing magazine, UX Mag, A List Part, UX Booth, etc

Design Principles 
Strategy
Scope
Structure
Skeleton
Surface

Tools to consider: Google, User
Testing, Heatmap.me, ClickTale, Usabilla,Appsee, Flurry
 
https://www.appsee.com/

UCD Process
• Usability testing
• Direct user interviews
• Card sorting
• Creating IA flow diagram
• Creating a user task list

Rule
I don’t care what you create or
how you create it, but it better be high quality.
1) A deliverable which isn’t used to move the project
forward is a waste of time. ”
2) Conversations are better than sketches, sketches are
better than prototype
3) Say less. People can take away (at best) 3 things
from an hour long presentation. Make sure you focus
so that the three things you want to be taken away

Creativity
Sequence of WHY / WHAT
Deciding Icon Sizes
Deciding on Fonts

Goals

Research on the Required Industry
Self Belief
Feeling Deserving
Moving forward confidently
Continuous Learning

Comparisons
 
ADAPTIVE
 
RESPONSIVE
•Mobile Usage
•Different layout for different Devices
•Less Flexible
•New sizes will not work
• Mobile usage
•Always changing
•One layout that always change
•Harder to make
•Works on various Devices
 
NATIVE  
HYBRID
•

Visualizing technique

Relaxed and Free of Distraction
Eyes closed for Maximize effectiveness
Cleared Focus Image of the Result required
Empower with positive emotions
Let go demanding and insisting the visualizing manifest

Designers References /Useful Links 
• http://graphicburger.com/mock-ups/
• http://www.freepik.com/
• http://www.awwwards.com/
• https://www.thebestdesigns.com/
• Subtraction
• https://gomockingbird.com/mockingbird/
• http://mashable.com/2010/07/15/wireframing-tools/

Icon Creation 
• Iconfinder
• CharacterMap

Responsive Websites
http://www.sketchappsources.com/category/mobile.html
http://mattkersley.com/responsive/ 
http://responsivedesignchecker.com/le-fromage.ch/
http://responsivecss.net/
http://quirktools.com/screenfly/
http://lab.csschopper.com/responsive/ 
http://ami.responsivedesign.is/
http://960.gs/

Mobile App
http://www.mobileawesomeness.com/

Mock-up tools
MockApps
Softwares utilities: 
Droiddraw ( Android)
Iplotz(iphone )
OmniGraffle(Mac)
Balsamiq
Justinmind/Axure

Fonts/Colours
• https://typekit.com/fonts
• http://fontdeck.com/
• http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-
contrast.html
• http://www.fontspring.com/
http://snook.ca/technical/colour_contrast/colour.html

Responsive Design
• Design Size: 980X980 targeting 1024X768 which is standard 
10/2 Grid- 12 or 16 Column- Space 20 pixel
• Mobile Sizes: 640 X 1136
Mobile mindset.
- Be focused.
- Be unique.
- Be charming.
- Be considerate.

Responsive Design
• Design Size: 980X980 –canvas size; With targeting 1024X768 which is
standard 
10/2 Grid- 12 or 16 Column- Space 10pixel
• Retina Display;
Mobile mindset.
- Be focused.
- Be unique.
- Be charming.
- Be considerate.http://designinfluences.com/fluid960gs/12/fluid/mootools/
http://webdesign.tutsplus.com/articles/using-the-960-grid-system-as-a-design-framework--webdesign-2036

STAR METHOD
S.T.A.R method. Mention a Specific
situation that was similar to the scenario
given to you The Tasks that needed to be
done The Action you took The Results i.e.
what happened

Refer
Website reference responsive: markboulton

Specialties 
User Experience:
 
 
Qualitative & Quantitative Research, Data
gathering techniques such as User
observation, surveys, questionnaires,
Interviews, User Task Analysis, Contextual
Inquiry, Goal & Task Analysis, Card Sort,
Heuristic Evaluation, Storyboard, Wire
framing, Prototyping, Usability Testing

Specialties 
User Experience:

Questionnaires
• How do you typically approach design? Please mention top 5-6 things you have done to ensure the best UX design is built for
client’s business.
• Response: Five S: Strategy for Need and Objective, Scope for Function and Content Requirement, Structure for Interaction and
information Architecture, Skeleton for Interface, navigation and Information and Surface for Interface with following the UCD
Methodology and following the usability principles.
• What does Design Thinking mean to you?
• Response: Research (Understanding the Product or Service and their challenges) and brings business values and 
enables profit.
• How would you carry out UCD process if you don't get to meet the users?
• Response: With the help of User Survey Questionnaires, understanding personas and keeping myself in their shoes.
• What was your specific motivation for applying for this position at Designs?
• Response: After going through the company profile which has been leading the User experience initiative and focused on Design and
strategy thinking.
• If you happen to join YUJ Designs, where do you see yourself over the next 2-3 years - what you really aspire to do (be realistic)?
• Response: I would need to see myself to explore more into latest trend and technology in the market with new software’s and process.
• What would you do to get there?
• Response: Approach on future products and experience and be with the trend and treat learning as a continuous process.
• Share with us your experience working with international clients (remotely or in person)
• Response: I have been working remotely with US based Client interacting on calls.
• What visa type do you have in hand?
• As part of next round you are required to take a design test. Are you open for the challenge?
• Response: Yes
• Give us a link of your LinkedIn profile:
• Response: http://kamleshroy.branded.me/
• 3 Things that are most important for my Next Position
• Response: 1) Upgrade myself in the latest trend and technology 2) Learning as my continuous process 3)
• 3 Weakness?
Responsee:

Questionnaires
• Who: (Who is involved? Who will do the work and who will benefit?) 
 
What: (What change will you make, what is the goal? What will be different and better as a result?) 
 
Where: (Where will the activity take place?) 
 
When: (When will you start and what is the length of project?) 
 
Why: (Why are you doing the work, in other words, describe the NEED for the project. This is one of the most important questions.) 
 
How: (How will you reach your goal? What actions will you employ? Note: this does NOT mean how will you pay for it.) 
 
How much: (How much money do you estimate you'll need?)

Questionaires
• Latest Android Design change ?
Response:
• Adaptive and Responsive Difference?
Response:
• Theme Campaign
Response:
• Fonts Comparison
Response:
• Hybrid/Web and Native App comparison
Response: Web-Cloud Computing-Usage-10%/ Native- Local/Mobile App-Usage-80%
• Latest Operating System
Response:
• Serif and San serif Fonts
Response: Serif-Curves and Hooks(Times)San Serif- Arial, Verdana/Gotham/Gill sans
• Formats Used for Android/ios
Response: .Apk File

Questionaires
• Material Design?
Response:
• Android OS? iOS Operating
Response: Jelly Bean/Ice cream Sandwich/Honeycomb/Gingerbread/Froyo/Kitkat/lollypop
IOS: 7 is used most
• Native Drawbacks?
Response: Code can be reused/

Comparisons
 
ADAPTIVE
 
RESPONSIVE
•Mobile Usage
•Different layout for different Devices
•Less Flexible
•New sizes will not work
• Mobile usage
•Always changing
•One layout that always change
•Harder to make
•Works on various Devices
 
NATIVE
 
HYBRID
•

Comparisons
 
NATIVE  
HYBRID
•

Types of Charts
Column chart  
is to display the change in data over a period of time
0
3.5
7
10.5
14
Category 1 Category 2 Category 3 Category 4
Series 1
Series 2
Series 3
A bar chart  
comparing the values of itemsand not on time.
For example, you can use a bar chart to show the comparison of sales values of items for two years
and a Column chart to show the weekly trend of sales for all the items.

Types of Charts
A Line chart  
Display the trend of data of various intervals of time.  
Two or more types of data at an equal interval of time.
A Pie chart  
A pie chart is used to display the size of an item. For example, 20 percent of
the total sales in a company come from the sale of shampoos. This information
can be displayed through a pie chart. A pie chart can be used to provide
information about only one data series.
0
22.5
45
67.5
90
1st Qtr 3rd Qtr
East
West
North
1st Qtr
2nd Qtr
3rd Qtr
4th Qtr

Types of Charts
A Gantt Chart
commonly used in project management, is one of the most popular
and useful ways of showing activities (tasks or events) displayed
against time.

Golden Rule
http://3.7designs.co/blog/2010/10/how-to-design-using-the-fibonacci-sequence/

Fonts
http://www.fontsquirrel.com/tools/webfont-generator

Gesture
Reason for change : Looking for Better opportunity to explore my skills.

Fonts
http://developer.android.com/design/style/typography.html

Best RWD
• http://www.dtelepathy.com/blog/design/responsive-design-great-ux
• http://www.dtelepathy.com/blog/inspiration/15-b2b-brands-that-tell-great-stories
• http://newrelic.com/
• Dribbble
• Smashing magazine
• http://www.thestable.com.au/tag/most-awarded-creative-director/
• http://www.campaignlive.co.uk/news/1164112/
• http://www.creativebloq.com/career/how-become-creative-director-11121363

Questionaries
• The Degree of Eye to look into various Objects
• The flow of eye while reading
• Window phone to bring the flat design-
• Usage of various design in various Devices due to their functionality of usage
• In which device designs are good- IOS/Android/Windows
• Greatest role Model
• Work alone or in teams?
• Top 20 creative directors
• makes people love the way things look to them.

Questionaries
• 10 Points for Creative : 
 
1) Understand what makes people love the way things look to them.  
 
2) Design is more than just making something look good. 
 
3) Develop at least 10 per cent of yourself as ego. You have to be able to sell 
 
4) Defend the creative. Make sure the brief is what the brief should be – not necessarily what the client
tells it is 
 
5) Know the stuff and people will naturally listen. 
 
6) Spending a lot of time listening - really listening. 
 
7) Writing blogs and speaking at conferences are both great ways of getting stuff out there and have the
added benefit of helping you meet new people and sparking debate. 
 
8)Creating the right environment for the vibe in studio. 
 
9) Keeping an open eye with various digital disciplines to understand the wider creative world. 
 
10) Be happy to be hated as it is far too easy to be liked.

Top 20 creative directors
• Nick Gill
• Robert Saville and Mark Waites
• Mark Anderson

creative directors
• Ability to show creative brilliance and the ability to deliver on it via a great understanding of the
audience they are addressing, or a bloody single mindedness to make an idea happen.
• It means knowing how designers work; what makes them tick, knowing when they're stuck or
need help. It's about trust. It's about providing ideas and above all it's about inspiration.
• A great creative director is someone who's able to build an environment and ethos where the
very best ideas can be born and thrive.
• It means think about what makes people love the way things look to them. It's more than just
making something look good, it's about making it look right for the selected audience. You're
never going to please everybody. Stop trying to.
• a creative director is seeing work that either I have done or put people in charge of in action.

• Step One: Preplanning
• Preplanning can be broken up into three main areas: data analysis, user stories, and user flows. This is the point
in which the UX designer identifies both who the current users are and the issues they may be facing. The UX
designer explores current flows, red routes, and user personas to identify current issues before introducing new
features and/or redesigning the user interface to resolve pain points in the app. When introducing new apps as
MVP’s you wont have current users or beta testers and will need to gather this data through internal testing or
controlled user testing.
•  
• Data Analysis
• Data Analysis is a key first step and one of the most important steps to assure that new features and/or redesigns
are in sync with what users want and need. This step includes but is not limited to:
• Google Analytics to understand traffic, where users are coming from, and page load times.
• Heat mapping to learn about user habits and dead spots in the design.

• If user testing is in the budget, it’s a great way to setup a controlled group and discover user habits.
• Adding behavior based surveys to get users opinions on the usability of the current system.
• Record screencasts of real users using the current app with software like Appsee.
• Use of tools like Flurry to collect behavior based analytics.
• There are a lot of ways to collect data, these are a few of my favorites. After collecting this data you will have a good foundation to build user stories and user flows off of.
• Tools to consider: Google, User Testing, Heatmap.me, ClickTale, Usabilla,Appsee, Flurry
•  
• User Stories
• User stories are the critical next phase in the preplanning step. The most important part of creating user stories is to create user personas. User personas include characteristics such as age, location, internet usage, title, and personal interests, among other things. One of the best ways to
develop personas is through phone interviews with current users or through app profiles, if possible. After this information is gathered, the UX designer can begin creating user stories and use cases. These contextualize the user’s needs and find knowledge gaps that could be creating
frustrations for end users. With this information the UX designer can begin creating user flows, which walk through tasks, step-by-step, to create an accurate understanding of how users will be using the app.
•  
• User Flows
• Now that the user data has been collected, the UX designer can begin creating user flows. This is really the first step in the design process. Once common workflows are mapped, red routes can be established. Every app has one or more red routes. These are the primary flows a user would
take through the app to complete a task. These are important because they represent the primary focus of the app and should be prominent in the design. Note that although red routes are important, there is also a subset of tasks that need to be accounted for. Once the user flows are complete,
they can be stacked together and joined with user stories to create real world user flows for different use cases. Taking account for all the users flows in a app can be a bit tedious but the more detail you account for in this phase the easier it will be to create your information architecture in the
next.
•  
• With the preplanning step complete, the UX designer now has the necessary information to make educated decisions on design patterns.
•  
• Step Two: Exploration
• Step two consists of: sketching, wireframing, information architecture, and prototyping. At this point, the UX designer uses the data collected from preplanning and begins to explore how users will interact with the app. This consists of identifying the layout, developing visual hierarchy, and
deciding what belongs in each view. This is also a good point to start working with prototypes to build an understanding of how features will react and animate when users interact with the app.
•  
• Sketching

https://medium.com/@paulhershey/user-
experience-for-product-designers-e9fa621ce3bc

https://www.appsee.com/
now what we mean when we speak about “Responsive Design”.
Are great with presenting to and working with clients.
Are a creative thinker who is looking for something new.
Have extensive agency experience working with large and complex client
organizations.
Have a portfolio of successful interactive engagements.
Are skilled at wireframing, user flows, journey and experience maps.
Have experience in creating prototypes, paper, digital or otherwise.
Want to be involved in your projects from start to finish.
Absolute detail freak!
Like to challenge your clients (just not with your fists).
Probably cannot pronounce our company name.

A candidate should be an advocate for the user at all stages of development, standing firm to represent the user in the context of
their goals, needs and experience. 
As the advocate for the user, a candidate should follow user-centred design (UCD) process methods from concept to launch. 
Ability to understand user goals and needs and the flow of tasks to achieve those goals. 
One Question for you: 
are you really following User-Centred Design approach that is most of the time mentioned in Job Description? Please write your
feedback in comment section. 
Various stockholders are involved in designing products namely Users, Client, Designer, Developers and many others. Two of
these stockholder namely Users and Client are most notable. The client could be a company or an individual who offers design
project. You might be wondering what is client-centred design. Client-Centred Design is an approach where we as User
Experience consultants or company blindly follow the client's requirements in terms of user interface and design. 
What is the difference between User-Centred Design approach and Client-Centred Design approach? What are the possible
consequences of following these two methods? 
Let's start with Client-Centred Design approach: 
Besides business requirements and goals, client does also provide design suggestions and requirement on behalf of users . These
user requirements might be or might not be from a strong user research study. 
UX professionals keep client at centre in design approach and believes that client do have better knowledge about user's
requirements. 
As client pays money for the project and asks UX professionals or companies to complete the project based on their
requirements. In this case, UX professionals or company sometimes interested more towards getting the project regardless users
consideration. 
User is mostly sidelined from the design cycle. 
User-Centred Design (UCD) approach: 
User is in centre of the entire project in all cyclic design phases of UCD namely User Research, Design and Evaluation. 
Client passes business requirements and goals. Client do not intervene or influence the design process. 
One of the success measures for Client and UX professionals is that user could achieve their goal and feel satisfy with a product. 
UX professionals or companies project UCD approach as User Driven Innovations. 
All stockholders strongly believes in user's requirement without any personal influence. 
3

Questionaries
1) Brief about
1) Define UI/UX
Tool for a Task Where UI is tool and UX is the feeling and emotion
During using the Tool
Focusing on Need
Easier to use
Why we are Here?
Creating Best Solution of User Needs

Questionaries
http://designscrazed.org/free-responsive-html5-css3-templates/

Design Learnings

Related slideshows

More Related Content

Design Learnings