The Task
Redesign The Art of Living's JyotisVastu Academy website to fit modern design standards and implement a design system to solve redundancy and inconsistency issues found in multiple places across the old website.
Step 1: Website Audit
I began my process by conducting a rough website audit to spot visual errors, simulate user journeys, and look for any inconsistencies that could be corrected.
Since the number of visual errors was a lot, the only way forward was to pursue a complete redesign including a re-evaluation of color, type, and layout.
Step 2: Creation of User Journeys and Flows
There are broadly to actions that a user can perform once they arrive on the website:
1. Book a consultation - 2 types of consultations and many within those 2 types.
2. Register for a course - JV Academy provides learning opportunities through courses that happen fairly often.
To improve overall UX, we need to optimize the user journey for these 2 services.
Consultations User Flow
Course Registration User Flow
Step 3: Information Architecture
I laid down the Site architecture to look for any repeating pieces of information which is helpful to build components that we can reuse in our website instead of building the same thing over and over again.
This also helps with creating an effective blueprint to then start the design process with wireframing.
Step 4: Wireframing
Wireframing happens very quickly once the architecture and the user journeys are in place. We also borrowed a lot of the layout from the old website so this stage was completed and reviewed in a vevry short time.
Step 5: Mid-fidelity Explorations
A few mid-fidelity explorations to get an eye for the type of fonts and the colors with which we can put the puzzle pieces together.
Step 5: Graphics
Consultation Page preview cards:
Individual Consultation Page Banners:
Step 6: Hi-Fidelity Screens
The wireframes and mid-fidelity explorations were sent to graphic designers and together we came up with the new and updated visual style for JyotisVastu Academy that truly sets it apart from the rest!
