Agile User Interface Design and Information Architecture from the trenches

I was a Technology Director in a large web design company many years ago, and they failed to adopt Scrum. There were numerous management dysfunctions, however the Creative Managers were the most resistant to change. Often this resistance was a case of the creatives not wanting the reality of building enterprise software to hinder the design concepts they were making in Photoshop or Illustrator. When these design concepts met the reality of enterprise architectures on the development floor there were major implementation problems. This dysfunction, along with high pressure, unrealistic delivery dates and long hours resulted in missed deadlines, high stress, low code quality, and 40% annual turnover in IT staff. Being at this company for a short time spurred my interest in User Interaction design (UX) and Agile, and I have since found basic solutions that work when people want to do UX and Scrum. Of all the disciplines needed for creating software, and especially web sites, people coming from UX background are often the slowest and most resistant to adopting Agile principles and practices. I think this comes in part from the influence of Allan Cooper’s book “The Inmates Are Running the Asylum.” However Cooper, himself a practitioner looking for solutions that work, embraced Agile and Scrum since 2008, if not earlier.

Here is the way I work with UI Designers and Information Architects who want to work Agile:

  1. The Product backlog and its priorities drives all the work. We work from business priorities not UI priorities.
  2. Sketch the highest level level UI for the site. No drill downs into buy flows, just top level.
  3. Look at the backlog and start thinking about what the team will need for UI half an iteration ahead.
  4. Make paper prototypes (sketches, paper menus, paper buttons) to support upcoming user stories for next sprint. Don’t embellish with new features the designer thinks are needed. KISS. Include validation and other acceptance criteria for data fields.
  5. Create and maintain a style guide and reference it as required. Create and use reference page templates as required.
  6. Combine 2,3,4 above into a 1 page design spec. to support the UI needs of a user story.
  7. Review prototypes with PO, QA and lead dev a few days before sprint planning, ensure they think it is good enough and it is testable. Keep notes regarding potential trade offs.
    1. Check in design docs, version them.
  8. Participate in sprint planning with rest of team.
  9. Work with team on implementation, clarify details of design (dimensions, locations, behavior, etc.). Work with QA on test plans for new UI. Help build UI (HMTL/CSS/PHP/Javascript etc) in dev IDE, pair with dev as they wire it up. Pair with QA to run test cases and implement automated UI testing (see tools like Rspec, Cucumber, etc).
  10. Repeat for every sprint.

To recap the UI designer starts half a sprint ahead of the team, helps the Product Owner with UI issues, and creates very lightweight and flexible prototypes as input to sprint planning. The rest of the work is done within the sprint. I have found this is “just enough” lead time to have thought through UI issues without creating solutions in a vacuum away from the team.

Additional tactics:

  • Create a style guide for the team and have them read it, listen to their feedback and continuously improve it.
  • Create templates: every page is not a unique creation. Refer to those templates in prototypes and design spec.
  • Break dependencies between UI/layout and business logic at beginning of the iteration. Agree on data/fields/controls at beginning so business logic can be rendered to a very simple layout free page.
  • Test your paper prototypes with users by asking them to do certain operations and then observing the resulting actions. Don’t worry about big usability testing at end, do it often and informally with people who are easy to access and know enough about that business.
bad idea ui tool

AVOID COMPLEX HIGH FIDELITY USER INTERFACE DESIGN TOOLS.

They really slow you down and lock in decisions far too early. These decision are often wrong.

Lack of detailed knowledge about the customer needs and technical limitations can result in an unstable UI. This lack of understanding results in an unclear product backlog and user stories coming into the sprint. To cover these gaps the UI person has to go find out the missing details to create the design, which slows them down and results in numerous design changes during the sprint. The UI designer is making up for lack of knowledge or lack of effort on the part of the Product Owner. Fix this root cause by getting the Product Owner to improve the product backlog so the designer and the team have better user stories and acceptance criteria coming into the sprint. User Interface work is simply another form of software requirements, as are software architecture, features, and test plans. All of these activities can be done in a “just in time” and emergent fashion and result in consistent architectures and usable interfaces. As User Interaction designers it is important to focus on the end result, great software, and to help the team realize that goal. The UI design artifacts: wireframes, clickable concepts, specs, etc. are often over-valued by UI designers. These are tools in our toolbox and are not essential. Choose the tools and the collaboration model that takes the least amount of time and offer the greatest impact on the goal of delivering great software. That goal is best achieved by working side by side with team members building the software. Many are doing it today. However it does require people to change their behavior, and that is likely the hardest thing to do.

CTA-arrow-right-img

How Can We Help You?

Let’s get started!

CTA-arrow-right-img

How Resilient & Adaptable is Your Organization?

CTA-arrow-right-img

Get the Latest Agile & Scrum News from Innovel.