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.
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.
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.
The quality of products are not ensured while purchasing online.
User interface especially for bookings was a bit confusing in most websites.
Availability of more than one payment mode was desirable foe most users.
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.
A sitemap was created so that the layout of the website can be visualized.
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 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.
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 was created before creating the Responsive UI wireframes. Wireframes of the key pages are shown here.
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).
After creating a Responsive Wireframe, suitable stylings were applied and the Responsive UI Design of the website was created.
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.