Stages of a Successful UI and UX Design Project: From Concept to Delivery

UI and UX design delivery

The demand for User Interface (UI) and User Experience (UX) design is continuing to grow, and showing no sign of slowing down. Even within the realms of UI and UX design, you will find disciplines dedicated to creating a better online experience for everyone. From accessibility to UX writing, user research, workshops and rapid prototyping. It’s safe to say that UI and UX design covers a vast area that far exceeds just post-it note wireframes (although we do that, too).

While we’re sure you don’t need convincing of the efficacy of UX, the positive impact of a properly implemented design strategy is outstanding. Research shows that strategic UX design can boost conversion rates by as much as 400% and can cut product development time in half! So why are 55% of companies still reluctant to adopt UX and UI practices?

It’s possible that brands simply don’t understand the impact of great UI and UX design processes, and the importance of implementing the outcomes of extensive research rather than making assumptions of their users.

Like many digital disciplines, UX and UI design is often subjected to gatekeeping by agencies. However, in reality, the more you know about the process, the better you will understand your agency’s approach and the importance of UI and UX as a discipline.

So, while there’s no such thing as a ‘typical’ project, we’ve outlined some key stages that we always endeavour to include when approaching a new UI and/or UX design project.

Project Discovery

The first and arguably the most important stage of any project - not just UI and UX design - is the discovery process. At KOMODO, we dedicate this phase to immersing ourselves in your business, understanding our challenges and getting to know key stakeholders. Without thorough discovery, your project will struggle to get off the ground.

We always take an active listening approach - meaning they take the time and consideration to absorb your environment and ask the right questions to determine what your audience really needs from the end product, and how we can work with you to deliver something that goes above and beyond your user’s expectations.

‘As-Is’ & ‘To-Be’ Process Mapping

Once you have fully explored the discovery phase, we’ll start to map out the existing processes. If your current set-up has evolved organically over time, you might not already have “As-Is” mapping and analysis, so this is where we start.

Then we take the ‘As-Is’ and start to identify the problems, such as bottlenecks and areas with an under-developed resource. This explorative stage will form the basis of the ‘To-Be’ processes. While nothing is set-in-stone at this point, we will set out a loose structure that aims to remedy any significant pain points from the as-is design.

It’s not just about the flow of the digital product, either, but the entire asset. Take a website, for example, how does it function as part of the organisation’s wider strategies? Is it a source of enquiries, or do you encourage phone calls or emails? Upon receiving an enquiry, what happens next?

It may seem like this is a far cry from UI and UX designer’s role, but it’s our responsibility to ensure the end product meets the needs of the end-user. And if the organisation fails to have the right infrastructure in place to support the end product, then now is the time to identify and remedy it - instead of waiting until launch day to discover there’s no one to man the phones!

UI and UX User Research

We then carry out extensive UI and UX design research, including identifying the key players in your market, as well as casting a wider net for inspiration in other sectors. This will inform the look and, most importantly, feel of the app or site, and forms the basis for the wireframe prototype.

UI and UX research is more than just assembling a mood board of like-minded brands - it’s the stage where we reach out to real customers for feedback on the existing product, other brands they advocate and their ideal end product. That’s how we turn our research into actionable UI and UX insights.

The research phase is typically split into two key areas: quantitive and qualitative data. Quantitative data is the collection of quantifiable data from your users, including user demographics and habits.

While qualitative includes non-numerical data, such as customer interviews. Here you gather opinions, motivations and inclinations from your users so we can create a product that is not only good “on-paper” but exceeds user expectations every time.

The best approach to user research is to use a mixed-method approach to both quantify wider opinion for validity and create a rich contextualised view of your customers’ attitudes and behaviours.

We’ll break down wireframes into feature sets, such as home, onboarding, landing pages etc. And build out a list of required assets from there. This is where we typically carry out accessibility testing, including checking brand colours and features against accessibility standards.

Prototyping, Testing & Feedback

Everything is starting to get real. We take everything we’ve learned so far and deliver a tangible prototype for testing with users. Here we can take a step back and determine whether the product in its current state is on the way to solving the issues identified in stage one. That is to say, is it meeting the needs of the users at every juncture?

There are two versions of the prototype:

• Low Fidelity (Low-Fi)

• High Fidelity (High-Fi)

Paper-based and initial designs are Low-Fi prototypes that begin to flesh out the look and feel of a product. High-Fi prototypes are closer to the MVP or a product release.

We build prototypes in InVision, a tool that allows us to create something that appears exactly like the end product - without the coding. During user testing, if a user picks out a flaw or necessary change they can add a comment easily. Then we can make edits without rewriting any dev work.

An interactive prototyping phase is also important for organisations that require stakeholder approval or funding sign-off.

Development Handover

This is where the development team take over and start to turn the digital product into a reality. Well, implement any required changes identified in the prototyping phase and export assets to you and the developers.

Now we know for sure that the UI and UX design meets the expectations of users, we can get creative. We can take your product to the next level with design assets such as iconography, micro-animations and video. However, we don’t let ourselves get distracted by the final flourishes until we’ve nailed the foundations.