Aicip website -
A digital hub for, aspiring members, inspectors and examiners.
project
Adaptive Website Design
with LMS integration
Project Year
2017 - 2018
My Role
Lead UX Designer
Device Tester
Involuntary PM
I said “God Damn” when I looked at their old website. Excited to have given the opportunity to revamp it. Me and my team rolled up our sleeves and began the journey…
―
A little introduction
AICIP are the peak body for the certification of the pressure industry. The association came to us looking for a complete brand refresh which included refreshing their current digital footprint.
―
Project’s
objective
how might we design a responsive website with a Learning Management System to enable our members to do certification online?
The project’s objective was to redesign an old non-responsive website with a new sitemap, a fresh new layout and a gateway to an e - learning management system.
Moving examiners and candidates from checking and doing exams on paper to online.
It should be an easy to use hub for a target audience which is not very tech savvy.
End user
Inspectors and examiners.
In their 20’s to late 40’s.
Technology
Wordpress website with LMS (Moodle) integration.
Ux process used
- Understand
- Some research
- Analyze
- Design
- Launch
- Analyze again
―
The challenges
understanding
the industry
After the very mini discovery meeting with the client. I started understanding their association brand. But the main challenge was to understand their industry and their target audience.
With limited amount of user data and design inspirations available in the market I had to focus on creating a solution which was not only modern but also very easy to use.
Bringing the users from paper to online is never an easy task and these users never applied for certification online so to get them on board it had to be easy and intuitive.
The budget was limited so I had to combine; user stories, initial wireframe sketches and site map into one.
*Refers back to that “God damn”
Writing on one of many post it notes to come.
Website must haves:
Several meetings, sketchy personas and a workshop later. We were given these must haves:
Certified Inspectors should be able to change and update their personal details on
the website. They should also be able to apply for a renewal of their certification.Non certified inspectors should be able to get information about the exams. They should be able to sign up and create an account on the website so they can apply to sit in the exams.
Invigilators and examiners should be able to get all the information regarding examinations.
A user who is interested to become a member of the association should be able to learn about them. All the information on “ how to become a member” should be present on the website. It should be very easy to find.
The website should have a search for “finding an inspector’s” details.
―
The journey…
some might call it “solution”
Excited and nervous I started sketching and creating some draft user stories. They helped me to create the sitemap and some initial wireframe sketches.
Sketchidy sketch sketch.
My team and I decided to divide the project into two stages:
Stage 1.
Website launch without the LMS. We decided to do this so;
The target audiences gets used to AICIP’s online presence.
They get used to using website’s tools.
They transition well (hopefully) from paper to online.
Stage 2.
Launch give user access to e - learning management system. (3 -6 months after launching the website)
By this time the users will be familiar with the website.
We would be able to track how they are navigating through the website using hotjar.
The data will help us to make changes and improvements if required.
The client agreed and I started working
on the sitemap:
Three versions later this baby got approved:
―
Wireframes
ze magic
Andddddd the fun begins 🎆. For me at least.
Greyscale nerd coming your way!
As always before starting the wires I sat down with the lead designer and developers to see what we can offer to the client as layout options.
I was itching badly to do an asymmetrical design and really revamp their look.
Me trying to convince my team to send the asymmetrical mood board to client.
Skeptical, we sent client two different mood boards. One being boxy and safe other being you know “asymmetrical”.
I was ready to “try my luck with some other client” when to my surprise they loved the asymmetrical layouts and wanted to go ahead with it.
I mean “YeeeAAAAS”! 🙌
So I began…and rest is history:
Ahhh the final beauties. Sitting all approved and read to be designed.
―
Design, development, testing and launch
The wires got approved. Now what? Well I could just step back and let the other team members do their magic.
But I don’t really do that. I sat down with my gorgeous designer and helped her out with the colours, branding and art direction.
I talked to our overseas dev team. They were in India and I can speak Hindi…so yeah got the “involuntary Pm” thing I talked about in the beginning now?
Moving on…
The design phase was pretty smooth. Our designer did an amazing job. We struggled to create the adaptive features on mobile in development but that too worked out eventually in the end.
―
User testing
summary
Due to the lack of budget we weren’t able to test the website on site with the users.
But the client did and provided us great feedback.
The phase 1 launch was great.
After 7 weeks we were able to send the LMS live.
―
The outcomes
and takeaways
Examiners are now able to create a paper, assign an exam and check exams online. Candidates after signing up are successfully paying for the fees and getting their results online.
This has saved them time and hassle. Not only candidates are benefitting from going online but also the association’s admin work has gone down 40%.
The intended tenets of this project were to ensure that the website was:
Modern in design.
Adaptive and easy to use.
A hub of all the information for, aspiring members, candidates and examiners.
A gateway to e learning management system.
A tool for the association to make the big move of “from paper to online” smoothly.
While we achieved all five and hoorah! for that. Using a pre-build platform i.e; Moodle for LMS has its setbacks. It needs constant management and debugging. The company I was working for were lucky to get the client on a retainer. They are managing the LMS for them now.
In future the association wants to move “taking exam” online as well. Aint that exciting?!
Working alongside the client, designers and developers while creating my wireframes really helped me as I knew what the client wanted, what the designer could design and what the coders could code.
One has to trust their uxer instinct to deliver a project which does-not have a very high budget to spend. It is okay to design your own process and not go exactly by the books.
Shaping my layouts for them, cuts off time for my team. The designers can design faster and the coders know what is coming their way.
Oh btw this was the old website:
You are welcome.