top of page
Court.png

Build Your Dream Court With No Effort

 

CourtCanva

 

Project Background

 
 

CourtCanva is a startup project aimed at providing users with a platform where they can create custom designs for courts and receive quotes for their creations. 

Our Target Users

 
 

Court Owners

Sports Facility Managers

Individuals

Product Introduction

 

The CourtCanva web application allows users to easily create and visualize their court designs with the help of an intuitive design interface, and obtain quotes from court builders and suppliers. The platform is designed to be responsive and accessible across desktop, iPad, and iPhone devices.

My Responsibilities

 

As the UI/UX designer, I worked closely with the business analyst and project developers to:

1

Style Guidelines Development

  • Collaborated with the business analyst and project developers

  • Created guidelines for theme colours, fonts, font sizes, and icon designs

2

Responsive Layout Design

  • Designed layouts for all pages and landing pages

  • Ensured seamless user experience across desktop, and iPad devices

3

Stakeholder Feedback Integration

  • Participated in fortnightly showcases

  • Collected and incorporated feedback from stakeholders

4

Continuous Design Refinement

  • Engaged in ongoing design improvement

  • Worked closely with the project team to deliver a polished final product

Survey Insights

 

A survey was conducted to gather user feedback on CourtCanva. The survey focused on ease of use, design tools, website responsiveness, style guidelines, quoting accuracy, and suggestions for additional features. This feedback will help improve the user experience.

And we have gathered the primary needs of our users by analysing the survey data collected.

Users Requirements

 

User-friendly Design Tool

Improve the functionality and usability of the court design interface

Enhanced Responsiveness

Ensure seamless experience across various devices (desktop, iPad, iPhone)
 

Design Consistency

Maintain a cohesive visual language across all pages and elements

Accessibility

Optimise the platform for users with different abilities and preferences

Product Structure

 

The fundamental structure of the project has been established based on user requirements, which include the following aspects:

homepage-layout-design.png

Homepage

  • Features an eye-catching banner showcasing the platform's capabilities

  • Provides a brief introduction to CourtCanva and its benefits

  • Includes clear calls-to-action for starting a new court design or exploring the gallery

web-page-design-templates-for-personal-development.png

Templets of User-generated Designs

  • Showcases a diverse collection of court designs created by users

  • Offers inspiration and ideas for new users looking to create their own designs

  • Provides social sharing options for users to share their favourite designs with friends and family

design-consultant.png

Court Design Interface

  • Offers an intuitive and user-friendly design tool with drag-and-drop functionality

  • Provides a wide range of court elements, customisation options, and colour palettes

  • Allows users to save, edit, and preview their designs in real-time

online-profile.png

User Account Management

  • Allows users to create and manage their own CourtCanva accounts

  • Provides access to saved court designs, quotes, and personal information

  • Offers a user dashboard for tracking project progress

global-distribution.png

Quote Request and Submission

  • Enables users to submit their custom court designs for quotes

  • Allows users to input specific details about their project, such as location and materials

  • Sends quotes directly to users' email addresses or through the platform's messaging system

man-shopping-online.png

Place Order Interface

  • Facilitates the ordering process once a user has finalised their court design and received a satisfactory quote

  • Provides secure payment options and detailed order summaries

  • Keeps users informed about the status of their order and any updates from court builders

Design Style Guidelines

 

Fonts Specification

Group 1941.png

Colour Specification

Group 1939.png

Icon Specification

Prototype Outcomes

 

User testing & Iterative improvements

 

We conducted a user test with a diverse group of participants. This user test aimed to identify any usability issues and areas where the user experience could be improved.

Fragmented Course Design Tools

  • Issue: Participants reported difficulty in finding the right tools for designing the sports court, as the tool keys were scattered throughout the interface.

​

  • Solution: We simplified the tool palette and added labels for better tools organisation, making them easier to find and use, thus enhancing the design process's efficiency and user-friendliness.

Folder Design Preview.png

3D Preview Button Enhancement

  • Issue: Users reported discontent with the 3D preview button's quality, specifically in terms of button clarity.

​

  • Solution: We improved the 3D preview button's design for better visual clarity, aesthetic appeal, and user interaction, resulting in a more satisfying and user-friendly experience.

Folder Design Preview.png

Toolbar Background & Contrast Adjustment

  • Issue: Upon examination, we found the toolbar's background and tool colours were too light, causing a low contrast that leads to visual fatigue for users.

  • Solution: To resolve this issue, we carefully adjusted the background colour of the toolbar and the tools, ensuring an optimal contrast value that meets accessibility guidelines. This enhancement not only minimises visual fatigue but also promotes a more comfortable and enjoyable user experience.

Folder Design Preview.png
bottom of page