Akademi for Programmering, Oslo redesign
The purpose of the new design was to improve UX of the homepage, using the quantitative and qualitative data we gathered in the past year.
My approach
Since we had a page that was already live and working, I first looked at the data we gathered in the past year. This data included CTR numbers that showed us what USPs, images and texts worked the best in advertisements. I also went through all the contact e-mails we got to figure out what people ask about frequently. This gave me a good insight into what people think is important information, but don’t understand or can’t find on the webpage. I made these more obvious on the new front page.
Once I had the data I needed, I made sketches to arrange the new content, that later developed into wireframes and a prototype.
I also created personas to doublecheck and reinforce the importance of our USPs.
Information we gathered
Most effective headline, bringing 85% of the clicks:
“Programming courses in Oslo”
Most effective ad text, bringing 43% of the clicks:
“💻 Learn full-stack programming in Oslo!
☑️Practical workshops
☑️Portfolio building
☑️Modular curriculum”
Most effective CTA, bringing more than 90% of the clicks:
“Learn More”
Most effective image, bringing 90% of the clicks: the one that shows code on the screen
The most common things people asked about:
- when and where the courses are
- if previous experience is required
- general confusion if it’s an online course, or an evening course
The design changes and decisions I made
Imagery
According to our data, images with code speak to our target audience, therefore we choose a banner where code is visible, but
Our old slogan was “Learn full-stack programming from scratch in one year by experts”.
Many asked if they could take the front-end and back-end courses separately, due to time and money problems. We concluded that 1 year is too big of a commitment, so we reduced the course’s price, and its length to 6 months, and made the two parts available separately.
Competition analysis also revealed that live mentoring is our unique selling point (USP) compared to online tutorial sites like, Freecodecamp, Udemy or Udacity. Therefore it is also included in the new slogan.
Our new slogan is “Full-stack programming course in Oslo with live mentoring”.
Original
Redesign
Getting to the point
I moved parts of the intro section to an “About us” page. People are initially more interested in what solution we have for their problems, rather than who we are, so the courses are displayed within fewer scrolls.
I also changed the button text from “Read more” to “Learn more”, because that’s what performed best in the advertisements.
Most people in our target audience read from left to right, and I had the assumption that the direction of the tilt should be upwards, when looking at it from left to right.
My assumption was that people would subconsciously associate this change with positive words like “upwards, increasing, uplifting” – words one would want to associate with their careers.
However I have no facts on it, and it might even be too far-fetched. People didn’t respond to it in neither of the two versions, so I’m sticking to my assumption until proven otherwise.
Original
Redesign
Emphasized USPs & readability
I chopped the original intro text up to smaller bits, and added headers that include well-performing USPs to improve readability while scanning. .
Keywords we added based on well-performing USPs and contact e-mails asking about the same thing:
- portfolio
- weekend courses
- in Oslo
- for beginners
“In English” is just something we had from our previous intro text, but it seems to work, so we kept it.
People kept mistaking the blue words for links, so we used orange for highlighting instead.
Original
Redesign
Interesting bits of user testing
Initially I chose a quite artistic picture of Oslo to represent the location, but testers said that users might not be familiar with this view at all.
They suggested that a more casual picture of Oslo could be something visitors see every day, and makes them recognize the place before they have to read anything. Therefore we now have a simple photo of the Rådhus by daylight.
The Rådhus is also represented in our logo, so it seems to be a perfect fit for webpage imagery.
Original
Redesign
I also tested the menu placement. One user only took half a second to say he hated the menu on top 🙂
Menu on top
Menu in the middle
