top of page

Workspace Responsive Design System

WriteWay Writer / 2021

Two screenshots of the WriteWay Writer app. The right screenshot is the editor view on desktop and the right screesnhot is the editor view for mobile.

Before the official launch of Living Sky Technologies flagship product, WriteWay Writer, it was crucial that the app was responsive for all screen sizes. I designed the Workspace Responsive Design system to outline the breakpoints and new tab system for Writer.

My role: I was the sole Designer on this project. I collaborated with my Supervisor, one Front End Developer and two Stakeholders. 

UNDERSTAND

Past User Testing

When this project began, WriteWay Writer did have breakpoints and some level of responsiveness. However, there were many inconsistencies and a refined design system was not in place. During an extensive user testing session two colleagues of mine completed, several users commented on the lack of responsiveness - specifically for smaller devices. In fact, 7/12 participants commented on responsiveness issues they were having during the test. 

Screenshot of the WriteWay Writer dashboard. Sections are overlapping and the design is not responsive.

The old breakpoints left little space to write content with ease.

Learning Requirements

To get a better understanding of the current breakpoints within the app and where there were gaps/issues, I had several discussions with the lead FE Developer. From these discussions, the core requirements were broken down to:

  • Maintain the percentage-based breakpoint system for each Resize option (Context: In Writer, the user has five layout options where the proportion of the Document Editor and Idea Board is different for each of these options - Large, Sidebar, Split Screen, Fullscreen, Minimized) 

    • For example, in the Large view, the Document editor is 67% of the screen width and the Idea Board is 33%

  • Outline the behaviour of the breakpoints for decreasing screen sizes, as well as increasing screen sizes

  • Implement padding adjustments when in smaller screen sizes to allow for more space in the Workspace and ensure the text meets accessibility needs

EXPLORE

Wireframes & Design Problems

I began wireframing breakpoints for each of the layout options, but quickly ran into my first issue: The left and right tab system that was being used in the smaller screen sizes was not mobile-friendly and didn’t leave enough room for the workspace. I brainstormed alternate tab systems for smaller screen sizes and eventually landed on two concepts. However, both tab systems had their cons:

Hamburger Menu

This screenshot shows the collapsed tab design. It has a vertical menu that opens with all of the tabs stacked vertically.

Cons: The tabs are less discoverable being within the hamburger menu and may clutter the universal menu more with the icon

Top Bar Tabs

This view shows the horiztonal tab design which tabs going across the width of the screen.

Cons: Adding another menu to the top may overload the user and cause a distraction from the universal menu items

In order to understand which of these concepts were most accessible to the user, I conducted a Maze User Test.

TEST

A/B User Testing

Two A/B tests were conducted, each with 11 participants to test the usability of each tab concept - The Hamburger menu and the Top Bar tabs. The questions to be answered were: ​

  1. Can the user successfully navigate to the various sections of Writer (Document Editor, Preview, Idea Board, etc) using the tab system?

  2. ​Can the user navigate the universal menu (Resizing, settings, etc) with the new tab system implemented?

  3. Does the user experience any frustrations while navigating the tab system?

Each test was set up with a different tab system but had the same two missions: 

  1. Open the Idea Board (To test the usability of the tabs themselves)

  2. Open the Project Details (To test the usability of the Universal Menu with the implementation of the tabs)

A screenshot of the Maze usability testing software. In this view I am creating a mission for participants to open the "Idea Board."

Results

With the results, the data was proven to be quite insightful. These were some highlights:

A circular graph that shows the number of clicks it took participants with the Hamburger Menu design (also know as the vertical stack design). 54% took 2 clicks (perfect), 9.1% took 3 clicks, 9.1% took 4 clicks and 27.3% took more than 5 clicks.
A circular graph that shows the clicks rates of the horizontal tab design. 72.7% took 1 Click (perfect), 18.2% took 2 clicks and 9.1% took 3 or more clicks.

The data shows that the Top Bar design was easier for participants to access the Idea Board. This was likely due to the tabs being highly visible and not being hidden with a menu. 82% of participants rated the Idea Board mission with the Top Bar tabs to be "Very Easy" while only 55% of participants felt that way with the Hamburger Menu.

Going forward with the design, the Top Bar tabs were implemented to support better navigation for smaller screen sizes.

REFINE + HANDOFF

Final Design

With the results from the user testing, the design system was refined to incorporate the tab system. The tabs were further refined to implement a horizontal scroll for when in small screen sizes, such as mobile. Padding adjustments were also implemented to allow for more room in the Workspace.

A screenshot of the updated Writeway writer in desktop.
A screenshot of the updated Writeway writer for tablet.
A screenshot of the updated Writeway writer for mobile.

For handoff, the extensive design system included visual breakpoints and examples In Figma for screen sizes from 2560px to 375px. Additionally, the written documentation explained behaviour, requirements and edge cases. 

REFLECTION

This project exemplifies the importance of advocating for user testing. Research doesn’t only need to be conducted when designing an entirely new feature or app concept that is completely foreign to the user. It can be as ‘small’ as testing two tab concepts that you need to learn more about. 

At a company where stakeholders are very involved in the design of the product, it was important for me to have user data to back up the decisions of the tab design and use to understand the needs of the user. Initially, the stakeholders favoured the Hamburger Menu concept but with the data from the user tests, I was able to advocate for a more accessible design. 

Advocate for User Testing

bottom of page