Workspace Responsive Design System
WriteWay Writer / 2021
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.
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
Cons: The tabs are less discoverable being within the hamburger menu and may clutter the universal menu more with the icon
Top Bar Tabs
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:
-
Can the user successfully navigate to the various sections of Writer (Document Editor, Preview, Idea Board, etc) using the tab system?
-
Can the user navigate the universal menu (Resizing, settings, etc) with the new tab system implemented?
-
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:
-
Open the Idea Board (To test the usability of the tabs themselves)
-
Open the Project Details (To test the usability of the Universal Menu with the implementation of the tabs)
Results
With the results, the data was proven to be quite insightful. These were some highlights:
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.
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.