How to Redesign a Large Web App — A Simple Guide

Nussi Einhorn
4
min
How to Redesign a Large Web App — A Simple Guide

You might be in business since 1980. Over the years, you’ve built out software. Now it’s 2020; you need to keep up. But redesigning a large enterprise software can seem incredibly daunting!

In this short article, I will give you all the critical steps so your development team can speed up the release of your polished new version!

1) Sketch your new ideas

How?

🔹 Use pen and paper:

It does not sound so cool. But drawing your new ideas on paper will go a long way. It helps you bring out ideas that are lying under the surface.

🔹 Let everyone innovate, you decide:

Your team is very creative. Not only the developers and designers. Let them all sketch and ideate how the new version of your software will be designed.

🔹 Choose the direction:

After your team has come up with the new concepts, now is your time to review them and choose the best part of each idea. Then compile the new vision on one sheet and hang it on the wall for all to see!

This step is straightforward but critical!

2) Create a feature mindmap.

When redesigning a feature-rich software, a mindmap will be super useful for the design and development process.

Here’s how to create one:

🔹 Choose the tool:

There are many great tools to help you create a mindmap. Try Miro or Mural — they are easy to use, and your team members can easily collaborate with you.

🔹 Start with the key areas:

The mindmap branches should begin with the key areas of your App. Example: Invoices, clients, orders, etc. Then you’ll branch these out to sub-features and micro-features.

Start to create your Software mindmap today!

Let me know how it’ going!

3) Create a basic design system.

This is the secret to designing a cohesive-looking app.

Simple steps:

🔹 Choose a color palette:

Choosing a color pallet will make your App look branded and pulled together. Users like to see the same familiar colors throughout a large app. Choose one primary color and 3–4 secondary colors.

🔹 Settle on a font:

The topography is key to great design. First, choose a creative font your team will be using throughout the App. Then create a small style guide specifying the key font sizes and colors — your App will start to come to life!

4) Create common components.

In a large enterprise app, you’ll be using a lot of views over and over again. Like modals, date pickers, drop-downs, etc. Let’s define some components together:

🔹 Key Layouts:

Design templates for the most common layouts on your App. Think of Tables, popups, input fields & buttons. This will serve as the glue to make your App look cohesive.

🔹 Don’t forget the small things:

Design the toaster notifications, loaders, and button shadows. Theses little things will secretly differentiate you from the competition! Shhshshsh.

Does your application have a design system?

Is it simple to use?

5) You should finally make it responsive. (It’s not that hard)

If you are redesigning an old web-app, now is the time to make your App responsive for Desktop, Tablet, and Mobile. Now, it might seem daunting, but I’m here to simplify it.

How?

🔹 Work on the main features first:

Making the main features in your App responsive will inspire you to make the entire App responsive.

🔹 Launch before it’s fully responsive:

Making an app responsive can take some effort. This should not hold you back from releasing an unresponsive version. Once you launch, you’ll be more motivated to make it responsive.

🔹 Design page-by-page:

Take one page at a time. You’ll see, it’s easier than you think. Start with the most used pages and then keep on going to the less used page. Before you know it, you entire app will be responsive.

Is you App cross-device responsive?

I hope you enjoyed this article. Show it to you Front-end devs and unlock their super design powers!

— -

Check out our UX Design Portfolio here

Book a Free UX Discovery Call

More Guides