“User Interface” or UI Development is not a new term in software development life cycle. Starting from a small web site development to application or software development, User Interface plays a very important role. Many people believe, UI development is just about coding HTML, CSS and Java-Script but UI is way beyond these technical terms.
UI Development is not limited to Website development but extended to any kind of application development including client server. Even in wireframes and Prototyping we make use of UI technologies.
A user is not going to experience a software or website based on the backend technology used, but based on the User Interface and its experience.
This topic is intended to understand
- The role and importance of User Interface development in the SDLC
- How UI Development can be catered in each phase of SDLC starting from the Requirement gathering phase.
Introduction
Product development is the process of designing, creating, and marketing an idea or product. The product can either be one that is new to the marketplace or one that is new to a particular company, or an existing product that has been improved. In many instances a product will be labeled new and improved when substantial changes have been made.
Today Product development is becoming a need for every business, from a simple website to ecommerce websites, banking domain to mobile technology every business needs software or a product to communicate with the users.
We can categorize the product into this broad bucket
- Consumer Products
- Public Safety,
- Rugged Handheld Computers Utilities,
- Mobile & Fleet Management
- Mapping & GIS,
- Embedded Systems
- Portable Devices In-Vehicle Navigation & Telematics Tracking,
- Instrumentation,
- Security
- Engineering & Construction
- Construction
- Construction Asset Management
- Marine Construction
- Mining
- Surveying
- Infrastructure
- Agriculture Solutions
- Precision Agriculture
- Guidance
- Flow and Application Control
- Water Management
- Information Management
- Advance devices
- Defense
- Precise Timing
Each of these products needs a User Interface through which a user can accomplish their tasks. Having the best user interface provides the best customer experience and today’s competitive market-place demands that companies maximize the ease of use for their customers.
All product development goes through a similar development lifecycle, starting from requirement gathering to testing phase. Unfortunately, in the development cycle of most of the applications, the user interface design does not begin until most of the development has been completed, and is usually starved for time and resource
The results are hardly positive. Either the UI design is severely affected by assumptions made during the application development or additional resources are added to rework or completely re-program all or part of the application to accommodate new design. This leads to problems like design compromises, delay, budget overruns etc.
Given this the most effective strategy is to integrate and design the UI parallel to each phase of development lifecycle
In short, integrating UI design in the development process have several businesses benefits as follows:
- Create a better product
- Increase customer satisfaction and retention
- Allow greater flexibility in responding to customer feedback
- Lower development costs
- Shorten the development lifecycle
Lets look at the UI design process and how we can integrate it in all the phases.
User Interface design process
User interface development process can be categorized into 4 phases as below:
- Research and Analysis
- Design and Branding
- Prototype Development
- Production
This structured process can maximize communication between the company and its clients, lower development costs, and most importantly deliver the best user interface design.
This process is flexible and modular, thus allowing client to determine which phase are appropriate for their needs, and can be applied to both the creation of user interface for new applications as well as enhancements of existing applications.

2.1 Research and Analysis
Process:
In traditional Research & Analysis phase, two categories of information are gathered and analyzed by the user experience team.
1) Information about the users of the application
2) Information about the application itself
This establishes the context for User Interface design and this context informs the entire design process.
Additionally, during this phase as a part of UI development, UI developers can start researching about current market trends, UI technologies, and competitive analysis. This research can help the UX team during the consecutive phase of SDLC and both UI and UX team will have clarity of things possible and impossible and LOE (level of effort) required during development.
For existing applications the Research & Analysis phase also determines the strengths and weakness of current UI.
How:
The user data is gathered answering the following questions
- Who the users are?
- What are their skill levels?
- What are their qualitative expectations for the application?
- What task do they need to perform with this application?
- Under what environmental conditions will they use this application?
- Under what time conditions and constraints will they use this application?
The application information is gathered answering the following questions
- What problem is the application intended to solve?
- What are the functional purposes of the application?
- What are the operational purposes of the application?
- What are the marketing purposes of the application?
- What are the user interface specifications of the application?
- What are the software, hardware and graphical requirements to create and deliver the appli-cation?
The User Interface trends can be gathered answering the following questions
- What are the current UI trends?
- What are the current UI design patterns?
- Which are the latest tools and technologies being used?
- What tools and technologies are our competitors using?
- Pros and Cons of using any latest technology for the current product?
Deliverables:
- Personas
- Competitive landscape
- Usability goals
- Functional and non functional specifications
2.2 Design and Branding
Process:
During the design and branding phase, User Interface design is created that addresses the specific needs identified in the research & analysis phase and creates, revise or leverage the applications brand.
Involving UI design into Design phase
During design phase UI developers can work closely with the UX team to define the User interface (Wireframes, Visual design). A User Experience team may think out of the box while creating wireframes and visual design, but may not be aware of challenges, possibilities and limitations. Involving UI developers in this phase may ease the process, as UI developers understand the technologies and possibilities. This will reduce the last minute efforts from the UI developer’s side and additionally both the UI and UX team, as well as client will have a clear expectations set.
Deliverable:
- A discussion of the design philosophy and strategy used to create the UI design, including an explanation of how research brief informed the UI design
- A comprehensive set of screen layouts illustrating every part of the UI design
- Key screen that present the visual design and branding for the application.
Wireframe:
Wireframes is presented as a comprehensive set of screen layout consisting of Black and white sketches of every screen in the application. At this point the visual and graphic design processes have not yet begun.
Wireframe is an important step; because it helps the clients focus on how used will interact with the application rather than become entrenched in relatively subjective issues such as color or visual style. It enables us to postpone those and other subjective issues
By necessity this is a cyclic process, and once the screen layouts have been approved, a visual design is created that is informed by the UI design.

Visual design
Visual design process begins with the branding of application.

2.3 Prototype development
Process:
Using the approved design document as blueprint, prototypes of the User Interface designs are created. Based on clients needs the prototypes are created using HTML or flash. Prototypes can be low fidelity or high fidelity based on user needs.
The scope of the prototype created during this phase is tailored to the specific application and the user testing requirements. Some applications require a comprehensive click through or working model of the entire interface, while others only require a prototype of core functionality.
The prototype serves as
- A communication and review tool for the client
- An implementation guide for the software developer
- A user testing tool
- A working prototype enables clients to see how the user interface will perform without having a commit programming resource
Another benefit to a working prototype is that it dramatically improves the communication among UI design, marketing and application development teams, as well as any other key stake holders since marketers, designers and developers often think and use language differently, having a functional prototype leaves fewer issues open to interpretation or misunderstandings
Prototypes are infact an opportunity to identify any remaining user interface issues. Should there be design document and prototype are modified to incorporate changes prior to final approval.
Once the prototype is approved, development team can work to implement new user interface design quickly and efficiently without interrupting the development process to correct design is-sues.
The utilization of prototype also has significant marketing benefits. Since the prototype closely stimulates the actual application, extensive user testing can be one before the programming starts, which also produces significant cost savings. Additionally positive user feedback is a validation of design, confirming that the application delivers a user experience that meets or exceeds customer expectations. This positive feedback can be used for both internal and external marketing purpose, by building confidence in the rollout and promoting user adoption.
Deliverable: Interactive prototype of the new user interface
2.4 Production
A proper UI and UX team collaboration and Integration of UI design from the starting of SDLC can reduce lot of efforts and confusion. Also it can help in successful and timely delivery of the products in any company without any slippages and can increase customer satisfaction. Additionally it can help building ongoing relations with our clients.
Stay tuned for an interesting blog soon on “Ethnographic and demographic influence on design “


#1 by Fred on July 21, 2009 - 3:53 am
What a great article about UI development! I think you’ve answered the what, why and how for prototyping.
Prototyping is really useful, and it can be represented as different forms: sketch, design document, working prototype etc. Creating them may take a lot of workload but they are just worth it.
A few days ago I’ve post a question on stackoverflow to ask if there’s a way to create all prototypes together, and I found that ForeUI is a really good tool to do the job.
#2 by Latish on August 4, 2009 - 5:36 pm
Great post Shyamala!
I was initially put off by the lengthy content, but it was a great read. As a web developer of primarily intranet apps, I have not seen these steps being taken as often as they should be. Perhaps developers working on internet facing sites get to follow these processes on a more regular basis.
#3 by Latish on August 4, 2009 - 5:52 pm
May I also recommend making the “Subscribe to RSS” link more prominent on your blog. Its kind of lost under Meta/Enries RSS.
#4 by Mallesh.N on November 9, 2009 - 8:23 am
Hi Shaymala,
First of all i would like to convey my thanks for the wonderful article on User Interface in SDLC.
I had downloaded this article for my reference long back, since i have practice of downloading articles which ever i feel useful.
Three days back i received call from a major IT company for a telephonic interview, since it was friday they had fixed it for monday.
To prepare for interview i was scimming through the articles i have in my sytem and found your article as useful matches exactly for my profile and some changes according to my needs to face the interview.
Today i did my interview very well and it worked out 100%.
even though they have not confirmed the result i know i will be through.
From today i will follow you as my guru in my future efforts of usability.
If possible guide me to next steps i have to take, to get this job.
You know i searched for this article on the web to convey this message to you.
Thanks a lot.
#5 by shyamala on November 19, 2009 - 7:50 am
Thanks Mallesh for reading my article. I will definitely guide you for any efforts required in usability, you can mail me anytime and I’ll be happy to help.
All the best
#6 by Santosh on May 13, 2010 - 6:28 am
Hi Shyamala,
Great blog and a very interesting read on UI Development. I followed you through LinkedIn. I thoroughly enjoy creating UI for web, desktop, mobile and currently working on my pet projects. Your article is going to strengthen the basics and get me going.
#7 by Karan Vyas on April 21, 2011 - 4:56 pm
Hello Shyamala,
I was just searching some aricles or tutorials regarding the UI development for website. I came through this page and read your article. It was very nice and some of the points mentioned were very interesting. Actually i am a web designer and was to prepare a presentation for a techincal session which i would have to deliver after two days from today’s date. This article has helped me a lot in this. It has given wings to my ideas and support to other points also. I would be very happy if you post more on this topic of UI development.
Thanks.
#8 by shyamala on April 22, 2011 - 11:12 am
Thanks Karan, will surely post more UI related posts