Product Design
Job Ready
Overview
Job Ready is a tutorial service used by a recruitment company to assist job seekers that have been referred to them by Immigration consultancy firms with the purpose of preparing them for a career in the New Zealand job market. The service is provided through personal mentoring by consultancy or instructional tutorial videos that can be downloaded.
The webinar videos provide tutorial instructions on how to prepare job seekers CV information for the New Zealand work environment. The webinars also assist job seekers with interview preparation skills as well as job search resource information and mentoring with contract negotiations.
Role
Project Coordinator
Product Designer
UI / UX Designer
Web Developer
Duration
2 Months
Challenge
The project required collaboration with a video production company to produce three main video webinar tutorials each requiring scripting and production work before filming. A scheduled time frame was specified on when the webinars with be finished so the website needed to be complete and tested before accepting the videos and going live. The challenges I faced was creating a website that can be used across any device and accept payments through an add-to-cart system. The website needed to be easy to navigate through products and services with terms and conditions integrated into every purchase. The client also required a coupon function to coincide with promotion activities and a blog page to advertise the monthly coupon.
Team
Copywriter and scriptwriter: Shan Iyer
Backend Developer: Mohan Iyer
Video Production: Visualise Media
Webinars Production: Visualise Media
Video tutorial actors courtesy of Visualise Media
Marketing SEO / SEM: Gita Iyer
Tools
Balsamiq wireframe
Photoshop
Figma
Woo commerce
InVision
Scope
UI / UX, Wireframing
Rapid Prototyping
User Testing, Strategy
Development
Process and Journey
The website was to focus on new migrants coming into New Zealand and be used in conjunction with the clients recruitment company. The design process was built around an eCommerce platform so the task flow, user flow, wireframes, responsive UI was to make the webinars easy to access and purchase.
I began working with a designated representative from the recruitment company to develop the concept for the website. I suggested an introduction video for the home page, informing people about the webinars and services offered by Job Ready. They decided an intro video would be beneficial and provided me with the requirements needed for video production. I then relayed the information onto the video production team with a specified time frame required for completion. I created the first page design based on the intro video and Job Ready services. I also created the mobile concept focusing on their webinars and services. This website concept was presented to the client and signed off to end this stage of development.
Jobready Webflow
The webflow allows me to visualise the website's architecture and areas that will need customised elements. At this stage I focused on the website's operation overall.
Wireframe Main Flow
Once I had created the webflow I started designing wireframes. Creating basic wireframes helps me focus on the visual consistency and hierarchy before applying styles. In these wireframes, I started to incorporate the e-commerce main flow into the design as well as the coupon function and terms & conditions before payments are made.
High Fidelity Prototype
After I finished designing pages that are necessary for users to finish the main webflow, I linked those pages using InvisionApp and created a prototype for usability testing. Conducting usability testing using a prototype is useful for detecting issues in information architecture and flows.
Mobile Responsiveness
The mobile version of the website is optimised with icons on the home page. I have made them clickable in order to make navigation through key features easy and simplistic.
User Testing:
The flow of the website is fluent both within the desktop and mobile visions however testing found that after iteration some purchasers did not have the correct video player installed on their phone or desktop to view the video tutorials. A PDF reader is also required to view video content material. And the download link that is sent to the purchaser can be shared online causing pirated copies to circulate.
Solution:
A VLC video player and PDF reader download is provided within the video description.
Email downloads can only be used three times to prevent video sharing. If the purchaser requires additional downloads they are directed to Job Ready's contact page.
An SSL certificate was needed as a requirement to accept credit card payments and to activate the payment gateway. The challenge of testing payment success was achieved by creating a mockup product. A single product was created to test if payments were being deposited into the clients account. Communication between me, my team and the client was necessary to insure payments were being received and that the system was setup properly.
Where additional input fields were required for trouble-free credit card transactions, custom post type UI were added to customize payment options.
Results and Impact
The website content appealed mainly to the Auckland region and to age groups between 25 – 34 years old. The stats also showed that most of the inquiries were from recent migrants that had moved into Auckland within 6 months. Tutorial sales had a 12% sale-through rate generated from online visits.
Learnings:
1. Competition is high within the online tutorial market so it is important that the client uses the website in conjunction with their recruitment company. They can promote the website to their clients and through word of mouth this will create a stead flow of tutorial sales.
2. Updating information on the website is necessary to stay relevant to the current work environment.
3. Iteration can be acheved through plugin updates this can be set to automatic when each new vision has been released. A checkup every few months will insure operation is flawless.
Original Design and Colour Palette
The colour palette consists of three main colours. The design for the website was to coincide with the logo and business cards which were created first.
