Photo

Cricket Arena

Includes an online store exclusively for cricket equipments, A Cricket Academy webpage & Practice Session Booking page.

Overview

The Challenge

The need was to develop a website for ‘Cricket Arena.’ Cricket Arena is a well known sports outlet in Thiruvanathapuram, Kerala,   exclusively for cricket equipments. They also provide cricket coaching to aspirants through Cricket Arena Academy. Non members of the academy also can book a practice session in the allowed time slots.The challenge was to design a website which includes an online store, A webpage for Cricket Arena Academy and a Booking Page for pre-booking a practice session.

Objectives

  • To set up an online store to buy cricketing equipments.
  • To provide information about Cricket Arena Academy for the aspirants who would like join the academy.
  • To provide an online booking setup which allows pre booking of practice sessions.

Project Scope

Responsive Website Design & Development

Tools Used

Role

Duration

4 weeks

Research

The design process was started by conducting a basic research. This was done by analysing similar websites and apps. Talks were conducted with the founder of Cricket Arena. User Personas were created and analysed.  Cricket Aspirants and Coaches also shared their views.

User Interviews

Talks were conducted with representatives of different category of people including Cricket aspirants, Professional cricket players, Cricket coaches etc. These talks helped me to arrive at conclusions regarding their shopping preferences, the issues they face while purchasing cricketing equipments online, their practice routines etc. These findings helped me create persona representatives.

User Pain Points

Product Quality

The quality of products are not ensured while purchasing online.

Confusing user interface

User interface especially for bookings was a bit confusing in most websites.

Payment Methods

Availability of more than one payment mode was desirable foe most users.

User Persona

Information Architecture

Based on my research and the persona representations, I tried to categorize and structure the informations collected, on the basis of expected features and concerns of the users. 

Sitemap

A sitemap was created so that the layout of the website can be visualized.

Design

Task Flows

A simple Task Flow was prepared, so that an idea will be obtained about how a user will browse through the website to access different services offered by Cricket Arena. Here 3 major tasks are considered for creating Task flows.

  • A customer using the website to purchase a cricketing equipment.
  • A person using the website to get details about the Cricket Arena Academy.
  • A person using the website to pre-book a practice session. 

A simple Task Flow was prepared so that an idea will obtained about how a user will browse through the website to access different services offered by Cricket Arena. Here 3 major tasks are considered for creating Task flows.

  • A customer using the website to purchase a cricketing equipment.
  • A person using the website to get details about the Cricket Arena Academy.
  • A person using the website to pre-book a practice session. 

User Flow

Analysing the different task flows, a user flow was created to generate an idea about the way users will interact with the website.

Low Fidelity Wireframes

Low Fidelity Wireframes was created before creating the Responsive UI wireframes. Wireframes of the key pages are shown here.

Responsive Wireframes

Considering the Task Flows, User Flow and sketches, responsive wireframes were created. This will ensure a consistent experience  for the users in different devices (Desktop, Tablet, Mobile).

Home Page

Shop Page

Cricket Arena Academy Page

Booking Page

Responsive UI Design

After creating a Responsive Wireframe, suitable stylings were applied and the Responsive UI Design of the website was created.

Home Page

Shop Page

Cricket Arena Academy Page

Booking Page

UI Kit

UI Kit includes the typography and the different colours used in the design created for the website.

Final Thoughts

The goal was to develop a website for ‘Cricket Arena’, which includes an online shop exclusively for cricketing equipments, a webpage which provides details about ‘Cricket Arena Academy’, and a Booking Page for pre- booking a practice session. The interface designed helps the user to browse through the website without much confusions or hassle.

View Other Works