NewRevamped Biz
My journey to revamping NUS Business school website.
When I first got the new brief for project 2 that we are have to revamp an existing school website, I was -.-||
As I’ve done pitch for university on my previous job, I knew it isn’t going to be fun. I knew the restrictions that universities have and how they work. I was even trying to unlearn what I should be doing and just have fun with it. But I couldn’t because I knew that it is not realistic enough for me. So, I take it as a benefit that I have the knowledge.
This is how it all started….
We started off by doing the 10 Heuristics evaluation in our group of 6.
I was delighted to know that there is a classy way to be judging the usability of a website. But it was confusing at the same time as the terms used to describe each heuristic is quite hard to understand. I had to do more research to learn more about each heuristic.
We realised how bad the current website is when we start to nitpick it with the heuristics. I was bothered by the inconsistency that the website had. There are many different look and feel used for all the different micro sites within the business school.
We then moved on to content audit which took us some time to finish it as there are many hidden micro sites that is nested within the main business school website.
We then went on to do a competitive analysis with 2 other similar university to learn from them. One of the university had better naming conventions and user flow compared to the current website that I was working on.
After the competitive analysis, we broke up into pairs to work on the project.
Just the 2 of us…
Pam and I picked the persona of Mark who is a prospective student looking for a university and a major to further his studies.
We started it with our card sorts with the existing content. There were many cards when we first started our card sorts. It wasn’t a successful card sort as there were many negative feedback about the naming convention of the cards and category we had. So, we looked into the naming conventions that we used for the cards. We started by getting references from one of the university that we did competitive analysis with and adopt the way that they name certain category.
After being comfortable with what we have, we proceed to do our first sitemap for the main webpage of NUS Business School.
We then created task for users to do a tree test.
On one of the task, there was a worrying result.
We realised that there are many “contact us” throughout the website. We then decided to combine all the contacts and placed it in the navigation bar where it will be easier for users to access.
After the card sort and tree test, we proceed to do our final sitemap of the main business school website, BBA website, MBA website and executive education website.
Drawing board.
From the sitemap, we moved on to the wireframes of our new website. We started with paper wireframe as it was the fastest way for us to plan the navigation and making sure that we include all the feature that we need for our persona. We planned out the new features that we want to introduce to our website to see if it will work with the prototype that we will be doing later on. It gave us a better picture of how our prototype will look like as well as the usability of the new website.
These are the things that we redesigned:
-IA reorganisation
-IA — shortened links + restructured
-Removed redundant pages (Undergrad page, Overview, shortened links)
-Undergrad label (header) = visibility
-Sticky header
-Side nav bar (coloured current page)
-Breadcrumbs
-external links symbol
-Main page layout (cleaner, simpler) — added carousel
-Prospective student page (layout — info visibility)
-Consolidated Login links for easy access on header
-Added filter widget to scholarships page
Exciting time ahead! AXURE.
It was my first time doing a prototype on Axure! I didn’t had a good experience working on Sketch as I felt that I was limited by the type of functions I can create on Sketch. But when I learnt that Axure can do dropdown, I was excited to create my own dropdown menu!!! Maybe because I have experience working with DREAMWEAVER, I picked up Axure quite quickly. But I did struggle with the properties function in Axure. It took me almost half a day to finish 2 navigation bar in my prototype. After I got a better understanding of the properties function, things got clearer and easier for me.
Pam and I started by doing the prototype together and helping each other with the blockers that we met along the way working on Axure. But we realised that it was time for us to start on our deck. So we divide and conquer by doing what each of us is good at. Pam started the deck while I continued doing the prototype as we need to rush it out for our usability test the next day.
Testing one, two, three…
We finally had our prototype ready for our users to test! It was quite an experience to see how our users react when they are looking for the task that we got them to do. During the usability test, I realised that once the user used the navigation bar for a task, she will keep going back to the navigation bar to look for information that she will need. It is a habit that was adopted quickly after the first use of the navigation bar. Our users actually gave us good feedback after testing our prototype.
I had the feeling of accomplishment when my users actually find it easy to navigate my prototype as compared to the existing website. One of the user actually gave up looking for the “curriculum” on the existing website, compared to achieving the task with just 2 click on my prototype.
After the usability test, I discussed with Pam on our improvement to be done on the prototype. While I was revising the prototype, Pam gather all the research that we did and structured it into our deck. We discussed on the amount of research that we should include in our presentation as we only have 10 minutes to present. We had to cut down 13 days of work into 10 minutes!
We spent the whole of Sunday finishing our project as we wanted to do a rehearsal the day before our presentation
SHOW TIME!
Do take a look at my humble prototype at: https://eq4sed.axshare.com/
DISCLAIMER: ALL the images used on the prototype are for placeholder and visual purposes only! I’m just a student.
My thoughts
I realised that communication and setting expectation with your partner is a very important task to avoid any misunderstanding. We had a bit of HTHT while working on this project together and I told her how I felt about her during the initial stage of this project. Which made it easier to work together.
As I know that the nature of this project is for a university, it was an instinct for me to keep the design corporate looking and nothing fancy was introduced to the design. I didn’t go all out for the design as I know that it wouldn’t pass the stakeholder stage at all. With the corporate looking prototype I received feedback saying that the prototype looked clumsy, professional, etc. For me, I just want it to be as realistic as I can so that I can sell my ideas to the stakeholders.
In the ideal world, I will combine all the micro sites into just one main NUS Business school website. But knowing that there are many different department working independently within the university, it will be filed under “mission impossible”.
After all these, let me introduce to you a new term that my partner Pam came out with for UXD:
The 4 Rs of UXD.
Research
• User Interviews
• Heuristic Evaluation
• Competitive Analysis
• Card Sort
Redesign
• Tree Test
• Sitemap
Rebuild & Retest
• Wireframe Sketches
• Hi-fi Prototype
• Usability Testing
REPEAT!
