Case Learn about: Redesigning Todoist for Android

Todoist is a to-do listing app that 25 million other people depend on on a…

Todoist is a to-do listing app that 25 million other people depend on on a daily basis to stay their lives arranged. As a part of the Doist design workforce’s targets for 2021, we aimed to revamp the Todoist Android app to make the most of the most recent Google Subject material Design pointers.

On this publish, we quilt the design choices and processes in the back of redesigning the Todoist Android app for Subject material Design. We discover the Design and Android workforce’s collaboration practices that introduced the app replace to existence, which ended in successful the Subject material Design Award 2021 within the huge display class. Let’s get began!

 

Alternative

After we began the venture, our design implementation on Android was once in a position for a big overhaul. The final milestone redesign on Android was once initiated after the discharge of the primary Subject material Design pointers in 2016. Since then the workforce effectively labored on steady enhancements to the Android app, however we noticed the chance to beef up Todoist on Android on a extra holistic degree.

We got down to blank up cases of older UI elements, colours, and textual content types and replace them with the most recent Subject material Design elements. We seen that some interactions and navigational patterns had develop into inconsistent with what customers had been anticipating on more moderen Android units and had been desperate to modernize this revel in. With new {hardware} and instrument adjustments in thoughts, we got down to make the revel in on higher telephones and capsules even higher, so Todoist may take complete benefit of the most recent era of units. Subject material 2 and three equipped an implausible new framework to reconsider the present app revel in. With this in thoughts, we got down to problem what a contemporary Android app will have to seem like and innovate on best of the default consumer revel in.

 

Answer

The workforce set itself the purpose of redesigning our Todoist Android app and intending to make it the best-designed productiveness app on Android. The venture was once bold and scheduled to take a number of months to finish. We set ourselves the next objectives whilst operating at the venture:

  • Overview the present implementation and older design specifications.
  • Learn about the most recent Subject material Design Pointers and assess what’s related for our venture.
  • Analysis nice Subject material Design apps and case research and be informed from their execution.
  • Outline the brand new Todoist Android app design language and report the adjustments.
  • Design and building paintings in combination to evaluate the proposed resolution and implementation.
  • Check an early model of the brand new app internally to collect comments and make changes.
  • Invite beta testers to the brand new app to collect comments and make changes.
  • Refine the app and cope with core problems sooner than launching to the general public.

 

Overview

The venture was once kicked off by means of reviewing the present Todoist Android app implementation, noting down what spaces had to be mounted and what was once up to the moment. Whilst reviewing, we took screenshots of the app implementation for reference. This fashion shall we simply see the present state of the app and examine it to the brand new design proposals that might be created. As soon as the assessment procedure was once finalized, we had a complete review of the present state of the app and the format, part, and styling adjustments we needed to make.

 

Learn about

We persisted the venture by means of finding out the most recent Subject material Design Pointers, assessing the elements and practices that had been maximum related to Todoist.

When the venture kicked off in February 2021, Subject material 2 was once the latest model in their design gadget. Since Subject material 2 had already been launched for relatively a while, we expected that design adjustments to Subject material could be introduced quickly on the Google I/O match in Might 2021. Fairly than wait, as a result of we anticipated the adjustments to be iterative, we driven forward with our paintings.

We known 25 elements and UI patterns that we needed to modify around the app. The adjustments incorporated buttons, bureaucracy, menus, sheets, navigation drawer, app bar, gadget bars, textual content and colour types, and extra. We began by means of making a desk view in a Dropbox Paper report with the part adjustments and references hyperlinks to Google’s Subject material Design Pointers.

This elements listing was once a kick off point for dialogue to devise the scope and complexity of the adjustments. Shut async discussions between the design and building workforce in Twist and Dropbox Paper feedback helped us make choices about scope and complexity early on and set a forged basis for the venture.

See also  12 Best possible Electronic mail Advertising Services and products for 2022 (Ranked)

 

Analysis

Within the preliminary Subject material Design learn about, we additionally researched inspiring Subject material Design apps, Subject material research, Play Retailer apps, and Google Workspace apps to be told from their execution.

We began out by means of finding out the Subject material Design Award Winners 2020 and examined out the goods that had been showcased. The showcased winners struck a excellent stability between imposing the Subject material Design Pointers whilst keeping up their very own product’s logo inside the gadget. This stability between Google’s pointers and the Todoist logo was once additionally key for us to get proper and so we strived to seek out this combination around the paintings we created and carried out within the venture.

Together with the MDA winners, we researched the Subject material Research that Google produced to show off what apps may seem like with branding and Subject material Design pointers carried out. It was once a perfect reference to look how a long way elements might be custom designed whilst keeping up the core platform ideas. The Answer case learn about particularly introduced treasured perception to us as its content material kind and format got here closest to Todoist. It showcased how elements just like the app bar, navigation drawer, and massive display layouts labored whilst being custom designed.

We persisted our analysis by means of looking the Google Play retailer for uplifting app examples. Google Duties, Press, Periodic Desk, and Kayak stood out to us as the extent of polish and high quality of the apps had been on par with the revel in we had been intending to create.

Someday later within the venture when Subject material You was once launched (extra on that later), we stumbled upon the Google Workspace apps weblog publish which previewed Subject material 3 adjustments that Google was once introducing to their very own merchandise. It introduced a perfect glimpse at what was once to come back sooner than the Subject material 3 Design Pointers had been formally launched. This publish sparked new inner discussions and additional design explorations that we thought to be for long term Todoist Android updates.

 

Design Spec

As we began to outline the brand new Todoist Android app design language and report the adjustments, we opted to create a design framework, specializing in developing elements somewhat than designing each display within the app. This allowed us to persistently observe the design gadget within the app. We did so by means of the usage of the in the past outlined part listing that we created throughout the assessment and learn about procedure.

Core displays from other spaces of the app had been selected to show how the elements might be carried out. We selected to mock up the Todoist venture view, navigation drawer menu, venture view edit display, settings, and venture element view, amongst others. Those displays gave us a excellent review of ways buttons, bureaucracy, drawers, lists, and different elements would paintings in combination and in several states; decided on, pressed, disabled, and so forth.

All over the venture, we had been transitioning our Doist design gadget to Figma and began developing our first elements within the new Doist Product Android Library. We began by means of the usage of some elements from the Subject material Design UI package – Parts library from the authentic Google Figma useful resource record and added them to our Doist design gadget. We then persisted to building up the Product Android Library record with our Todoist-specific elements reminiscent of job listing & board perspectives, element perspectives, sheets, colours, typography, and so forth.

We persisted by means of documenting colour and typography adjustments that had been in accordance with the Subject material Design pointers. The design workforce opted to put into effect a brand new Design Token framework that might percentage the similar values between our design gadget and the advance implementation. The advance workforce would output the values that they had within the present implementation and the design workforce would analyze which values had been wanted and which might be merged, modified, or deleted. This knowledgeable the brand new Design Token colour and typography gadget which we then documented and mentioned with the workforce to put into effect. Later within the venture, we had been glad to look a identical token gadget presented by means of Subject material 3 in the most recent pointers which validated our considering and ideas in the back of the brand new design gadget.

The design documentation expanded to carry different edge-case mockups that would take a seat along the design gadget. We documented other responsive display reviews between telephones and capsules in opposition to the former implementation. Further sections had been created to report the movement that are supposed to be used for positive elements and displays by means of referencing current Subject material Design pointers examples or prototyping customized movement in Theory and After Results. The design spec additionally touched on haptic comments that are supposed to seem on contact objectives, how darkish mode will have to paintings around the new elements, documenting Todoist issues inside the new design language, and extra.

See also  12 Easiest Electronic mail Advertising and marketing Products and services for 2022 (Ranked)

 

Design Implementation

At Doist, the good thing about the squad is that cross-team collaboration is constructed into the makeup of the workforce. Designers, builders, give a boost to, and product managers paintings in combination in a squad to ship the venture. This shut collaboration from the beginning is essential to bridging the space between scope, estimations, design, building, and supply. The squad mentioned their findings every day and got here up with the finest course of action in combination.

Designers began by means of developing elements in Figma and shared them with builders in Dropbox Paper. We used screenshots to report the present implementation subsequent to the brand new designs and related to the default Google Subject material Design elements. This allowed the workforce to check all references in a single position. Builders shared their comments, changes could be brainstormed in combination because the designs had been iterated.

Designers at the venture would percentage their paintings in development on a weekly foundation with the remainder of the design workforce in a design assessment Twist thread. Right here information about the designs had been mentioned, possible choices mocked up and larger image plans made. Design critiques introduced up subjects like FAB (Floating Motion Button) placement, theme choices, accessory colour utilization on elements, consistency with different platforms, navigation choices, and shadow elevation. After thorough discussions and selection mockups had been offered, the design workforce aimed to seek out the suitable stability between Subject material Design and Todoist logo pointers. The advance workforce, additionally a part of the design critiques, gave their comments at the resolution and raised technical complexities early on.

Ultimately, the design was once stabilized and consistencies up to date throughout elements and mockups. The design spec was once stored up to the moment so the advance workforce may at all times assessment the most recent designs in Figma.

 

Trying out

Once the advance procedure began, the Android workforce equipped early screenshots and movies in Twist threads whilst they had been imposing the design spec. This tradition allowed us to study the app implementation early and continuously. Designers may assessment the advance paintings and percentage comments in Twist, which ended in getting the implementation to a top quality. Along Twist discussions, the workforce arrange a Todoist venture to trace ongoing problems and fasten insects. Designers logged new problems, builders would resolve them and percentage the brand new implementation for designers to study.

When the workforce had the primary solid model of the Android app, we shared it internally at Doist to get extra perception and comments. Different Doisters may get entry to the redesign by way of a function flag that may be became on within the app settings and take a look at the brand new model for on the other hand lengthy they sought after. The function flag gadget allowed other people to present us early comments at the design choices we made and document insects. Comments was once submitted by means of the broader workforce thru a devoted Twist thread and architects and builders may talk about how superb to deal with the comments throughout the energetic venture implementation.

When we subtle the app implementation additional and addressed early comments we spread out the app replace to our beta customers. Right here customers had get entry to to the brand new Android redesign and had been in a position to present us comments. Our give a boost to workforce amassed comments and shared it with us in a devoted Twist thread. The squad aimed to investigate each remark and appeared for patterns the place shall we make tweaks and enhancements to the consumer revel in.

As a part of those tweaks, we made adjustments to how the ground bar and navigation drawer labored. Some customers reported frustrations with the way in which the brand new backside navigation and menu drawer labored. In its first implementation, the drawer was once part raised when opened and needed to be swiped as much as be raised once more to look the entire content material listing. This was once a subject for some customers because it was once slower to get to the content material underneath the listing. So we made up our minds to totally elevate the drawer by means of default when opening. We additionally made it more straightforward to open the navigation drawer by means of sliding up from the ground app bar. This was once a small shortcut nevertheless it enabled customers to get to their content material quicker.

 

Subject material You

Whilst we had been within the checking out section and about to wrap up the venture, Google unveiled Subject material You, and someday later the Subject material 3 Pointers had been revealed. With the newly introduced assets, we went again to check the most recent pointers and references shall we in finding to look the place the Todoist Android app redesign suits in and which changes we would possibly want to make now or someday.

Dynamic Colour was once a large new function that was once introduced as a part of the Subject material You replace. As Todoist helps many alternative issues the Subject material You Dynamic Colour function appeared like a excellent are compatible for our product. We made up our minds to prioritize this selection and put into effect Dynamic Colour mild and darkish issues as a part of our Todoist theme settings choices.

See also  Design Patterns: Find out how to Create Easy Interfaces

To put into effect Dynamic Colour, the advance workforce began off by means of making a demo prototype that applied the Dynamic Colour gadget and showcased how shall we make a choice from a spread of colour alternatives that the gadget outlined in accordance with the wallpaper selection. From there, we attempted to include gadget habits in our design mockups. We designed a spread of various colour mockups and elements to look which of them may are compatible with which elements. We then got here up with a colour gadget that labored for the Todoist app and the brand new issues. Those new Dynamic Colour issues would take a seat along our present theme choices within the Todoist app settings. From right here customers may make a choice from Dynamic Colour Mild and Darkish issues.

Together with Dynamic Colour, the workforce additionally created a customizable backside app bar, permitting customers to arrange the app in some way that’s maximum handy to their workflow. The site of the Dynamic Upload Button can also be modified to the middle, left, or proper nook of the display. The order of the Menu, Seek, and Notification buttons can also be rearranged to superb are compatible the ergonomics of the consumer’s dominant (left or proper) hand and optimize their navigation patterns.

 

Release

As important beta comments was once addressed and steadiness tweaks had been made, the squad felt in a position to unlock the brand new Todoist Android app to the general public. The workforce logged the problems that would no longer straight away be addressed for long term critiques and updates.

The design and advertising and marketing workforce readied the release by means of developing What’s New banner paintings and replica which can be displayed inside the app when launching the replace. The Doist advertising and marketing workforce additionally created unlock notes and shared the app replace bulletins on our social channels. The emblem and product design workforce labored in combination to create customized symbol belongings and replica that summarised the venture paintings in a easy and wonderful manner.

 

What’s Subsequent: Subject material 3

After a a hit release of the redesigned Todoist for Android app, Google contacted Doist to announce that Todoist was once decided on because the Subject material Design Award 2021 winner within the Huge Display screen class. The workforce was once excited to be identified for his or her onerous paintings and it felt like we accomplished the purpose we had got down to accomplish.

Internally, designers and builders persisted to check and talk about the Subject material 3 updates. The design workforce began exploring mockups and design adjustments impressed by means of Subject material 3 and Google’s Workspace app updates. A few of our present Todoist explorations come with converting the FAB styling, updating the app bar, additional disposing of elevation shadows, and extra. Here’s a preview of what a long term Todoist replace may seem like.

We are hoping those insights into Doist’s design procedure and collaboration practices have sparked your hobby. Thanks for studying and keep tuned for long term design updates!

 

Takeaways

  • Learn about the Subject material pointers, Subject material Design winners, Subject material research, and Google Workspace apps to make knowledgeable design choices when designing your subsequent product or app replace.
  • Assessment which Subject material Design elements and practices are best for you and put into effect them into your product.
  • Sparsely stability the Subject material Design pointers along with your logo pointers to create a singular and constant revel in between your product and the platform it lives on.
  • Collaborate along with your Android builders early and continuously to send app updates successfully and build up the design implementation high quality.
  • Use design elements and construct a design gadget along side sensible mockups to create an effective design spec.
  • Believe how the most recent Android options are compatible into your product and that have probably the most have an effect on to your customers sooner than deciding to put into effect them.
  • Check and assessment builds along with your inner workforce and exterior beta customers to get treasured comments and make changes sooner than freeing them to the general public.
  • Create announcement paintings to show off your newest app or function replace along side a transparent description to percentage in-app and on social media.