Agile Design Thinking: A Hybrid Method for Digital Product Design

Published in ATÖLYE Insights · 8 min read · January 31, 2019

How might we plan a complex design project with agile and design thinking frameworks?

Author: Gunes Sayin, Project Manager

Editor: Deniz Yazıcıoğlu, Communications & Research Assistant

Are you a hidden product owner in a digital design project?

Are you exploring new ways of managing diverse design-technical teams?

In that case, you might find some takeaways from ATÖLYE's journey on designing a new finance application for 500K+ users, to be launched this year.

What was the Project Brief?

We started working on SME strategy initially with the bank wearing the hat of the strategic designer. In the strategy formulation meeting held with senior management, we discussed in detail what is required to do in Turkey, in light of the direction of the banks' global strategy. Then we discovered in 2017 in a 4- month design research project that functional and design needs of SME and Corporate Banking users are quite different from those of personal banking.

We specified the user segments and located new platform as the main squeeze supporting full-day banking needs throughout, by extending current function set. We specified 4 new function areas for that. We started the design phase of the software in 2018 by including within the scope the two of these functions having the highest priority. We will emphasize in this article on this software design project made in 2018.

ATÖLYE's mission was to deliver a brand-new digital banking experience for Corporate and SME banking customers, from new flows and application architecture to the UI designs and animations via applying design thinking approach.

Our go-to resources include the online design thinking materials of IDEO (IDEOU, 2019), The Sprint Book (Knapp, 2016), research articles on Medium - especially about different applications of agile rituals/design activities - and IBM's Design Thinking articles (Roach, 2016). Below, we explain how we combine and recreate a project-specific method.

Since our project involved both the reengineering of all processes in the application as well as the first-time digitalisation of many features, it had to include many internal stakeholders within the bank; such as compliance, legal, information security, cash management-credit departments and so on. For the sake of better time management, we have refined the current design thinking and agile frameworks and came up with a detailed version of design thinking steps.

The client expected us to deliver by feature sets within ten months, so we allocated 1–2 months per each feature set. We designed and called them "agile design cycles" which worked as long design sprints.

These cycles involved all the steps which are: problem definition, lightning desktop research, ideation, prototyping and testing in the field to gathering stakeholder approvals and finalizing the UI and animation designs. The steps of the cycle were agreed upon with the client.

The pre-set durations per each set acted as a realistic deadline to be met and tool for successful time management to meet the final deadline even though the neither we or nor the client met all specified deadlines within the cycle.

Defining the steps

Step 1 - Problem Definition, Lightning Desktop Research, Ideation

In this phase, we have combined the following activities:

• Analysis of the "AS IS" process where we collaborate with the client
• Understanding the needs of the users through 1-to-1 interviews
• Drawing "AS IS" user journey and highlighting pain points as input to the ideation sessions.
• Desktop research for global and local benchmarks for critical references and inspiring solutions.
• Ideate with design, IT and business teams for the "TO BE" process.

Step 2 - Consensus & Brief

Since this was a banking application, and we were redesigning all processes, we needed to get feedback on the "TO BE" process' by further internal teams. Because the compliance department should approve every new process and related product head, the feedback from the bank's internal teams had high importance.

Meanwhile, the design brief was prepared to be handed over to the UX designer.

Step 3 - Wireframe

Wireframe designs had to change every 4–8 days depending on the complexity of the feature set. However, setting a time frame for this phase helped us to think within MVP perspective, holding on to priorities and leaving some details for the UI phase.

Step 4 - Review

Before bringing wireframe prototypes to the field, we had review sessions with IT, compliance and other relevant parties and wireframes were revised if needed.

Sharing designs with Invision helped any number of stakeholder to leave comments on prototypes. The client's project team was responsible to review, collect and finalize feedbacks for design outputs on Invision.

Step 5 - First Round Usability Test

Usability tests were held on the field for 1–2 days. This was the most important feedback phase where we heard many valuable ideas about easy-to-use solutions. Wireframes were revised based on these feedbacks.

Steps 6 - Final Review and Revisions

Stakeholders in the bank reviewed the wireframes for the last time and we reviewed the wireframes accordingly.

Step 7 - Second Round Usability Test

If the final version of the wireframes were different from the first usability test we have performed a second usability test with the new wireframes.

Step 8 - User Story and UI Design: User story was written and assigned to UI designers. When UI design was finalised and approved by all stakeholders, we updated the user story and UI elements are delivered to the development team on Zeplin.

Challenges

We had to come up with our own solutions for the problems that raised while implementing the Design Thinking and Agile frameworks together for this complex banking application.

1. Product Owner Ambiguity:

There are many stakeholders, but no one is the 'Product Owner'.

Tip: We owned the product and behaved as the center of decision making with servant leader mindset, where main goal is to provide transparent and collaborative decision making for seamless product development process.

What is a "Product Owner": The role of a product owner is to create the vision of a product. Combining skills and knowledge in business strategy and product management, together with the technical product owner this role plays a pivotal role in determining the direction of a product and steers the business towards achieving that goal.

Solution

Our client could not assign a dedicated Product Owner because Agile transformation was just happening in the bank and Product Owners were not assigned within the organization. Project Managers who were assigned to the project were 5 people and no one had the upper hand on making decisions. Being the hidden Product Owner had its advantages since I was in the centre of all communication flow between IT, stakeholders, users and design team. As a strategic design partner, we co-created the design principles with the users and client. Then we applied these principles throughout the MVP project.

2. Design & IT Team Separation

Design and IT members were not co-located and some team members were part-time.

Tip: As Agile framework suggests, regular meetings are vital. Based on our experience, at least until 50–70% of the style guide is complete, keep having regular meetings with the development and design team.

Solution

• Until the 70% of style guide completed, we held weekly meetings for 6 hours. These meetings were a great investment for the rest of the project. Development and design teams collaborated on designs, starting as early as ideation for user-centricity.
• Once the wireframes were co-created by development and design teams, we constantly benefited from digital tools like Slack for animation feedbacks, Zeplin for UI deliverable feedbacks and Invision for wireframe and in-progress UI feedbacks.

3. Design Research Coordination

Users were constantly canceling on the test day.

Tip: We benefited from our Creative Hub

We benefited from having a diligently curated community at hand for the last minute cancellation of user research interviews. Our multidisciplinary community provided us with a pool of personas required for the design research.

4. Need For a Design SystemDesigning in an agile manner rather than waterfall, means there are a lot of revisions on designs.

Tip: We created a library file on Sketch and accessed it through Abstract.

Applying agile on design projects means there are many revisions for each design. For instance, card or list components, shadow or font size rules may change on the way. Using one Sketch file as a library and accessing it through Abstract saved us a lot of time. Using Abstract, each designer was able to open and edit the library file simultaneously.

Conclusion

Refining the current Design Thinking and Agile frameworks for this project was helpful on time, task and client management. We confirmed that digital design project plans should include intense face-to-face interaction to maintain user-centricity and efficient alignment between business, design and IT.

Implementing the Design Thinking methods and a design system for all the banking interfaces from sketch was cumbersome, however, efficient use of and the combination of digital tools such as Slack, Sketch, Abstract, and Invision was the key for efficient project management and delivering an end product that all internal stakeholders agree on.

Managing the whole process in a modular manner enabled the development team to start working from the earlier stages and increased the efficiency.The project will be released ın 2019 and we will be sharing more information about the UX-UI in an upcoming article.

In every project we undertake, we stay loyal to the user's needs and solve design challenges by keeping human-centricity in mind. This is one of the core value in creating long-term solutions.

What do you think? What did we do right? What can we improve?

Are there any other multifunctional (UI design, animation, prototyping) tools, one-stop shops for design teams?

How would you have done differently? We would love to hear your feedback.