It can be rather tricky introducing user interface improvements to a big old piece of SaaS. Redesigning one section may cause a problems in other areas, some design elements in the platform may be inconsistent, legacy code may be difficult to update without upsetting other legacy code… and so 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 breath 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 Very Start
It’s best to involve all stakeholders in your design process from the very outset. Stakeholders will include your team, management, founders, investors and even your customers and users – essentially anyone who has any involved 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 making interface decisions. It’s imperative that these parties communicate effectively in order to reach a successful outcome.
One reason for this is that if communication is strong from the outset, everyone will understand why interface decisions are made. It’s important to get your developers on board early on 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 this can steer your focus on the design process.
How about the limitations? How much development time can be allocated to the process? Deciding limitations will keep you on track. Remember to always overestimate how much time will be required to do a task – it’s always longer than you think.
3. Determine the Life Cycle for your Interface Improvements
How long will the updated interface serve you? It’s worth considering this as you plan to invest time and resource 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.
4. Prepare a Project Spec
You don’t need to go to town on this and outline every minor detail, but it really helps all involved to prepare 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.
A simple spec should outline the work that will be involved, team members and their responsibilities, timescale, resource allocation (people, time & cost), milestones, review dates, ideal outcomes, wins and limitations, etc. Above all you need to clearly state why the project is being done and what the desired outcome would be. And whilst you define the desired outcome this should reflect a user benefit rather than one about your company. For instance a desired outcome
Now you have your project spec ready, it should be shared and reviewed by 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 handover 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 gant 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. As you can see there quite a few tasks you may need to account for. A big part of this is done to ensure your design designs are not just made up by designers or wider team preference but are actually driven by user behaviour.
Wireframe any bits that need wireframing. Review designs in sprints. Early and often, plan reviews with design team. Understand consistency and how design phase will effect any other
6. Review Interface Designs with Stakeholders
Designs should be presented to stakeholders and not just sent or shown to them out of context of why those design changes have been made. If the changes are based on real user data then stakeholder buy in will be more easily achieved. Feedback is important from stakeholders because they will have important feedback from other areas of the business. Sales can input with objections they are receiveing from prospects, marketing can feedback with messaging they need help with, and developers can feedback on feasibility of building the product.
8. Feed Design Thinking into the Development Process
Now that the designs are ready and signed off, it’s time to make sure they make it successfully into your product. Quite often design thinking can get lost in translation, from sketch files to the users browser and the biggest cause for this is lack of care and understanding between the teams.
If design work is presented 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 designers intention, leaving the designer demoralised and the developer detached from the process. This is often made worse in cases where deadlines and budgets are being squeezed. But the good news is that the earlier steps in this process will safeguard against this, if followed effectively.
After 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 it’s lifespan. However, if your UI process is well executed you’ll find that you can reduce the requirements for reworking your designs, whilst also improving the overall quality of your UI.