How can UX designers produce high quality work in a fast-paced sprint-based agile team? Does the systematic UX design process make it inherently contradictory with agile principles? After working closely with one of our client’s agile teams for almost a year, we learned the many complexities a UX designer would encounter when integrating user centered design into an engineering-driven team. Understanding these complexities allows us to adopt an efficient new design process that helps produce better designed products faster.

Background

Since August 2014, we have been working closely with an enterprise software scrum team for a complete redesign of an existing desktop application: ReMetrica, an enterprise risk and economic capital modelling tool mainly used by actuaries. The software has been in the market for many years and is in the process of a complete redesign for a major version update. The client’s development team consists of several experienced C#/.NET developers, scrum masters and product owners, distributed in two teams located in London and Singapore.

Although we were brought in as external consultants, it became clear early in the beginning of the engagement that the traditional agency work process — where designers work separately from the client and produce detailed design specifications as deliverables — does not work anymore because of the vast amount of complexity and uncertainty in the requirements. While there are visions for the new release from the product owners, these visions weren’t translated into concrete features yet. Therefore, we agreed to embed two of our designers inside our client’s development team in Singapore, which could help reduce communication friction and improve designer-developer collaboration.

How we worked in the beginning

As part of understanding the product and the users, we attended the “Basic training workshop” for users, and also conducted interviews with their users in Singapore and London.

We conducted several requirement workshops with the product owners, production team, and users to explore the problems with the software and also ideas for resolving them.. We then jumped straight into tackling these major design challenges. At that stage, the development team was mainly focusing on finishing  an initial release of the software with basic features on the new technical infrastructure .

At this point, we worked outside of the scrum sprint cycles and most of our designs weren’t implemented until a much later stage. Our initial work process was:

• Product owner had vision about a feature.
• UX designers brainstormed ideas and prototyped initial designs, working with product owners to review the prototypes and sketches.
• UX designers produce detailed design specification document.
• The design was communicated to developers. Developers raised issues and constraints from implementation perspective.
• UX designers updated the specification to reflect the changed requirements.
• UX designers keeps going back and forward with product owners and developers for review and design specification updates, with little being actually implemented.

Here is a diagram that illustrates the old process:

This work process was soon proved to exhibit multiple issues:

• Team communication and collaboration is not improved under the “big design up front” process. Designers and developers still work in silos.
• Under such situation designers need to produce detailed design specifications for any new features or interactions. However, these documents and specifications usually immediately rendered unusable or outdated when developers start working on implementation, due to requirement changes or hidden technical constraints that were not easily foreseeable in the beginning. As a result, developers usually ended up developing something completely different from the original design.
• There is not a clear process of getting features implemented. Even though UX is emphasised in the team and by key stakeholders, getting features out fast usually takes precedence due to the fast paced nature of agile development.

New process

After identifying these issues, the team worked to adopt a new work process that helps better facilitate team communication, and as a result, got design into implementation faster.

• Holistic roadmap discussions and planning meetings to identify and prioritize key features. By inviting team participation in these discussions helps build up shared understanding and empathy for user needs.
• The scrum masters then break big features into smaller chunks of user stories, each building up a part of the feature. UX designers, product owners and scrum masters work together to reach a consensus on the core part of the feature. The detailed design won’t start until the actual sprint when the feature is going to be actually implemented.
• UX designers create prototypes for upcoming user stories and seek feedback from various stakeholders in the team. Developers’ feedback on technical constraints is captured and resolved early in the design process.
• Finally, during each sprint designers sit together with developer to walk through the interaction details and make sure that all design decisions in the implementation is intentional.

What we learned

Smaller iterations

Enterprise software products usually have huge and complex features. UX designers working with agile teams need to work with product owners and scrum masters to break down big features into smaller chunks of user stories to be able to fit into short sprint time frame.

Find and PRIORITISE the core part of a feature

While there might be a million “nice to have” features or enhancements to a product, it is important to find and prioritise the core part of every feature for the initial release. Because agile development teams all have limited time and budget, focusing on a smaller set of features or requirements usually results in better user experience than a bigger set of features, especially when the team does not have many UX designers.

Involve developers early in the process

Besides communicating to product owners and scrum masters, UX designers should also include developers early in the design process to “sanity check” their designs. Designing with developers also gives you many useful insights and ideas that would not surface if the team only communicates design to developers through document specifications.

Prototypes rather than specifications

In an agile team environment, the design or requirements may change rapidly in short time frames. Therefore it is often better for UX designer to adopt a “show, not tell” mentality at work. This means designers should produce prototypes to demonstrate how a feature “could work” instead of how they “should work” and validate their assumptions through user testing and feedbacks.

Have you worked as a UX designer in an agile team before? We would like to know your design process and what you learned through the experience. Please tell us what you think in the comments section below

The following are some of most interesting design details that were discussed during the sharing session:

Mike: Macbook Pro sleep indicator

Mike talked about the design the sleep indicator on the older Macbook Pro models. The indicator light is hidden on the surface until it is light up. Most interestingly, Mike pointed out that Apple has a patent for the indicator light because the rhythm of the light turning on and off is set to the human breathing cycle as when we’re asleep.. The breathing effect makes the indicator feel relaxed and soothing.

Masha: Waze GPS App

Masha shared that she uses Waze for driving. The app remembers her daily routine drives and automatically suggests routes based on those. Also, the application recognizes that the user is going to work so user can just say “show me the way to work”, instead of typing out the name or address of the location.

Charmaine: Clear interface copy details

Charmaine talked about a design detail in one of the previous client projects, bellabox. In the checkout flow for bellabox, it needs to be clear that users can earn rewards points by logging in or signing up. Concise and clear copy writing helps communicate this information successfully to the user.

Zavien: Smart underline

Zavien shared about smart underline and how it is different from common underlines. Smart underlines does not overlap with the main text, therefore it simplifies the visual complexity of the typography by reducing attention to itself. Medium is paying attention to this design detail and now Sketch also supports this feature.

Pizza: Facebook sound effect

Pizza talked about Facebook’s new funny sound effects for interactions on their mobile app. The funny sound effects change the character and feel of the app which is originally more serious in nature. The discussion extended to the interesting field of sound design and how to design for emotion by utilizing sound kits in interface designs.

To conclude, designers at Minitheory love design details. It is the kind of thing that’s often invisible to users but unconsciously makes the design friendlier and more usable. Attention to detail is a key characteristic of a good designer and the sharing session helped us to pay more attention to the details we may otherwise overlooked.

According to a survey conducted by Smashing Magazine, a majority of websites have already adopted non-standard fonts as their primary typeface in 2013, which shows a growing variety and increasing liberty of typographic style on the web. With the advent of Google Web Fonts, Typekit and many other stable and easy to setup webfont providers, worrying about web-safe fonts has slowly faded into the back of web designers’ minds. Well, in the Chinese-speaking world, web designers don’t have that luxury.

The challenges in Chinese web typography

Chinese character set is huge. A standard Chinese character set consists of about 10,000 unique characters, with only 3,000 of those characters common in daily use. Because of the huge set of characters, Chinese font sizes normally range from 5 to 10 MB per file. Due to this reason, it is not feasible to use CSS @font-face embedding unless your website’s users have ultra-high internet speed. For a long time, people resort to using only “web safe” Chinese fonts, which are:

• 宋体, Song Ti, a serif typeface used in most older websites.
• 黑体, Hei Ti, a sans-serif that resembles “Helvetica”.
• 幼圆, You Yuan, a rounded font like comic-sans, but not as notorious.
• 隶书, Li Shu, a brush script.
• 微软雅黑, Microsoft Ya Hei a sans-serif, arguably the most modern-looking Chinese web safe font available. It is available on Windows operating systems since Vista.

For Mac OSX users, there is also a good choice: Hiragino Sans GB. It is a high quality sans-serif typeface similar to Microsoft Ya Hei on Windows.

The generally preferred practice is to not specify any Chinese font styles in the body paragraph css, and specify charset=“utf-8”. Doing this allows the browsers to choose the best font available to display for optimised legibility.

However, Chinese typography does have a much wider variety in styles. Throughout the history of China, the building blocks of the Chinese written language has evolved with time. In general, the Chinese character styles can be categorized into roughly 12 different styles, ranging from ancient oracles that symbolise natural objects and animals to modern sans-serif Chinese characters. Currently, there are two different sets of Chinese characters used in different regions of the Chinese speaking world — simplified Chinese and traditional Chinese.

Designers working on Chinese web projects often wish that they could choose from a wider set of webfonts to fulfil their creative pursuits. This need creates opportunities for Chinese font providers to develop innovative technologies to solve the problem.

New technologies are making Chinese webfonts more practical

While serving Chinese webfonts in a stable and bandwidth-friendly way remains a technical challenge, there are several promising Chinese webfont providers that utilise innovative technologies to make it more practical. Most of these providers adopt a technique which is to use a block of JavaScript to collect all the character needed for the current web page and automatically downloads the minimised font file. In this way only the required font characters are downloaded, which reduces its font file to a reasonable size.

JustFont

JustFont is a Typekit-esque service for Chinese fonts. It has a decent font library for traditional Chinese characters but only a limited set for simplified characters.

DYNAFont

DYNAFont is a well known Chinese typeface making company that constantly produces high quality Chinese typefaces. All the fonts listed on the site are produced by the company. If you specifically wish to use DYNA fonts on the web, this is the place to go.

YouZiKu

With YouZiKu you can upload your own font file and convert it into a customized webfont file with only selected character set. It also has a wide range of typefaces to choose from.

iFontCloud

iFontCloud has a wide range of traditional Chinese characters styles. If you are designing a Chinese website targeting mainly traditional Chinese readers, iFontCloud could come in handy to make your website stand out from the crowd.

Fonts.com

fonts.com also has a collection of Chinese webfonts. However, different from the above services, fonts.com does not have a pre-filter function to reduce the font file size, a normal font file is around 2~4MB. Therefore it is not suitable for websites that target online users with slow internet speed.

Conclusion

Although these technologies allows designers and web developer to choose from a much wider range of typefaces, it is still recommended to use the technique sparsely, which means that it should only be used on short copy text and not on long running body text, as long body text has a much bigger set of distinct characters. The large font file will still substantially affect page loading performance.

P.S. There is a very comprehensive article on Chinese web fonts written by Kendra Schaefer. You can read it here.

Update: Smashing Magazine also published a post on Chinese web design trends, you can check out here.

It’s been a whirlwind journey in the past 3 years, as we grew from two to ten, from small projects lasting a couple of weeks, to huge projects lasting almost a year! In figuring out how to do good design, we‘ve tried many different approaches and techniques. Some were great ideas, most were average and, yes, we’ve had the occasional Really Bad Idea (oops!).

When we started out, we were grateful to all the people who shared their knowledge on the internet and over coffees — now it’s time to pay it forward. We’ll share some practical tips that our clients and our peers will be able to use. Feel free to call us out if you ever find any fluff on this blog.

As we gear up for the exciting journey ahead, we want to remind ourselves of who we are and remember how it started. Most of all, we hope that you’ll get to know us better through the blog – what we stand for as a studio and as individual designers.