UIUX Design - report on summer training.docx

Summer Training Report
UIUX Studio
B-409, 4th Floor, Bestech Business Tower, Sector 66,
Sahibzada Ajit Singh Nagar, Mohali, Punjab 160066, India.
Training- UI Designing
Duration- 27 May,2019 to 15 July,2019
Submitted in partial fulfilment of the requirements
for the degree of Bachelor of Technology in
Information Technology
Submitted by-
Bhawna (161476)

Table of Contents
Serial No: Content Page No.:
1. UI Experience
2. UX Experience
3. Grid System
4. Maslow’s Hierarchy of
Needs
5. Difference between
Graphic Designer and
UX Designer
6. Project- KIA app and
branding

Acknowledgement
I would like to express my deepest appreciation to all those who
provided me the possibility to complete this report on UI Designing. A
special gratitude I give to our final year project incharge, Mr Ravinder
Bhatt whose contribution in stimulating suggestions and encouragement,
helped me to coordinate my project especially in writing this report.
Furthermore I would also like to acknowledge with much appreciation
the crucial role of the staff of UIUX Studio who gave the permission to
use all required equipment and the necessary materials to understand
the concepts as well as usage of software. A special thanks goes to my
project faculty incharge , Mr Harminder Singh who help me to assemble
the parts and gave suggestions about the tasks. I have to appreciate the
guidance given by other supervisor as well as the panels especially in
my project lectures that has improved my concepts on UI Designing.

DECLARATION BY THE CANDIDATE
I the undersigned solemnly declare that the report is based on my own
training carried out during the course of my study under the supervision
of Mr. Harminder Singh. I assert the statements made and conclusions
drawn are an outcome of my training lectures.
I further certify that :
I. The work contained in the report is authentic and has been done by
me under the general supervision of my supervisor.
II. I have followed the guidelines provided by the university in writing the
report.
Bhawna
Roll no:161476

Introduction-
User Interface Design
User Interface (UI) design is a large field. In theory, UI is a
combination of content (documents, texts, images, videos, etc), form
(buttons, labels, text fields, check boxes, drop-down lists, graphic
design, etc), and behavior (what happens if I click/drag/type).
It takes a good eye, a lot of practice, and a lot of trial and error to get
better at it. As a UI designer, our goal is to create a user interface that
is engaging, beautiful, and also creates an emotional response from
the user to make your products more lovable and beautiful.
When I started out, something I learned from my mentor is to take a
tour guide journey to your product. Imagine your app/website as a
journey. Every user that downloads your app right from spotting it in
the App Store/web, through using it, achieving goals or completing
tasks within the app is taken on a journey. And that journey should be
a delightful one.
And you, as the app designer, are the craftsman that designs this
journey. So you don’t want to throw all the information on the screen
hoping that the user will pick it up. That’s the very opposite of a good
UI.
Instead, you’re the tour guide that takes the user on a wonderful
journey through your app. And in order to this, you have to be able to
shift and move their attention from place to place guiding them.
Design isn’t all about learning to use design software —although
that’s certainly important. Software is like a designer’s sword. You
need the sword to fight the battle, but that’s not all you need to learn
to use. You need to learn the strategies, processes, tricks and tips of
the fight/game to be able to win it. In UI design, you need to
brainstorm, experiment, test, and understand your users and their
journey throughout using your product.

The benefits of having a well-designed product is that you’ll have
a higher user retention rate.
Things to remember about creating delightful UI
1. On a screen, people will always read the biggest, the boldest, and the
brightest first.This is human nature. Our attention is programmed in
such a way where we see the biggest, the boldest, and the brightest
first. And then it moves to smaller, less bold, and less bright things.
2. As a designer, you can use this information to curate the experience of
your user.
3. The Importance of Alignment.
Alignment is a fundamental aspect of UI Design. And an important
design principle is: minimize the number of alignment lines. It
improves readibility and makes the design more pleasing to the eye.
There are two fundamental types of alignment: Edge alignment and
Center alignment.
 Edge alignment is where you have all the elements having one side
or edge lining up with a single line.
 Center alignment is where you line up all the elements by their
midpoint.
Depending on the usecase, you’ll choose one or the other. Usually,
edge alignment is considered better. It’s quite easy to align elements
in design software like Photoshop. Most design software will usually
provide a ruler/guide to edge align all the elements.
3. Become an attention architect.
Here’s two ways to interpret this: 1) You need to grab the user’s
attention with your design. 2) You need to pay attention to every little
thing in your designs.
To be a great designer, you need to do both. The latter lets you
achieve the former.

UI Design is about tailoring the experience for your users by guiding
their attention towards different important things.
Ways to use text to grab user’s attention:
 Make its size larger or smaller.
 Bolder or brighter in color. Or make it muted.
 Use a typeface with a heavy weighting versus something that is thin
or light.
 Italicize words. Capitalise or lowercase some words.
 Increase the distance between each of the letters to make the overall
size of the words take up more space.
The most important thing when designing is testing! Make sure you
try out different everything: colors, fonts, tones, angles, alignment,
layout, etc. Experiment with different designs so that you can
architect a user journey using various ways of commanding attention.
User Experience Design
User Experience (UX) design is about creating pain-free and
enjoyable experiences.
Here are 7 questions to ask yourself to know if the UX of your
product is good:
1. Usability: What is the user using my app for? What is the core
functionality of my app? What is it that I need to get right in order for
my app to be used?
Now how can I minimise the number of steps that it takes for the user
to achieve it within my app? What is the main thing my users want to
achieve with my app? How can I make the experience of achieving
that as smooth, quick, and enjoyable as much?
2. User Profiling: You have to know who your users are and what they
want to achieve using your app. The best way to do this is by profiling
your users.
You have to do a few thinking exercises to understand your market.

Narrow down your target/user audience.
The main question to keep asking yourself is: What is the core
functionality of my app? Profile your users to continually reevaluate
that question.
3. Asking for permissions: If your mobile app has push notifications,
needs location services, integration with social media, email, etc, you
know you need user’s permission on an alert message that pops up on
the screen when they’re using your app. Instead of asking all at once
which would overwhelm the user, use The Benjamin Franklin effect.
Before asking someone for a big favour, ask them for a small favour.
And slowly nudge the user towards a certain direction.
Make sure your app sends the permission notification only when the
user is about to use that feature and not when they just launch the app.
4. Form vs Function: Design is not always about the form — beautiful
color scheme, the fonts, the layout, and such. It’s also about the
functionality. Always go for function over form.
5. Consistency: Am I being consistent throughout my app? Is my app
consistent with my brand? Inconsistency in design creates confusion.
A confused user is an unhappy user.
Think of consistency, not just in terms of appearance, but also in
terms of functionality.
6. Simplicity: Can I make it simpler?
Make sure your app is grandma-proof, i.e., older people can
understand it and use it.
A bad confusing app would be rows upon rows of buttons, lots of
different colors, and a tightly packed user interface.
7. Don’t make me think: Am I making things difficult for my user?
Humans don’t like to be confused.
When we’re programming, we’re trying to make our code as
lightweight and as efficient as possible.
When we’re designing, we’re trying to make the interface as clear and
as least confusing as possible. And beautiful!

Project-
Kai: Mobile App Design + Branding
Overview :
The Client- Kai is a food donation non-profit that connects businesses
with excess food to India’s food-insecure residents.
The Challenge- Create a mobile app that will allow businesses to
painlessly donate food.
Outcome- A mobile app that seamlessly facilitates the scheduling and
management of food donation pick-ups.
Length of Project- 2 weeks (Speculative Project)
Tools- Sketch, AdobeXD.
Research :
During the research phase, I sought to understand the trends that set the
standard in the non-profit sector. I also needed to uncover the needs and
frustrations of the target user to better understand how to appeal to
them.
Research Goals
1. Define the standard for donation services.
2. Learn about popular donation apps on the market.
3. Understand why businesses and organizations donate and why
individuals receive food donations.
4. Define common behaviors of businesses and organizations when
donating food
5. Define common behaviors of individuals receiving food donations
6. Determine users’ needs and frustrations when donating and
receiving donated food

7. Understand how donors, food recipients, and intermediary startups
interact.
8. Identify areas of the donation experience that could be improved.
Secondary Research: Market Research
First, I conducted secondary research to familiarize myself with food
donation apps that are already on the market. I gathered data on the
problem of food waste in India and the use of technology to tackle the
issue.
Secondary Research: Competitive Analysis
A competitive analysis was performed to understand the strengths,
weaknesses, similarities, and differences between competitor food
donation start-ups.
My competitive analysis produced the following insights:
Findings
 There are not many competitors in this industry, at least not who
have a mobile app to coordinate donations. There is an opportunity
to use mobile-based technology to improve the efficiency of the
donation process.
 Many food donation apps have tight restrictions on what types of
entities may donate; some only allow restaurants or corporations.
 There is very little information about how these food startups go
about choosing the recipients of the donated food- more
transparency would help users who want to make sure their
contributions are reaching people who truly need them.
 Tax deductions play a major role in incentivizing businesses to
donate. Almost every competitor outlined the financial benefits of
charitable giving.

Secondary Research - Provisional Personas
I created provisional personas that reflected the data I had collected
through user research. Understanding the target audience helped me
think about how the app would appeal to different demographics with
varying needs.
Primary Research - Interviews
To better understand the perspective of the target user, I interviewed 4
people- two people who regularly donate to a food bank and two people
who receive food from food banks in the DC area.
Research Assumptions:
 The donation process needs optimization via technology.
 Donation recipients have mobile devices on which to access
donation services.
 Users are unsatisfied with the current donation structure in place.

After completing the interviews I wrote down all of the responses on
sticky notes and began to cluster them based on topic.
By clustering interview responses, I discovered trends and patterns that
revealed insights about the user experience. Through this process I
identified several user needs:
1. Users need convenience throughout the food donation process.
2. Recipients need to know they will receive high-quality food
donations.
3. Users need efficiency throughout the food donation process.
4. Donors need to find donating mutually beneficial.

Persona Creation
Next, I used all of the qualitative data i gathered during the research
process to create two personas. Since Kai is a two-sided service,
meaning it is used by both donors and recipients, I wanted to capture
both types of users through my personas. I found that donors and
recipients have different needs and motivations.
Point of View Statements & How Might We Questions
At this point, I realized that I would only have time to focus on one user
group, so I decided to move forward with the donor persona. I had
identified the needs of donors, so I had to shift gears from intensive
research to ideation. I created Point of View statements and How Might
We questions to generate a list of solutions to the challenge.
Define and Ideate:

Group Brainstorming
I asked two friends to assist me in generating ideas for this project. For
each How Might We question, I asked them to come up with as many
solutions as possible in the given time frame.

Business and User Goals
Next, I reflected on the business goals, user goals, and technical
considerations for all stakeholders. Once I had identified common goals,
I could decide what product features were necessary for the prototype.

Information Architecture :
A high-level list of app features was created to further define and guide
the vision for the product. Prioritizing the features with supporting
research created a clear order of execution.

Next, I created a site map for Kai that outlined the app’s navigation and
information hierarchy.
Interaction Design
I completed a task flow and user flow to imagine the ways a user might
navigate through the app to donate food. These tools helped me ensure
that the information was organized in the most intuitive fashion for the
user.

UIUX Design - report on summer training.docx

Test
Wireframes: Low-Fidelity
I began the process of wireframing with sketches of several of the main
screens for Kai. During this process, I thought about how the layout and
content could be structured to satisfy user and business goals in a
technically feasible way. The sketch I chose served as a guide for my
digital wireframes.

Wireframes: Mid-Fidelity
I created a UI requirements document to outline all of the features and
elements I wanted to incorporate into the design. Once this was
complete, I started creating digital wireframes for the main screens in
Sketch.
Usability Testing
I asked 4 participants to test out the prototype's usability. The participant
pool was comprised of people over the age of 18 who are android users.
The participants were given four scenarios, each with a task to
complete.
Tasks:
1. Use the tracking feature to see how close your driver is.
2. Navigate to the donation guide and read the food donation
regulations for your state.
3. Message your driver to give him the access code to the security
gate.
4. View your rank in the office’s donation league.

Affinity Mapping
I created an affinity map to organize and synthesize the responses and
observations I captured using testing. I uncovered insights, which were
reconstructed into a list of recommendations. I organized these by
priority level (high to low) as a way to determine what needed to be
changed immediately and what could be saved for later.

Findings:
All participants were able to complete all tasks; however there. The most
challenging task for users was the first task, which asked them to use the
tracker feature to see how close their driver was. Overall, most issues
users had were caused by information hierachy.
Recommendations:
1. Move Track Driver feature to the pick-up details screen.
2. Simplify the schedule donation button by removing the vector
image.
3. Reorganize the information hierarchy of the donation page.
4. Increase font size of ETA message on the tracker map.
5. Change the title “Contact Information” on the pick-up details page
to something more descriptive.
After updating my wireframes to incorporate the recommendations, I
moved on to visual design. Up until this point, my prototype lacked a
color scheme, typography, and a brand identity. I looked for inspiration
for the mobile app on Pinterest.

Visual Design:
Next, I started brainstorming logos. Coming up with brand adjectives
helped me narrow my vision. I sketched ideas first, and then created
digital versions of my favorites.

The logos were added to the Style Guide and UI Kit, a comprehensive
collection of all site components and UI patterns. Both documents are
constantly changing as the website and brand grow.

Finally, I applied the branding from the style tile to the mid-fidelity
wireframes, the result of which was a set of high-fidelity wireframes.

The Differences between Graphic Design and UX Design
User-focused vs pixel-focused
Graphic designers tend to pursue pixel perfection in their designs. Ensuring that texts have
perfect kerning and colors conform to brand guidelines often take up a significant portion of
graphic designers’ jobs—and for good reason, too. UX designers, however, are primarily
focused on users. They study the interface between users and the product, finding ways to
ensure that the product answers to the user’s key needs. And they do so by conducting a lot of
research—by talking to and observing users, creating user personas and stories, doing
usability testing on the products, and many more. Graphic designers looking to switch career
tracks will need to do a substantial amount of work finding out how to conduct user research
(more about this a bit later on in the article).
Iterative problem solving
UX design is very much an iterative problem solving process, and it can be very different
from what you’re used to doing as a graphic designer. It begins with the identification of a
problem; this is often found through user research, and if it’s not, it will then be confirmed
through user research. There is no point in solving problems that users don’t care about; they
won’t pay to solve those problems, and that means your company won’t make money.
From the problem identification stage, more research is conducted into how best to solve the
problem in a way that the user will be happy with—usually via observations, surveys,
ethnographic studies, etc.
This research then informs the product’s design. Designs are then tested with users to see if
the research led to the right solutions. The designs are constantly iterated until research
confirms that they are good enough.
Once this happens the product is launched, but the design process is not over. The design will
be continually tested and user feedback will be taken, thus beginning a new round of user
research. Future improvements to the design will be made based on this feedback.
Multi-disciplinary vs specialized
Graphic design is a specialized discipline, and there is a certain level of craftsmanship and set
of specialized skills (such as typography and color theory) required to produce great visuals.
UX design, on the other hand, is much more multi-disciplinary and involves many schools of
knowledge. UX designers have to constantly learn about human psychology, interaction
design, information architecture and user research techniques, just to name a few, in order to
create the right solutions to a user’s problems. Don Norman, the man who coined the term
“User Experience”, explains that user experience covers “all aspects of the person's
experience with the system including industrial design graphics, the interface, the physical
interaction and the manual.”

The Grid System: Building a Solid Design
Layout
The grid system helps align page elements based on sequenced columns and
rows. We use this column-based structure to place text, images, and functions in
a consistent way throughout the design. Every element has its place that we can
see instantly and reproduce elsewhere. Consider the grids we find in maps.
Islands, towns, lakes will appear on an exact part of a map, on a set of North-
South/East-West coordinates. They will always appear in the same place on
other maps.
The grid system was first used to arrange handwriting on paper and then in
publishing to organize the layout of printed pages. Given that the printed page
and the virtual page have much in common,it should come as no surprise that
we also use it in web and app design. Creating a grid system for the virtual page
is a little more complex than for the physical page – browsers handle
information differently, and screens vary in size.Happily, however, the principle
remains the same.The best layout is one which provides no distraction from the
content. Thanks to its mathematical precision, the grid system is a great
example of this kind of layout.

Maslow's Hierarchy of Needs
User needs are no different from our general needs. For each of the levels of
Maslow's hierarchy, we can recognize these needs in the drives displayed by
users. Advertising represents one of the clearest examples of Maslow's
hierarchy of needs influencing design. It would be quicker to name products
that are not advertised using models (male and/or female) to tap into the
physiological need for the sex. Such is the power of harnessing the drive
presented by human need, even where there is no genuine link between a
product and one of the basic physiological needs, that it does not stop
advertisers from playing (or should that be preying?) on one or more of them so
as to grab our attention and get us to part with our money. Take Richard
Branson's failed attempt to get a piece of the soft drink market, with Virgin
Cola, which had a bottle design apparently modelled on Pamela Anderson's
figure.
Human needs should also be considered when you are trying to highlight the
positive aspects of your products. For example, if you are selling drinks, images
and text which draw attention to or accentuate the thirst-quenching nature of the
product can improve its appeal. Likewise, a package holiday deal can seem a lot
more attractive if you show people enjoying a meal and a few drinks (i.e. two
physiological needs). Regardless of the product you are working on, it will be
for some human need, whether it is to satisfy a physiological, safety,
love/belonging, esteem, or a self-actualization need; if there is no need, then
you should probably look at starting another project.

Conclusion:-
Since I was coming into UX Design from a completely unrelated area, I wanted
to educate myself about the field. I wanted to know what a graphic design is
about and know about latest trends. I signed up for various design newsletters
and also subscribed for courses on interaction-design.org . I followed popular
UX publications on Medium. While doing some reading on design, I came to
know I needed high quality way for theoretical and practical knowledge of this
field. So I joined UIUX Studio company to gain practical knowledge on how to
handle projects and learn more about UIUX Experience.
I did the project on food app under supervision of the manager of the company
which helped me in increasing my knowledge to good amount about this field.
References- https://www.interaction-design.org/courses?r=bhawna-1

UIUX Design - report on summer training.docx

More Related Content

What's hot (20)

Similar to UIUX Design - report on summer training.docx (20)

Recently uploaded (20)

UIUX Design - report on summer training.docx