Tammie Lister 9:03 pm on December 21, 2018
Tags: , ,   

Iterating on the Gutenberg design flow

As phase one has wrapped up it’s a great time to look at iterating how designers can contribute and get involved in the ongoing work for phase two and beyond. 

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ projects

The Gutenberg plugin itself is on GitHub and this is the cornerstone of the project. All designs being worked on will have a corresponding issue within GitHub. During phase one projects began to be used and this will continue. Here are the projects to follow for design:

Note: like widgets other specific boards may be created to focus on the 2019 projects mentioned here.

Research

Everything starts with research. There have been a lot of insights from usability testing and feedback during phase one. Phase two is starting with a dive into research and interviews are underway. For more details on this you can join #research in Slack and follow the #research tag on this site for posts.

Explorations

Once the areas to be designed are identified into tasks (listed in GitHub projects), then exploring happens. There are a few tools to use for sketches, mocks and prototypes:

  • InVision: A great place to collect ideas and sketches on a board.
  • Figma: This is a great tool to use to sketch and share.

If you are looking to find something to work on? You can follow the ’needs design’ label in GitHub for issues already discussed that need a designer, or any of the projects mentioned.

Feedback

Designs grow through feedback. Sharing early and sharing often is the mantra to follow when working together. There are a number of channels within SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. you can drop in to get feedback async:

  • #design is the home for designers in Slack, feedback can be asked at any point here.
  • #core-editor this isn’t just for developer feedback, this channel has editor focused designers ready to give you feedback.
  • #accessibility is your first port of call to get feedback on even the earliest sketch.

Before development starts any design should be made into an issue or attached to one that already exists in GitHub, this is where most of the feedback will happen. There are a number of useful labels to get even the earliest feedback on an issue:

  • ’Needs Accessibility Feedback’ will get you specific accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) feedback and should be encouraged to be used by every single design.
  • ’Needs Design Feedback’ should be used to get specific feedback on anything posted.

Potential design flow

Whilst it will be up to each person, a flow using the tools available could be:

  • An issue is created in GitHub, added to a project. This sets the foundation of the problem with some basic information and updated over time. A label of ‘needs design’ is added.
  • Research is added to the issue and then once designs are being produced in Figma, those also are added to the issue. Commenting can happen both in Figma and on the issue. InVision may be used to collate research for example.
  • Once there is an agreed design ‘needs design’ is removed and ‘needs design feedback’ added. 
  • Iterations continue based on feedback until a point is reached where the design is ready to be developed. At this point ‘needs dev’ could be added and work begun.
  • During development those that helped with design will give feedback.
  • At all stages getting real feedback through usability testing will crucial.

Staying connected

There is a lot going on in quite a few places and following along isn’t always as easy as it could be. With the new phase of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ this is something to iterate on. There are a number of changes being made to ease this:

  • Weekly #design meeting updates in Slack. The current phase design lead will give a summary update during this meeting.
  • Weekly #design meeting feedback opportunity. There will be time within every meeting for specific feedback or to call attention to issues. Please add those as a comment on the meeting agenda.
  • Weekly #core-editor meetings will still continue, designers are welcome to join. Notes will also be taken going forward to catch up async.
  • Friday is summary day from the New Year! 
    • The current phase lead will post a design update on make/design.
    • Those who are working on specific areas such as research, projects or features and have reached a point to update or get feedback, are encouraged to do that on make/design.

Sharing ideas

In this post, existing planned ideas have been covered, what if you have a great idea for something? The same feedback channels mentioned of #design in Slack, #core-editor and the GitHub repo are great places. You can also add to the ‘Phase 2 Research’ board ‘explorations’ column. Creating a blog post and sharing in those channels is also a great way to share a vision. If it’s just an idea without a sketch you can also discuss in Slack or make an issue.

Collaboration across teams

Designers should never go alone. Collaborating together is important but collaborating across teams is how the best product is made. As the next phase approaches it would be great to hear people’s ideas for how more collaboration can happen. Please add them in the comments.

Get involved

As phase 2 begins, now is a great time to start getting involved. Expect to see posts and announcements calling for specific involvement outside the ways mentioned above. There are going to be opportunities for all different types of designers to contribute along the way.

It would be great to hear any ideas people have for other things to iterate on. All of these iterations came from feedback so keep that flowing! All of this information will also be added to the handbook to ensure it’s easy to discover.