My Web App UI/UX Design Process

 
web apps.jpg

Over the years, I’ve worked on many web apps and dashboards for six, seven, and eight figure businesses - most of these were in the Tech and SaaS space.

On top of that, I’ve designed more than 12 Dashboard UI Kits which have helped thousands of companies to kickstart their projects.

I learned a lot in the process. 

It’s fair to say that after designing more than a thousand web app UIs I’m able to recognize some common UX patterns – patterns that are useable in most apps, no matter what type of web app project I’m working on.

That’s why I’m a firm believer in using proven design processes that deliver concrete results. And, of course, I am always improving them month after month, year after year.

In this blog post, I am sharing with you the design process that I currently use. I developed the process after working as a Senior UI/UX Designer for over eight years.

Having said that, I want to make a brief disclaimer before starting:

Different clients have different needs, so please don't see this process as a one-size-fits-all solution. I am outlining each and every stage that I usually go through for any project that needs my help to get from point A to Z. However, some clients may only need help with a specific portion of this process and won’t need to go through every stage. 

This design process uses similar principles for creating a web app UI/UX design from scratch, or for bringing a current web app UI/UX to the next level (often called an app redesign).  

Let’s start with the very first stage of my design process:


  1. Information and research

This is a crucial part of the project that many beginners (myself included when I first started out) don’t get right.

This stage is all about learning and understanding as much as I can about my client needs, goals, and pain points to create a clear picture of the ideal direction we’ll move towards.

This is usually covered with a discovery call and/or emails. It's a general audit where I ask specific questions to learn more about the client’s business. I want to have a clear idea about things like the business’s key information, their target market, their competitors, their message, values, goals, pain points and culture.

I will then continue to research outside the information provided by the client, to learn about their industry and market because I want to deeply understand the context in which we’ll be working, to assure the success of the project. 

Information and research.jpg

2. Visual inspiration

This stage helps with the visual and UI Design part of the project.

I ask the client to show me examples of either competitors or other companies design shots of the style they are aiming for with the project.

This helps us to be on the same page right from the very start.

Visual Inspiration.jpg

3. Setup of project files and documents

When I first start working with a client, I always setup files and folders that will serve as universal and evergreen sources of truth.

This may include documentation/assets that will be sent over by the client, project files, moodboards, UX audits, etc.

Because I use cloud collaborative tools, this is a pretty straightforward and fast process. However, it is still very important to nail it from the start, as I believe that the processes and workflows are the keys to success.

Setup of project files and documents.jpg

4. Strategy

This is where the design phase starts.

Having done a lot of preparation work in stages one to three, the strategic direction is usually already acknowledged by both parties.

This stage is really about transitioning all of the knowledge and ideas into the actual design project. This usually entails discussing the screens and project flow at a high level.

User personas may be included in this or the previous stages since they are a powerful asset to use.

5. Low & High-Fidelity UX Wireframes

In this stage, we create the wireframes for the web app screens based on the strategy we outlined.

This can be done collaboratively between the client and me over a shared screen call, where I draft ideas into a low-fidelity (or high-fidelity) wireframe. Alternatively, I can create the wireframes based on the client’s previous information and share them with the client later.

Every project is different, so sometimes it’s better to do a call or go straight into a high-fidelity wireframe before producing a low-fidelity one: it all depends on a series of variables.

My services are always tailor-made to be delivered according to my client’s specific needs, so I always suggest the option I would personally recommend for their particular project to make the workflow smooth and fast.

Low & High Fidelity UX Wireframes.jpg


6. Wireframe approval and revisions

At this stage, all of our wireframes will be in Figma (my design tool of choice), Sketch or Adobe XD.

Collaboration and revision requests in Figma are very easy since the client has immediate access to the full project with a shareable link and also has the ability to leave comments on the wireframes directly on the screens. I am also available to discuss them over a call.

If the project requires the use of Sketch or Adobe XD, I can offer similar easy workflows with world-class tools like InVision, so that the revision process is always easy and straight-forward. Once the wireframes are approved, I start the UI and visual design stages 

7. Design System (Optional but recommended)

If it makes sense for the type of project, we’ll use and structure a design system in place.

A design system has had many definitions over the years. So to put it into plain language it is a structural asset which helps us create a consistent visual language for the design of the entire project and make branding or UI/UX adjustments, at scale, in a very fast and consistent way.

For example, if we set a secondary color in the design system and make a change to that one color, the same changes will apply to all of the screens that have elements with that secondary color, no matter whether it’s a two or two hundred screens app.

As you can imagine, this allows us to maintain a high level of consistency and efficiency when major adjustments are needed.

A Design System for a responsive app

A Design System for a responsive app

8. Visual UI direction

When we have the approved wireframe for a brand-new web app or a web app redesign, the following stage establishes the visual UI Design direction. This stage is crucial because the very first design we make sets the tone for the entire brand and web app project, so it’s important to get this stage right.

That’s why I always like to offer the client a few concepts (usually two or three) of one important screen so that we can then discuss and choose the concept that resonates most strongly with the brand’s vision and identity.

Some tweaks may be needed for the chosen concept, and once we’re happy with the visual direction, we’ll be ready to move on and apply the same UI design to the other screens.

Testing different color palettes and font families in a client’s web app

Testing different color palettes and font families in a client’s web app

9. Prototyping

Depending on the project, we might also consider creating a live prototype to see and test the web app before writing a single line of code. It’s a great way to test UX flows.

10. Revisions + Team Feedback

Once the final UI design screens are done, the revision and feedback process begins.

This can be done by an individual client as well as the company’s team members. Tools like Figma and InVision makes it very easy and fast for clients to request revisions, no matter how large the team is or where they are located in the world.

I often work with remote teams and revision requests are usually done via texts or via a shared/screen call – in whatever way makes sense.  

1-2.jpg


11. Developer Hand-off

Using Figma (or InVision if using Sketch or XD) makes developer hand-offs of my designs a breeze - it’s a fast, efficient, and straight forward process.

I share the project with a client’s developer(s) and show them exactly how they can easily and autonomously extract design assets, CSS code, and even see the exact layout, size measurements, and distances, all without me needing to be involved in the process.

I usually show them all they need to know in a 3-minute video recording that I produced that they can re-watch at any time.

Usually, after sharing the short video tutorial, they are able to continue by themselves as they are equipped with everything they need and I never hear from them again. However, I make it very clear that if any issue does occur I am always happy to help them, either via texts or with a shared screen call.

Similar results can be achieved with inVision, Marvel and Zeplin, all tools which I used extensively in the past.

developer handoff.jpeg


12. Market feedback 

At this stage, the project is done, and we’re happy with the results.

Now it’s time to push it into the market and gather data and feedback from real users. This is a very important stage as we’re able to learn the actual responses and see the results.

Depending on the project, this stage can include a variety of elements such as user testing, A/B testing, analytics data, heat-tracking, and much more.

It really depends on the project, but the key thing to remember is to observe what users want and what they are struggling with and to come up with solutions to improve the UI/UX design incrementally to make it a better product as time goes on.

In Conclusion

Every client’s web app project is different, and special attention needs to be paid to finding the optimal workflow and process that fits the project’s specific needs.

If you have a project in mind or would simply like to discuss the optimal way to bring a new web app to life or a current web app to the next level feel free to book a discovery call on the link below.

I hope you enjoyed this article. If you have questions feel free to shoot me an email – although I have a busy design schedule, I always try my best to reply to emails within 24 hours during working days.

 
pierluigi.jpg
 
 
pierluigi giglio