It can be rather tricky introducing UI design improvements to a big old piece of SaaS. Redesigning one section may cause problems in other areas. For instance, some design elements in the platform may be inconsistent, legacy code may be difficult to update without upsetting other legacy code… therefore, the whole process can become an unwanted burden.
Hopefully, your situation isn’t quite this messy but from experience, I know how easily this can happen. The good news is that no matter how difficult it gets to breathe world-class interface design into your product, there is always a way you can begin. By identifying your starting point, planning your approach and building a positive and collaborative team you’ll find that little by little you’ll enable those steps towards an interface that wows your users. In this post, we’ll take a look at an effective process for doing this.
1. Involve stakeholders from the start
It’s best to involve all stakeholders in your design process from the beginning. Stakeholders will include your team, management, founders, investors and even your customers and users. That is, anyone who has any involvement or interest in the businesses. This will give you a great perspective before starting the process. You’ll be aware of the different outlooks and perspectives of the groups involved and you’ll have a sense of the challenges and opportunities that lie ahead. It can serve as a kind of due diligence process.
Some of the stakeholders will be paying for the design and therefore responsible for the outcomes too – albeit indirectly. It may be a management team or your investors that hold the purse strings, but product managers and designers are making interface decisions. It’s imperative that these parties communicate effectively in order to reach a successful outcome.
If communication is strong from the beginning, everyone understands the interface decisions. It’s important to get your developers on board early, too. Explain why the changes need to be made and get their input on how challenging proposed changes might be to develop.
2. Identify quick wins and define limitations
What would you classify as a quick win for your product interface? Are you looking for greater utilisation of your application? More intuitive journeys or a stylistic refresh? Perhaps you have several. Take the time to define the quick wins so that they can drive your focus on the design process.
What about the limitations? How much development time you can allocate to the process? Deciding limitations will keep you on track. Remember to always overestimate how much time the task will require – it’s always longer than you think.
3. Determine the life cycle for your UI design improvements
How long will the updated interface serve you? It’s worth considering this as you plan to invest time and resources into these changes. Will it buy you a little more time until you need a bigger overhaul of the application? Or do you already have a well-designed and up-to-date UI that just needs additional touches?
Knowing this information helps set the expectation of your development team by enabling them to understand the scale and impact of the work they will be undertaking. They’ll be able to feed into the project with relevant suggestions and advice on the best approach to take.
4. Prepare a project spec
You don’t need to go to town on this and outline every minor detail, but it really helps everyone involved to have a spec for your project. It will keep the project on track by helping to avoid scope creep remain within your allocation of time and budget.
In the spec, outline all the work involved. These may include team members and their responsibilities, timescale, resource allocation (people, time & cost), milestones, review dates, ideal outcomes, wins and limitations, etcetera. Most importantly, clearly state the aim of the project and the desired outcome. And whilst you define the desired outcome this should reflect a user benefit rather than one about your company.
Once you have your project spec ready, you should share and review it with all parties before the project takes place. Again, this ensures that expectations are set and everyone understands the process before it gets underway. This will increase the likelihood of success and makes it easier to regroup if anything starts going off track.
5. Plan the Design Phase and Execute Accordingly
It’s best to plan out the design phase. How long do you have, when will you be reviewing progress and when do you aim to sign off and hand it over to the development team? If you plan this out you’re more likely to get updates pushed out in time and more likely to achieve the focussed improvement you’re looking for.
A simple project Gantt works best here. It may involve a little detail but it allows you to account for tasks and factor in elements you maybe hadn’t thought of yet. A project Gantt for your design phase may involve time allocated for conversations with users, redefining a user journey, a workshop with a focus group, wireframing and UI design improvements. As you can see there are quite a few tasks you may need to account for. A big part of this is done to ensure your designs are not just made up by designers or wider team preferences but are actually driven by user behaviour.
Wireframe any bits that need wireframing. Review designs in sprints. Early and often, plan reviews with the design team.
6. Review interface designs with stakeholders
You should present the designs to stakeholders and not just send or show them out of context. Explain to them why those UI design improvements have been made. If you base changes on real user data then you can achieve stakeholder buy-in will be more easily. Feedback is important from stakeholders because they will have important feedback from other areas of the business. Sales can input with objections they are receiving from prospects. Marketing can feedback with messaging they need help with. Developers can feedback on the feasibility of building the product.
8. Feed design thinking into the Development Process
Now that you prepared and signed off the designs, it’s time to make sure they make it successfully into your product. Quite often design thinking gets lost in translation from sketch files to the users’ browser. The biggest cause for this is the lack of care and understanding between the teams.
If you present the design work effectively to your development team, they will understand the implications behind static design files. Many times I’ve witnessed talented designers painstakingly resolving user interactions only to fail at communicating just how they should work (and why) to the development team. Often the execution can seem a little rudimentary in comparison to the designer’s intention. It leaves the designer demoralised and the developer detached from the process. In cases where deadlines and budgets are being squeezed, this is often made worse. But the good news is that the earlier steps in this process will safeguard against this if followed effectively.
After the handover, ensure you encourage collaboration between design and development teams. Feed views from the designers into development scrums and ensure sprints are not done in isolation. Review with progress with Product Managers and review development progress with designers too. Allow time for testing (both for quality assurance and usability) and refine any user interactions that need reconsideration.
9. Debrief and Discuss Next Steps
Once your app has a high-quality aesthetic, has elegant user interaction and a strong user experience you’ll be in a great position. But you’ll always need design updates, new features and further UX and UI improvements. In the future, you may revisit your UI but hopefully, your current design will have a lifespan that serves your users for several years. The next time you may do a full UI redesign is when you rebrand, release a new version of your app, or the UI becomes a little dated having reached the end of its lifespan. However, if you execute your UI process well, you will see that you can reduce the requirements for reworking your designs, whilst also improving the overall quality of your UI.
Need a hand?
If you need help with UX or UI, please reach out to us at UserActive.io to book a no-obligation call to discuss your UI/UX challenges with a SaaS expert. We’ll offer advice on your current situation, provide a steer for your project and see if we’re a good fit to help. You can also book here.
