Aicip website redesign -
A digital hub for, aspiring members, inspectors and examiners.

aicip banner.jpg

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 back then. Excited to have given the opportunity to revamp it. Me and my team 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 looking at 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 as 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. Aged between blah and blah.

 

Technology

Wordpress website with LMS (Moodle) integration.

 
 


The challenges
understanding
the industry

 

After the discovery workshop. I started understanding their association. 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 it needs 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.

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.

Sketchidy sketch sketch.

 

Me and my team 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 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 one got approved:

SITEMAP_V1.1.jpg
 


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 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.

Me trying to convince my team to send the asymmetrical mood board to client.

 

Skeptical, we sent client a two 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:

 
0f860a65892027.5b0402be29409.jpg
898d4465892027.5b0402be2ab61.jpg
3e741865892027.5b0402be2994c.jpg
 
 
Ahhh the final beauties. Sitting all approved and read to be designed.

Ahhh the final beauties. Sitting all approved and read to be designed.

 


Design, development, testing and launch

So the wires got approved. Now what?
We 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 in the end.

aicip 4.jpg
aicip5.jpg
 


User testing
summary

 

Due to the lack of the 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
takeaway

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 was lucky to get the client on a retainer. They are managing the LMS for them now.

    In future the association wants to move “giving exam” online as well. Aint that exciting?!

 

Oh btw this was the old website:

Screen Shot 2020-05-22 at 4.32.09 am.png
 
aicip desktop 2.jpg