OptimalSort
INTRODUCTION
OptimalSort is a user research tool that uses card sorting to help people structure content in a way that makes sense to users. This tool can uncover mental models and create information architecture.
MY ROLE:
THE SQUAD:
SCOPE:
UX & UI Design
1 Product Owner, 2 Designers and 3 Developers
8 Weeks
OVERVIEW
Optimal Workshop’s tools have existed for over 15 years. In that time, a lot has changed in technology, and some parts of our product have received more attention than others.
Optimal workshop wants to provide good mobile support in terms of accessibility and usability catering towards all users.
​
​
CONTEXT
OptimalSort is a visual card sorting tool. Participants use it to organize topics into categories that make sense to them.
To use it digitally, participants will drag and drop elements to sort them.
​
PROBLEM
OptimalSort works well on desktop, but the mobile web experience needs improvement. Typing on phones is hard and drag & drop can be problematic. How might we enhance the mobile experience for users who struggle with the current interactions?
UNDERSTANDING THE PROBLEM
-
OptimalSort was initially designed for desktop use, but more users are finding it convenient to carry out activities on their mobile devices. As a result, OptimalSort's current design is responsive to all devices, however it does not offer the most accessible mobile user experience.
-
Card sorting is a visually demanding cognitive activity. Due to the limited size of mobile screens, information may be hidden until users scroll further.
-
Currently, the interaction with OptimalSort requires users to scroll and drag and drop. However, these two different interactions can interfere with each other.
The current interaction for OptimalSort & How it works
List of items users will need to drag and drop into the categories on the right.
Action buttons to reread instructions, comment or completion button for their card sort activity.
Category groups users can allocate items into whatever makes sense to them.
DESKTOP VS MOBILE
Designing for mobile and desktop requires different approaches and considerations due to the significant differences in screen size, device capabilities, user behaviour, and context of use.
OptimalSort DESKTOP
Space: Ample
Screen size: Landscape
Interaction: Mouse or trackpad
OptimalSort MOBILE
Space: Limited
Screen size: Portrait
Interaction: Touch
DESKTOP TO MOBILE CONSIDERATIONS
Device capabilities
​
-
Mobile devices have less processing power and memory than desktops, so mobile designs should be optimized for speed and performance.
​
Screen size
​
-
The most obvious difference is the screen size. Desktop screens are larger and offer more space for content and navigation elements, while mobile screens are smaller and require more concise design.
​
Touch versus mouse
​
-
Mobile devices rely on touch input, whereas desktops functions with a mouse, trackpad or keyboard. This means that mobile designs need to have larger buttons and touch targets, as well as considering the ergonomics of how people hold their devices.
CURRENT MOBILE DESIGN
Since mobile screens are much smaller than desktop screens, information is typically hidden until additional action is taken.
Below is a breakdown of the scrolling areas on mobile devices in both portrait and landscape views.
KEY:
Scrollable Areas
CARD SCROLLING AREAS:
CATEGORY SCROLLING AREAS:
With narrower scrolling gaps as shown in the image, it is more difficult to scroll. The touch point area to scroll is so narrow that users will often accidentally drag components while trying to scroll.
Portrait orientation does contribute more visual information, which provide users with additional visual signals to complete activities and achieve the goal of successful sorting.
CARD SCROLLING AREAS:
With the landscape version, participants have more control over the scroll through category, but scrolling the cards still remains the same.
CARD SCROLLING AREAS:
However, the landscape perspective limits participants' capacity to recognise more visual cues in order to achieve the aim of card sorting.
FLEXIBILITY & EFFICIENCY OF USE
CURRENT USER SUGGESTIONS
A pop-up box that suggests users shift their phones into landscape mode for a better experience appears right away.
Although the message advises users to sort while using landscape mode, yet because card sorting is a visually cognitive activity, using landscape mode on mobile can reduce the users' visual cues while sorting.
IRREVERSIBLE ACTIONS
Users can create their own card sort using an open card sort, however doing so is challenging due to the screen's limited space and the fact that, once a user deletes a group, the deletion is final.
_gif.gif)
_gif.gif)
PROGRESS BAR
Progress bars are important because they provide users with a visual representation of how much time or work is left before a task is completed.
​
This progress bar is at the bottom and blends into the background due to the use grey.
ACCESSIBILITY
Designing for accessibility in mobile design ensures accessibility for impaired users and benefits the wider user base by enhancing the user experience.
TEXT SIZE
The smallest font size utilised, 10.5px, is difficult to read. The headings are 20px, with the bulk of the content using 14px and 12.5px.
CONTRAST
Due to size and use of various grey, these area for contrast does not pass WCAG AAA checker.
ASSISTIVE TECHNOLOGY SUPPORT
There are little support for semantic HTML which refers to the use of HTML markup that communicates the meaning and structure of the content on a web page, rather than just its appearance. The only header included is "H3" where the others elements are "div's" or "paragraph's".
COMPETITOR ANALYSIS
To understand our competitor’s strengths and weaknesses in comparison to our own and try to find a gap in the market.
We were able to benchmark our current platform by comparing our card sort to our competitors card sort and identify key areas for improvement. This has helped us understand industry trends and stay up-to-date with emerging technologies.
Key Findings
Below are essential discoveries highlighting the effectiveness of card sorting with our competitors, particularly in the mobile context.
UX Tweak provides the tooltip to hold, then drag and drop. So this action doesn't trigger users while scrolling
Kardsort provides users with the ideal group spacing needed for drag-and-drop operations.
Proven by Users additionally provides space surrounding the cards for its users to find their way around.
By setting out their UI in rows, UX Metric has chosen a different strategy. The groups are shown in the top half, while the cards are shown in the bottom half.
IDEATION/CONCEPTING
During the ideation phase, our primary focus was on the functionality and user flow of OptimalSort. By prioritizing user-centered design, we aimed to address the issues faced by users who have difficulty with the current mobile interaction. This approach ensures that the design effectively solves the intended problem and provides a seamless user experience.
LO - FIDELITY WIREFRAMES
Iteration one
Iteration two
Iteration three
We looked into how a card sort would interact on mobile devices with various layouts, rows, and columns specifically without the use of drag and drop. This is for users who struggle with using drag and drop on small screens.
MID - FIDELITY WIREFRAMES (ALLOW DRAG AND DROP)
Sorting cards with drag and drop with a tip tool to 'tap and hold' allows cards to be dragged and dropped without interfering with scrolling.
Welcome and instructions will be provided initially to introduce users to the card sorting activity, helping them become familiar with the task ahead.
To separate scrolling from drag-and-drop, users will briefly "tap and hold" before initiating the drag-and-drop action.
The concept aims to prevent user overwhelm by emulating file organization in apps, effectively managing the number of cards or groups.
FEEDBACK
During a team huddle with Optimal Workshop's designers, I shared my concepts and initial designs. The feedback I received was taken into careful consideration, which led me to reconsider and redesign aspects to ensure an Optimal Card Sorting experience. Specifically, two key pieces of feedback prompted these adjustments.
Awesome
Senior designer 1
"Offering the option to display all the cards that users need to sort simultaneously could enhance the experience. This approach provides users with more visual cues and a clear sense of the total number of cards they'll be sorting."
Awesome
Senior designer 2
"Users should have a straightforward way to view groups along with their contained cards, making it effortless for them to track their progress and understand their completed tasks."
Following the feedback session, the design was adjusted to allow users to access and view all the cards they'll be sorting.
MID - FIDELITY WIREFRAMES (WITHOUT DRAG AND DROP)
Removing the drag-and-drop capability, allows card sorting through tapping. For those who have trouble using "drop and drop" on mobile, this feature can be enabled in the settings.
The concept involves providing users with customizable interaction options for the card sorting activity, allowing them to choose their preferred method of engagement.
Users can now view their organized groups, enabling them to trace their thought process and follow their workflow more effectively.
FINAL PROTOTYPE
Our top-performing SaaS product is Optimalsort, and while we considered adding more accessibility features, we were uncertain about their impact on the overall user experience. However, there is no single solution that can address all accessibility issues.
To ensure inclusivity, it is crucial to implement changes and provide users with options to customize their experience.
​
​
​
Some Scenarios for Accessibility
-
How would optimal sort look like on mobile without ‘drag and drop’ interaction?
-
How would optimal sort look like on mobile without disorientating users current location on screen while scrolling.
-
How would optimal sort look like on mobile while taking advantage of the mobile screen size and maximising the formate.
ACCESSIBILITY CONSIDERATIONS
Settings:
This allows users to choose the way they want to interact with the card sort process.
Top & Bottom layout:
With this design, can get the most visual information while also making the most use of a mobile screen.
Expand Cards:
Allows users to see more information to help with the card sort process.
Cards in Groups:
The display will only show the latest sorted cards but can be expanded to show more.
Expand Groups:
Users only need to tap in order to see the sorted cards; scrolling is not necessary.
Accessibility functionality
​
-
Our goal is to empower OptimalSort users with varying abilities to customize their experience according to their preferences. We plan to achieve this by providing greater control over aspects such as interactivity, contrast, and other factors. These enhancements will make the navigation more intuitive and assist users in improving their overall experience.
​
-
Integrating accessibility features into our software will not only benefit individuals with accessibility needs, but it will also enhance the overall user experience for everyone. By creating a customizable and adaptable interface, OptimalSort can cater to different user needs and preferences, resulting in a user-friendly and enjoyable experience for all.
DATA
​To understand our current mobile traffic, I collaborated with the data squad to find out where we can see more opportunities.
Most used study tool on Desktop
-
Treejack 66.0%
-
OptimalSort 62.4%
-
Chalkmark 61.4%
-
Questions 48.8%
Most used study tool on Mobile
-
OptimalSort 67.8%
-
Quetstions: 49.7%
-
Chalkmark 37.0%
-
Treejack 32.7%
Desktop Completion vs Abandoned Rates
Treejack is the most used on desktop in all of our study tools but also has the highest abandoned rates at 45%. This shows great areas of opportunities to provide better experiences.
Mobile Completion vs Abandoned Rates
OptimalSort is widely used on mobile, but only 39.3% of studies are finished, and 55.4% are left incomplete. This suggests a huge opportunity to improve the experience for a larger audience for the mobile experience.
REFLECTION
Constraints​
​
-
There were a few challenges we faced during this project. Firstly, our squad of developers aimed to reactify OptimalSort using two-week sprints, which was the most time-consuming aspect. We had ongoing discussions about when to incorporate accessibility into the process.
​
-
Secondly, Optimal Workshop offers several SaaS products, and we needed to update OptimalSort while maintaining a consistent design across our entire platform. To achieve this, we relied on a design library managed collaboratively by all three product teams. This library undergoes constant changes, necessitating discussions before any modifications are made.
​
Reflection
​
This was my first time working in a cross-functional squad. I had the opportunity to explore, research, and discuss all the questions I had with my squad. This helped me gain a deeper understanding of a SaaS product, from reviewing code to understanding accessibility and exploring material guidelines for mobile usage. It was a lot of work, but it allowed me to develop a holistic view of cross-platform design with a focus on accessibility. While there is no one-size-fits-all solution, Optimal Workshop is committed to championing Information Architecture and delivering the best possible user experience.
​
Working in a team also allowed me to express my ideas and participate in discussions for reviewing visual and interaction designs. I learned how to effectively convey my reasoning and justify the design during discussions with both my product owner and senior designer. I also realised that efficient and open communication fosters the flourishing of ideas and motivates all involved to drive the entire project in a better direction.
​