All case studies

Partial

Redesigned the mobile experience of Partial, an online art platform, to improve browsing, messaging, and artwork upload flows for both artists and buyers.

UX.UI

Client Project at GoodCodeClub

Role:

UX/UI Audit, Interface Redesign

Duration:

Two weeks (May, 2025)

Deliverables:

Mobile-first mockups

Client Information

What is Partial?

Partial is a curated Canadian art platform that connects emerging artists with collectors, businesses, and art lovers. It supports browsing, chatting, and transactions for users to discover, rent, or purchase original artwork easily. The platform focuses on flexibility, accessibility, and helping artists build sustainable careers by encouraging meaningful conversations between artists and art-seekers.

Project Background

Understanding the context

GoodCodeClub

This project was commissioned by Partial through GoodCodeClub.

The Partial team had developed a new prototype and received feedback from an external advisor with experience at Shopify.

They needed help interpreting and acting on this feedback.

The Partial team had developed a new prototype and received feedback from an external advisor with experience at Shopify. They needed help interpreting and acting on this feedback.

Scope of Work

Redesign requested features

Messaging Interface

Chat conversation layout

Send/payment/image buttons

Referencing artworks in chat

Browsing & Filtering

Browsing experience

Filtering/sorting logic

Mobile nav behaviour

Layout above the fold

Registration & Editing

Multi-step form design

Visual hierarchy of fields

Tagging and metadata flow

UX/UI Audit

Identifying issues

A detailed audit was conducted on three primary user flows: messaging, browsing & filtering, and artwork registration & editing. This analysis uncovered critical usability and interface issues that hindered clarity, efficiency, and overall user satisfaction.

Messaging Interface

Issue 01

Chat List Navigation

Sidebar layout doesn't adapt well to narrow mobile screens.

Issue 03

Image Visibility

Displayed images in chat are too small and lack visual impact.

Issue 05

Visual Feedback

Conversational visual feedback, such as typing visual cues or in-chat new message notifications, is missing.

Issue 02

Cluttered Metadata

Each message bubble is overloaded with timestamps and sender details, which reduces readability.

Issue 04

Payment Message Clarity

Payment confirmations lack visibility and context.

Issue 06

Input Area Hierarchy

No clear visual priority between send, image, and payment buttons.

Browsing & Filtering

Issue 02

Unclear Size Filter

Image-based size options are visually inconsistent and reduce legibility. Text input for custom size filtering is inconvenient for mobile experience, and the unit is fixed as inches.

Issue 04

Selection Pattern Mismatch

The type and location filters are limited to single selection (radio buttons), overlooking users' potential need to view multiple types at once.

Issue 05

Obstructive Header Category Area

Vertically stacked category options take up too much space in the top area, disrupting immediate visibility and browsing flow.

Issue 01

Navigation & Filter Intrusion

The hamburger menu and top-aligned filters both expand downward when interacted with, pushing main content out of view. This disrupts the browsing flow and forces users to scroll back to the top to access filtering options.

The hamburger menu and top-aligned filters both expand downward when interacted with, pushing main content out of view.

Issue 03

Ineffective Grouping & Flow

Price and availability are combined in a way that disrupts the filtering process. Since users have to select a type before adjusting the price, the flow feels counterintuitive and forces them to move back and forth unnecessarily.

Issue 06

Inaccessible Sort Control

The sort dropdown is relatively small and placed at the top of the scroll area, which makes users scroll all the way back up to change sorting.

Issue 07

Unintuitive Filter Results

Unintuitive Filter
Results

After applying filters, the label still says "All artworks," which doesn't clearly indicate that filters are active. Additionally, the default sort is set to random, showing a sold-out item on top.

Registration & Editing

Issue 01

Fragmented Flow

The artwork registration flow is split across three separate pages, making it feel like disconnected tasks rather than a continuous process.

Issue 03

Visual & Cognitive Overload

Lengthy instructions with poor visual hierarchy overwhelm users and make the interface feel cluttered.

Issue 05

Input Type Mismatch

Input Type
Mismatch

The Medium field requires manual typing, which makes it prone to typos and leads to inconsistent labelling across users.

Issue 02

Overcrowded Layout & Poor Flow

Since all input fields are stacked in one scroll-heavy page, users have to scroll up and down repeatedly to move on to the next process.

Issue 04

Disconnected Image Upload Flow

Uploaded images appear as small previews above the upload area, breaking the visual and interaction flow. This separation makes the connection between action and result unclear, with no guidance on how many images can be added.

Issue 06

Ineffective Sizing Input Structure

Size fields are presented with equal visual weight as other unrelated fields, and only inches are supported as a unit.

Issue 07

Overwhelming Checkboxes & Text Fields

The checkbox list lacks grouping cues. All long text input fields appear together on the same page, increasing the users' cognitive load.

Issue 08

Lack of Field Requirement Indicators

It’s unclear which fields are required or optional. Especially when registering artwork that has no prior exhibition history, questions like “Where It’s Been” leave users unsure of what information to enter.

Issue 09

Unclear Interaction Pattern

The presence of both tooltips and “Learn more” links creates uncertainty about interaction outcomes, making users hesitant to click due to potential navigation away and data loss.

Issue 10

Same Interface and Flow for Different Use Cases

The interface for first-time uploads and post-upload edits is identical, despite different user goals and mental models.

Redesign Focus

Key priorities that
shaped the redesign

Four core focus areas were defined to address the previously identified usability issues. These priorities served as guiding principles to improve clarity, responsiveness, and overall usability throughout the redesign process.

Mobile
Responsiveness

Visual
Hierarchy

Layout
Clarity

Usability
Enhancement

UX/UI Redesign Project

To bring more original art onto more walls

01.

Messaging Interface

Messaging interface was restructured to improve readability, streamline interactions, and enhance visual clarity across message types and input elements.

Solution 01

Screen Segmentation for Task Clarity

Moved chat list to a separate screen to reduce visual clutter and support single-task focus.

Solution 01

Screen Segmentation for Task Clarity

Moved chat list to a separate screen to reduce visual clutter and support single-task focus.

Solution 01

Screen Segmentation for Task Clarity

Moved chat list to a separate screen to reduce visual clutter and support single-task focus.

Solution 01

Screen Segmentation for Task Clarity

Moved chat list to a separate screen to reduce visual clutter and support single-task focus.

Solution 02

Metadata Optimization

Message bubbles were decluttered by moving sender info to the chat header and timestamps beside each message. Additional context like response time and online status was also introduced for better clarity.

Solution 02

Metadata Optimization

Solution 02

Metadata Optimization

Solution 02

Metadata Optimization

Solution 04

Improved Payment Message Visibility

Made payment messages more visually distinct by surfacing key details such as artwork info and order status. Added a clear call-to-action to help users easily access order details without disrupting the conversation flow.

Solution 04

Improved Payment Message Visibility

Solution 04

Improved Payment Message Visibility

Solution 04

Improved Payment Message Visibility

New Feature

Direct In-Chat Quoting

Enabled direct artwork quoting for easier referencing and smoother conversation flow.

New Feature

In-Chat Unread Message Notification

A subtle in-chat indicator was added to alert users of new messages while scrolling through previous conversations. This ensures they stay informed without being abruptly pulled away from their current view.

Solution 03

Enhanced Image Visibility

Enlarged image display for better clarity and engagement and made its size responsive.

Solution 03

Enhanced Image Visibility

Enlarged image display for better clarity and engagement and made its size responsive.

Solution 03

Enhanced Image Visibility

Enlarged image display for better clarity and engagement and made its size responsive.

Solution 03

Enhanced Image Visibility

Enlarged image display for better clarity and engagement and made its size responsive.

Solution 06

Input Area Prioritization

Reorganized the input section by placing the main typing field and send button together on the right, while relocating secondary actions like image and payment options to the left.

Solution 06

Input Area Prioritization

Reorganized the input section by placing the main typing field and send button together on the right, while relocating secondary actions like image and payment options to the left.

Solution 06

Input Area Prioritization

Reorganized the input section by placing the main typing field and send button together on the right, while relocating secondary actions like image and payment options to the left.

Solution 06

Input Area Prioritization

Reorganized the input section by placing the main typing field and send button together on the right, while relocating secondary actions like image and payment options to the left.

Solution 05

Typing Visual Cue

Added a visual indicator to show when the other person is typing. This helps users anticipate responses and makes the conversation feel more responsive and real-time.

Solution 05

Typing Visual Cue

Added a visual indicator to show when the other person is typing. This helps users anticipate responses and makes the conversation feel more responsive and real-time.

Solution 05

Typing Visual Cue

Added a visual indicator to show when the other person is typing. This helps users anticipate responses and makes the conversation feel more responsive and real-time.

Solution 05

Typing Visual Cue

Added a visual indicator to show when the other person is typing. This helps users anticipate responses and makes the conversation feel more responsive and real-time.

02.

Browsing & Filtering

Filtering and navigation elements were redesigned to reduce layout disruptions, improve accessibility, and support a smoother browsing experience.

New Feature

Display Mode Toggle

Added a display mode toggle button that lets users switch between grid view and scroll view based on their preference. This feature enhances personalization and supports different browsing habits.

Solution 05

Horizontally Scrollable Tabs

Converted stacked category options into horizontally scrollable tabs to reduce visual clutter and allow quicker access without obstructing the artwork grid.

Solution 05

Horizontally Scrollable Tabs

Converted stacked category options into horizontally scrollable tabs to reduce visual clutter and allow quicker access without obstructing the artwork grid.

Solution 05

Horizontally Scrollable Tabs

Converted stacked category options into horizontally scrollable tabs to reduce visual clutter and allow quicker access without obstructing the artwork grid.

Solution 05

Horizontally Scrollable Tabs

Converted stacked category options into horizontally scrollable tabs to reduce visual clutter and allow quicker access without obstructing the artwork grid.

Solution 02

Improved Size Filter Clarity

Replaced inconsistent visuals with labeled checkboxes, added a range slider for custom input, and introduced a toggle to switch between inches and centimeters.

Solution 02

Improved Size Filter Clarity

Replaced inconsistent visuals with labeled checkboxes, added a range slider for custom input, and introduced a toggle to switch between inches and centimeters.

Solution 02

Improved Size Filter Clarity

Replaced inconsistent visuals with labeled checkboxes, added a range slider for custom input, and introduced a toggle to switch between inches and centimeters.

Solution 02

Improved Size Filter Clarity

Replaced inconsistent visuals with labeled checkboxes, added a range slider for custom input, and introduced a toggle to switch between inches and centimeters.

Solution 03

Refined Filter Structure

Separated price and availability into independent filters, enabled multi-selection for availability with checkboxes, and ensured price can be adjusted anytime.

Solution 03

Refined Filter Structure

Separated price and availability into independent filters, enabled multi-selection for availability with checkboxes, and ensured price can be adjusted anytime.

Solution 03

Refined Filter Structure

Separated price and availability into independent filters, enabled multi-selection for availability with checkboxes, and ensured price can be adjusted anytime.

Solution 03

Refined Filter Structure

Separated price and availability into independent filters, enabled multi-selection for availability with checkboxes, and ensured price can be adjusted anytime.

Solution 04

Support for Multi-Selection

Replaced radio buttons for Type and Location filters with checkboxes to let users apply multiple filter options simultaneously and browse more flexibly.

Solution 04

Support for Multi-Selection

Replaced radio buttons for Type and Location filters with checkboxes to let users apply multiple filter options simultaneously and browse more flexibly.

Solution 04

Support for Multi-Selection

Replaced radio buttons for Type and Location filters with checkboxes to let users apply multiple filter options simultaneously and browse more flexibly.

Solution 04

Support for Multi-Selection

Replaced radio buttons for Type and Location filters with checkboxes to let users apply multiple filter options simultaneously and browse more flexibly.

Solution 06

Accessible & Intuitive Sorting

Made the sort button always visible beside filters and opened its options as a bottom sheet for easier access. Also updated the default selection from "Random" to “Most Relevant” to better match user expectations.

Solution 06

Accessible & Intuitive Sorting

Solution 06

Accessible & Intuitive Sorting

Solution 06

Accessible & Intuitive Sorting

Solution 07

Clearer Filtered States

Updated the “All artworks” label to reflect active filters and item count, and changed the filter button to indicate filters are applied. Also replaced the random default sort with “Most Relevant” to improve content relevance.

Solution 07

Clearer Filtered States

Solution 07

Clearer Filtered States

Solution 07

Clearer Filtered States

Display mode toggle button

Display mode

toggle button

Immediate filtering feedback

Solution 01

Overlay Navigation for Seamless Browsing

Replaced the dropdown top navigation with a slide-in side overlay to prevent layout shifts and maintain the integrity of the artwork grid. Filter and sort buttons were placed at the bottom as a fixed element for easier access.

Solution 01

Overlay Navigation for Seamless Browsing

Solution 01

Overlay Navigation for Seamless Browsing

Solution 01

Overlay Navigation for Seamless Browsing

03.

Registration & Editing

Messaging interface was restructured to improve readability, streamline interactions, and enhance visual clarity across message types and input elements.

Conversational question tone

Categorization

Medium

Artwork Title

03-1.

Registration Flow

Solution 04

Image Upload Grid for Better Visual Feedback

Replaced the isolated upload button with a structured placeholder grid that visually indicates where images will appear. Each slot includes concise instructions, helping users understand how many images can be uploaded and offering a clearer connection between the action and its outcome.

Solution 04

Image Upload Grid for Better Visual Feedback

Solution 04

Image Upload Grid for Better Visual Feedback

Solution 04

Image Upload Grid for Better Visual Feedback

Solution 09

Unified Tooltip Interaction

Standardized all instructional buttons into a single, consistent tooltip format located at the top right of each screen. This eliminates uncertainty about interaction outcomes by clearly signaling that help content opens in-place, without disrupting user progress or risking data loss.

Solution 09

Unified Tooltip Interaction

Solution 09

Unified Tooltip Interaction

Solution 09

Unified Tooltip Interaction

Solution 01

Unified Registration Flow

Consolidated the fragmented registration steps into a single, continuous form to create a more seamless and cohesive experience for first-time artwork submissions.

Solution 01

Unified Registration Flow

Consolidated the fragmented registration steps into a single, continuous form to create a more seamless and cohesive experience for first-time artwork submissions.

Solution 01

Unified Registration Flow

Consolidated the fragmented registration steps into a single, continuous form to create a more seamless and cohesive experience for first-time artwork submissions.

Solution 01

Unified Registration Flow

Consolidated the fragmented registration steps into a single, continuous form to create a more seamless and cohesive experience for first-time artwork submissions.

Solution 03

Clarified Instructions with Visual Hierarchy

Separated lengthy instructions based on importance and redesigned them with clearer visual hierarchy. Essential guidance is now presented in a well-defined container to ensure visibility, while additional details are tucked into tooltips to reduce clutter and support a cleaner, more digestible layout.

Solution 03

Clarified Instructions with Visual Hierarchy

Solution 03

Clarified Instructions with Visual Hierarchy

Solution 03

Clarified Instructions with Visual Hierarchy

Solution 02

Step-by-Step Input Flow

Redesigned the layout into a step-by-step format, giving each question its own dedicated screen. This reduces cognitive load by allowing users to focus on one task at a time, rather than facing a long scroll of input fields. A progress bar was also added at the top to provide a clear sense of completion.

Solution 02

Step-by-Step Input Flow

Solution 02

Step-by-Step Input Flow

Solution 02

Step-by-Step Input Flow

Solution 05

Structured Medium Input for Consistency

Replaced the manual text field with tappable chips for common mediums, reducing errors and promoting consistency. A separate custom input option is provided for cases where the desired medium is not listed, allowing flexibility without sacrificing structure.

Solution 05

Structured Medium Input for Consistency

Solution 05

Structured Medium Input for Consistency

Solution 05

Structured Medium Input for Consistency

Solution 06

Improved Size Input Hierarchy and Flexibility

Grouped width, height, and depth fields onto a single screen with a measurement guide to clarify input expectations. Depth is marked optional, and users can proceed without filling it in. A unit toggle was also added for better flexibility.

Solution 06

Improved Size Input Hierarchy and Flexibility

Solution 06

Improved Size Input Hierarchy and Flexibility

Solution 06

Improved Size Input Hierarchy and Flexibility

Solution 07

Structured Grouping and Progressive Input

Added clear group labels to checkbox lists to improve scannability and reduce mental effort. Separated open-ended text input questions into individual screens to help users focus on one task at a time and to minimize cognitive load.

Solution 07

Structured Grouping and Progressive Input

Solution 07

Structured Grouping and Progressive Input

Solution 07

Structured Grouping and Progressive Input

Solution 08

Optional Field Visibility and Clarity

Added a visible Skip button above the Next button on non-required question screens to clearly indicate optionality. This helps reduce user uncertainty, especially when specific questions may not apply, such as providing exhibition history for never-before-shown artworks.

Solution 08

Optional Field Visibility and Clarity

Solution 08

Optional Field Visibility and Clarity

Solution 08

Optional Field Visibility and Clarity

Solution 10

Context-Aware Interface for Editing

Introduced a new artwork dashboard and detail view to support post-upload use cases. Editing mode was redesigned into a focused, navigation-free screen to prevent accidental exits. Unlike the registration flow, which guides users step-by-step, editing presents all sections on a single page with collapsible dropdowns to support faster access for users with specific, goal-oriented tasks.