Khambata Coaching Classes
A website for an academy to display courses and encourage enquiries for enrollment.
Khambata Coaching Classes is a renowned academy for high school students in India. Their focus was to offer students a personalized teaching experience. The goal was for students to look at courses on the website and fill out an enquiry form if interested.
OVERVIEW
The focus of this project was to design a website displaying course details and improving the navigation of the website
PROJECT INFO
Hi-fi web and mobile Mockups (Abode Xd)
6 weeks execution time
Individual sponsor project
ROLE
UX Designer
(Site map, Wireframing & hi-fi mockup)
LEARNINGS
Brand discovery worksheet, detailed site map, style guide, Information architecture
The Problem
Online presence was required to communicate with target audience. Lack of content limited website traffic.
The stakeholder required us to design desktop and mobile mockups focusing on the courses offered and to facilitate client enquiries. Enhancing user experience by improving navigation and effective messaging aligning with business requirements.
Discover
In the initial stakeholder meeting, we learned that the goal is to portray an impactful brand reputation. The stakeholders stated that there was minimal user engagement on the website and they wanted to retain website traffic by adding necessary information and improving the user experience.
In this discovery phase, we created a brand discovery worksheet which included brand reputation and defined goals, personas and discovered competitors.
A survey with potential users reported that users want to know about the coaching class, the courses they offer and a way to contact the management.
Ideate
After understanding user pain points, the ideation stage started with creating a site map followed by initial sketches.
The initial version was a detailed sitemap but was updated after the designing stage. I created different templates according to the layouts and created sketches for each template.
Initial sketches
Design
In this phase, I started with low-fidelity desktop wireframes and later modified them into high-fidelity wireframes. After working on the desktop wireframes, I created low-fidelity mobile wireframes.
I re-iterated this stage to improve the wireframes before proceeding with high-fidelity wireframes. Created a design style guide for both desktop and mobile wireframes.
Wireframes
Hi-fi Mockups
Click here to view annotated final mockups presented and know more about the design decision made. High-fidelity mobile wireframes are also included in the document along with mobile navigation design.
Limitations
The timeline for this project was only 6 weeks and required me to design mockups for the website. The timeline limited the design process as usability testing could not be conducted. If time allowed, the next step would be working on prototypes and conducting usability testing in order to improve the user experience.
Outcomes & Lessons
The final deliverable were desktop and mobile mockups presented to the client. This project gave me a detailed understanding of information architecture. I designed a detailed sitemap to understand different templates.
I also learned a lot about the design principles while wireframing for the mobile website.
In this project, I learned more of design techniques than user research methodologies. Initiating with the site map, leading to sketches into wireframes was an integral part of this project. Creating style guides eased the process of designing mockups.