CASE STUDY: UI

AIM: To have a better understanding about user interface design, its aspects and to
know how it will benefit us.

INDEX:
1. About user interface
 Aim
 Requirement
 Three levels of UI design
2. Process
 Three stages of UI design
 In-depth process
3. Different methods of approach
4. Notable people in the field of UI
5. Notable companies in the field of UI
6. Blogs
7. Bibliography
ABOUT USER INTERFACE:

In information technology, the user interface (UI) is everything designed into an

information device with which a person may interact. This can include display screens,
keyboards, a mouse and the appearance of a desktop. It is also the way through which a
user interacts with an application or a website.

User Interface (UI) is the overall design of human-computer interaction, operation logic
and beautiful interface. A good UI design is to make software personalized and
attractive, and easily accessible so as to adequately incarnate the orientation and
feature of the software. Generally, the goal of user interface design is to produce a user
interface, which makes it easy (self-explanatory), efficient, and enjoyable (user-
friendly) to use the software in the way that produces the desired result.

The aim of UI design

After having a better understanding of what UI stands for, then we need to know the
aim of UI design. The principle of “People First and Customer Supreme” is the core idea
of UI design. UI design is not merely for looking good, but for excavating user’s
demands and sparing no effort to cater to users' habits with your creative thinking.

Requirements for UI designer

An excellent UI designer who is aware of what UI stands for, should not only be capable
of drawing icons and designing interface but also mastering a lot of interactive
knowledge; if you want to design a better interface, you need to completely understand
the structure of products and interactive logic. Only in this way can we complete
a reasonable interface design. In the actual work of design, the UI designer should join
the discussion in the early stage of product design, which will reduce the
communication costs and misunderstanding of the interaction between product
manager and the UI designer, ensuring that the software interface is in line with the
project team's expectations.
The three levels of UI design

a. Customer-centered experience research:

Exploring what are customers’ really demand through research and comparative
analysis and make decisions according to users’ experience. User interface design, an
integral part of the product, is a complex project with different disciplines, cognitive
psychology, design, linguistics and so on, all of which play an important role in UI
design. There are three principles of user interface design: setting the interface under
the control of the user; reducing the burden on the user's memory; maintaining the
consistency of the interface.

b. Interaction:

It means the interactive process of the whole project. Through the interactive design of
the interface and the conduct of the product, interaction enables the product and users
to establish an organic relationship so as to effectively achieve the user's goals. This is
the purpose of interaction design.

One of the most important aspects of UI design: human-computer interaction. In

general, the goal of human-computer interaction engineering is to create a simple and
convenient interface for users. That is to say, UI embodies user and the interface
interactive search instead of the simple user interface.

c. Study interface - Graphic Design:

Includes web design, software interface, mobile interface design

PROCESS:

Three main stages of the user interface design:

 User Research
 Design and Prototyping
 Evaluation

 User research:
The goal is to define who the customers of your product are and how they are going to
use it. At this point, you should explore

 User’s needs, challenges, and problems

 User types, their experience, level of knowledge and skills;
 What activities they can do using your system;
 Contexts of use for what you are designing.

This stage is required on all software development projects and in all methodologies
(the Waterfall and the Agile ). If you have already had all this information you are ready
to start the user interface design. If the information about all the points above is
inconsistent or incomplete, then there are a lot of risks that your attempt to design the
user interface won’t be very successful.
Suppose that important information about the users and the product requirements has
been successfully gathered. Now we are ready to start the designing process.

 Design and Prototyping:

A good way is to start from the simple sketches and low-fidelity wireframes and to
continue with high-fidelity wireframes, mockups, and prototypes.

Wireframes
A wireframe is a sketch of the system to be built. Wireframes should clarify exactly
what elements realize the different features on all pages or screens of a future product
but without full details. The actual screen design will be produced at a later stage by
referencing the wireframe.
Wire framing stage doesn’t require a lot of time and efforts, but it can come in handy
when designer communicates with customers, users, project team, as it allows them to
visualize first ideas more easily when he or she just describes them verbally.
Wireframes can easily be revised or changed. It helps to do all the process more cost-
effective.
Therefore, wireframes should come first. What should follow? It depends on the type of
the software product that is going to be produced. If your product is, for example, a
business app with many business processes, users’ types and features, then it probably
would be very important to build the prototype at the next stage after wireframes.

Prototypes
A prototype, in this case, is a semi-functional layout that can give a high-fidelity
preview of the actual product (front-end) functionality. While prototype might not have
full functionality, it generally gives customers and/or end-users an ability to click
around the elements of the interface and simulate the way the product will actually
work. Prototypes may or may not include completed design elements. At this stage, we
can demonstrate and discuss after demonstration not only what elements display the
features of the product, but also how they can work. It helps to test the ideas and make
some changes at early stages of the project. The prototype can easily be revised, trickier
than wireframes but much easier than the final product. So, creating a prototype also
can raise the efficiency of the software development process.
After wire framing and prototyping we can focus on the visual design of all elements.

Mockups
To produce the mockups after reviewing the wireframes (but not instead the
wireframes) is a right decision. The mockup model demonstrates all the graphics,
typography, colors and other page elements. Mockups are generally just image files.

There is a very popular question:

What is the difference between wireframes and mockups?
The answer is:

 The wireframes are about functionality;

 The mockups are about presenting how what the final product would look like.

Notice that we often used the words “reviewing”, “discussion”, “brainstorming”,

“demonstration”, etc. when we talked about the stage of design and prototyping.
Actually, design and prototyping is always an exploratory process. So, we don’t talk
about just one set of wireframes, or one prototype, or one mockup but rather about
designs and prototypes in plural because it’s important to investigate some alternatives
in order to get to the right design.
  Evaluation:
As we can see, the evaluation should be included in all stages of the design process. The
main purpose of the evaluation stage is to assess the quality of a design, not in the
abstract, but how it fits the users, meets their needs and displays all the product’s
features. Also, we should identify promising areas for improvement and make some of
them.
After several series of iteration from the sketches, wireframes and mockups to
prototype, after several discussions and brainstorming session with the customers’
stakeholders, end-users and project team, in other words, after the evaluation, the
probability of creating a good user interface increases significantly.
These are the core components of user interface design processes. Of course, how they
are balanced, arranged or mixed, the order in which you do it may differ from project to
project. Nevertheless, these key concepts are present in all user interface design.
We will be extremely happy to create a good user interface for your product. So, do not
hesitate to contact us. Our strong and experienced design and software development
team is ready for comprehensive and challenging tasks.

IN-DEPTH:

User Interface Development Flow (8-step Process)

 Understanding the Project’s Concept: You have an idea, and we have tools to
implement it. But what should we start with? We start with the investigation of
the business domain, user audience and the use cases of the product. That helps to
understand the target audience in a better way, and to build the User Interface
(UI) focused on the user needs. This may affect the size and position of buttons,
forms, fonts and many other aspects of the interface structure. Let`s compare the
FinTech app and the application from the Taxi & Transportation domain. The first
one would include lots of forms, lists, graphs, and transitions. The second one
would be oriented on the large and suitable controls that are easy to use during
the ride. In both cases, the interface should be ergonomic and user-friendly but
you expect it to differ a lot, right?

 Brainstorming & Sketching : Once the project’s concept is clear we move to the
brainstorming area, to transform our ideas regarding your interface into reality.
We bring a pen and a piece of paper. That’s more efficient in terms of time
 compared to the advanced tools such as Balsamiq Mockups, Sketch, Photoshop,
and InVision.

 User Flow Diagram: Once sketching is completed we receive the structure of the
interface. But how should user interact with it? User Flow Diagram comes into
play here. The diagram helps to understand the logic of the product by showing
every possible interaction with the UI, the roadmap of those interactions and the
interface state at every point.

 Structure and Flow Validation: When we finish with the UI sketches and the User
Flow Diagram we ask our clients to confirm it. Structure and flow serve as a base
of the building(for the User Interface design). That’s very important stage in the
UI development. We do not move forward without those being confirmed. That’s
much easier to make changes to the interface at this stage. We can take a complex
website design as an example. If you change the structure after the design
implementation, you may face the situation when you have successfully broken
the color scheme, UI controls, visual style and other parts by simply changing the
placement of several elements. In that case, you will probably need to refuse those
changes or re-develop the design partly or even completely.

 Choosing the Style of the Interface: When customer confirms the structure and
the flow — that’s a signal to move forward. What’s next? We choose the style for
the interface. There is a wide choice. That can be minimalist, material design,
skeuomorphism, metro interface or any other. While choosing one, we ask our
clients for some links to examples they like(that includes styles and effects and
helps us to understand you in a better way) and about the plans for the future. We
pay attention to the current trends, possible interface scaling, and the time needed
for the design development and implementation by the development team.

 Style Validation: At this stage we make a presentation of our versions of the

design to our clients, explaining why these or those decisions were made.
Customer may disagree with some moments at the very start, as he might not be
aware of the full picture and possible pitfalls. The goal here is to end up with a
solution that satisfies the client’s vision and follows the best UX practices.
 Choosing and Creating the Preview Form: Once all the listed above is completed,
we become ready to show you how your design will look like. It can be presented
in various forms. Based on expected fidelity level and the time you are ready to
spend that might be one of the following:

 Wireframe: The fastest one for the implementation. That’s a low detailed
presentation of the design. Wireframe shows the structure and the description of
user interactions with the interface. Regularly it is made in a form of gray blocks.

 Mockup: Mockup is a medium or high detailed static representation of the design.

It renders the content showing you how your design will look in static. It’s easier
for perception compared to gray blocked wireframe, and it is still pretty fast to
implement compared to the prototype or the animated UI flow.

 Clickable Prototype: The prototype is a highly detailed representation of the final

product that simulates user interaction with the interface. It allows you to click
through your app and check the complete flow and animations. However,
prototype creation is pretty time-consuming.

 Animated UI Flow: Animated UI flow is a video recorded simulation of the user

interaction with your app. The creation of such representation is the most time
consuming(as it includes the creation of the prototype + the video editing
process). However, that’s a pretty suitable way to present your product to
colleagues and possible investors in future.

 Design Validation: There are people with the exact picture of the design in their
heads and there are those who are only guessing. Anyway, everyone has its own
vision. On the design validation stage, you see the result and provide us with the
comments and suggestions. We, on the other side, adjusting it to meet your
expectations.
DIFFERENT APPROACHES TO UI:

 Iterative approach
There is no right way or a single standard way of creating a user interface. Moreover, if
you want to create an amazing first impression on your audience that lasts longer than
you must understand that there is no one size fits all solution.
Rather your approach has to be more iterative wherein collaboration is the key,
continuous validation of ideas is norm and discovery phase is the way of getting
started.

What is a discovery phase?

In discovery phase, instead of asking, “what do we want this design to achieve?”, you
would need to ask “What does your customer want to do?”.
Please do not mistake that this approach under-represents the objectives of your
business. It rather emphasizes the fact that focusing on customer needs would help you
achieve long-term goals of your business.
By the way, how would you know the minds of your customers? The answer is, you can
get to know what your customers want to achieve, via user research.

How does user research differ from market research?

You must be quite familiar with the traditional market research that has been done
over the years which focuses on how to convince customers to buy by canvassing about
their opinion.
User research, on the contrary, focuses on understanding the needs of your customers.
Instead of focusing on marketing personas, focus groups, demographics, etc., you would
need to channelize your attention towards empathy maps and customer journey
mapping.
Now, empathy maps are not used to convince your audience rather it is used to meet
with the needs of your customers.
Furthermore, throughout this process, you would learn to embrace change which is not
only inevitable in design but desirable too. However, to embrace change you would
need a prototype to test first.

Building a prototype
Prior to building a prototype, you can take an aesthetic approach to design.
In an iterative approach, the prototype is basically a fluid concept evolved from the
feedbacks of users instead of being just a technical specification. This prototype is
tested and iterated and thus more preciseness is introduced to the final product.
  Aesthetic approach
Often aesthetics are confused as visuals of the design, however, aesthetic design
comprises of more elements than just visuals. Aesthetics is in fact in all our senses and
aesthetic design is basically a 4D experience.
Have you ever assumed by seeing a good-looking person that they might have other
positive qualities apart from their looks? Well, this is due to the phenomenon called
“the halo effect”. The same holds good for product design too.
Good-looking products are often perceived as more valuable and feature-rich. Visual
aesthetics, sound aesthetics, and material aesthetics are major categories of aesthetic
design. In addition to that taste and smell also plays a pivotal role in helping you
experience aesthetics deeply.

Why does aesthetic design matter?

Contemporary consumers expect usability by default and they look for products that
are more than usable and functional. Aesthetically pleasing designs evoke positive
emotions in users and are likely to win over customers swiftly. Besides, it makes people
more loyal to the brand and makes them tolerant towards any usability issues.
Aesthetic design is all about influencing the mind of your customers, how they feel and
think. After all, the early impression of your product does matter!

 Minimalist approach
Minimalistic approach is all about using simplicity to highlight the meaningful in order
to achieve elegance in design. This concept spans across various fields, however, here
we are discussing it in the context of design.
This trend is widely used by web development services provider in the design of
websites and mobile applications.
The following practices can help you understand the main points that you would need
to consider in minimalism:

 Flat design
In modern digital products, a flat design is which involves the use of two-dimensional
visual details in UI elements like images, buttons, icons and illustrations are
widespread. This is because it not only looks neat in different resolutions and sizes but
also enhances the visual harmony and usability of user interfaces.

 Monochrome or limited color palettes

Color holds great potential in the design of UIs as it is endowed with the capacity to
establish emotional as well as informative links between your product and its users.
In minimalistic approach, web design experts often limit their color palette to
monochrome or minimal set of colors in order to avoid distracting users from core
elements like content.
  Choice of typography
Often expressive and bold typography are used to serve as a core visual element.
Besides informing users about the content, it also enhances visual performance.

 Eliminating unnecessary elements

In minimalistic approach designers are mainly focused on simplicity and functionality
and thus avoiding overloading users’ attention with decorative elements. Thus, they
help users focus on the core feature by guiding their attention and resolve their issues
quickly without getting distracted.

 Using negative space or whitespace

Whitespace or negative space is a critical element in minimalistic design as it allows the
core features and important parts of a website to stand out by creating contrast and
supporting legibility.

 Intuitive navigation
This is the most challenging part of minimalistic approach as UI designers want to show
only the elements that are of highest importance and at the same time they need to
ensure that users easily find what they are looking for.
Navigation in minimalistic approach is often the most criticized aspect, but if you keep
UX in the center of design then you will definitely land up with great UI.

 Technical approach
The ultimate goal of your UI is to provide a means for users to communicate with the
device, isn’t it?
The technical approach to UI design is about how studying human-computer
interaction (HCI) helps UI/UX development experts to create intuitive and better ways
for your customers to interact with computers.
This discipline basically a merge of cognitive science that is how our mind works and
engineering that is how the computer works. This purpose of establishing this new
discipline was to empower users by understanding their mind (how they think) and
needs (what they want).
HCI essentially enables the web design experts to find out the “why” beneath the “how”
of the user interfaces they design.
Furthermore, designers can leverage HCI concepts such as GOMS (Goals, Operators,
Methods, Selection Rules) to map the human interactions with a computer. This model
enables designers to measure the usability of an application and also allows UI and UX
optimization.
NOTABLE UI DESIGNERS IN INDIA:

1. SUNIT SINGH

Sunit is a partner & co-founder at Design Capital, a design advisory firm though
which he mentors design & product teams at Cleartrip, Ola & Table Hero. He
works very closely with the founders and teams at each of these companies,
helping them build a design culture and sensitize the entire organization to good
design.

Sunit is a graduate from Sir J. J. School of Art, with a Bachelor of Fine Art in
Painting followed by Masters of Design in Visual Communication from Industrial
Design Center, IIT Bombay.

Sunit put his talents to use really early, picking up freelance design and art
projects through his college days and went on to co-founding his own design
studio after his post-graduation. Since then, he’s worked with some of the leading
design firms and product companies like Paper Plane, Burrp!, Yahoo!, Cleartrip
and Ola. Cleartrip being one of his most significant stints, where he led the design
for the mobile products and a major overall redesign. While he’s led design teams
of various sizes, he continues to be a very hands-on.

2. NITIN GARG

Currently designing Fastpad, Y–Combinator backed hiring tool & finished mobile
redesign for Foodpanda. Previously with Redbus, Airwoot (freshdesk),
Philips, PayU India, Housing, Adalyz
http://www.nitingarg.com/

3. PRAKASH GHODKE

Prakash Ghodke is a self-taught UX/UI Designer who lives in India with over 6 years
of experience working as a designer. He has an expertise in creating unique intuitive
design experience for both web and mobile. He helps build a better digital presence
for medium and small brands such as RebelMouse, Redbox, Jukebox.io, Wotip,
BeFunky, Glance, Griddr and among others.
https://dribbble.com/ghodkester

4. PARESH KHATRI

Paresh has been in this industry for more than a decade, constantly spreading his
creativity. He has worked with companies like Adobe, Groupon, Housing, Salesforce,
Kayako, Lux and many more. At present, he has been working with Busy and
Steemconnect on Cryptocurrency.
https://dribbble.com/kpdesigns https://iconscout.com/blog/design-insights-paresh-khatri/
NOTABLE COMPANIES IN UI:

https://lollypop.biz/
https://thinkdesign.in/
http://www.agileinfoways.com/ui-ux-design/
https://portfolio.fugenx.com/
https://acodez.in/works/
http://www.9spl.com/company-overview.html

BLOGS:
https://www.pannam.com/blog/top-ux-ui-blogs/
https://intetics.com/blog/principles-of-a-good-user-interface-design/
BIBLIOGRAPHY:
http://searchmicroservices.techtarget.com/definition/user-interface-UI
https://www.quora.com/What-is-a-UI

https://intetics.com/blog/the-main-steps-of-the-user-interface-design/
https://medium.com/swlh/user-interface-development-flow-537f82f00247
https://blog.heliossolutions.in/uxui/4-ui-design-approaches-craft-excellent-ui-help-
establish-brand/
https://www.quora.com/What-are-the-best-UI-UX-design-companies-in-India
https://www.quora.com/Who-are-the-5-best-user-interface-and-user-experience-
designers-in-India
https://www.quora.com/Who-are-some-of-the-best-UI-UX-designers-in-India-Delhi