Owlwise Homepage Redesign, Landing Pages & Platform UI Redesign

Owlwise is an LMS software that helps schools grow and achieve greater success by improving efficiencies and student performance by providing a comprehensive set of tools.

Live Website ->

Feel free to jump to a section

1) Deliverables

Giving the website a new look & feel to attract new users

😊 Increase user experience & website traffic

👀 Attract targeted user groups and convert into loyal users

➡️ Increase usability

Redesign homepage with new brand identity & UI

Design 6 landing pages

Redesign platform UI

The owner came to me for help designing a new visual brand identity that meets current UI design standards, redesigning the homepage to look more pleasing and structured effectively, and designing six landing pages that attract schools, administrators, teachers, parents, and sports clubs.

2) Brand Identity

Creating a calming experience with muted earth tones

The previous colour palette was outdated and needed to be updated to match the current aesthetic tastes of the target users while maintaining the essence of this earthy look.

As discussed with the owner, the leading target user group is primarily female teachers between Gen X and Millenials working for private schools. With that in mind, I picked colours and typography that evoked a sense of friendliness and scholarliness and a colour palette that felt down to earth to evoke practicality and simplicity.

3) Wireframes

Restructuring the homepage to deliver content to viewers in an easily digestible way

Here, I start planning what nav buttons should be included to ensure easy access for target user groups and design a breathable structure for all the essential content for the homepage and landing pages.

I designed fidelity mockups for the homepage and landing page in Figma. I added varying shades of grey and appropriate-sized headings to the paragraph ratio to create a strong visual hierarchy and adequate white spacing. This ensures users focus on important information about the platform to make informed decisions.

4) Homepage

Placing the graphics effectively in the hero section & making sure the CTA buttons pop

From the initial lo-fi to the mid-fi wireframes, I made a few adjustments when I started implementing the given copy and assets. The original intention for the hero section was to showcase the platform in action, but at the time, I still needed an image of the newly designed platform, as it was still in the works. I didn't want to mislead with a mockup image or video, so I used graphics on the side instead. While chatting with a Google Analytics specialist, we learned that it's best to have an image of the product for SEO. Hence, visitors know exactly what the business offers and use graphic elements for branding.

5) Landing Pages

Funnel leads by dedicating a landing page for specific target users' needs

I picked three primary colours from the colour palette when designing all six landing pages. If I were to change some things now, I would use six different colours for the landing page designs to differentiate the offerings visually. I would also make the entire page have a light wash of colour to connect well with the hero section and final CTA card. I would make the hero section a lighter shade to make the CTA buttons pop out more and make the secondary CTA button an outline rather than a filled-in white button, as that can confuse the viewer's eyes on what to click immediately.

The screenshots of the platform design at the time could have flowed better with the landing page's aesthetic, but they were not up to date with design industry standards, making the overall landing page look weak. This can be solved by ensuring I have screenshots of the new platform to draw viewers' attention immediately.

6) Handoff

Communication with developers could have been smoother

The communication between my design decisions and the developers' understanding of what to implement was challenging. Even with Figma comments available, it still took much work for them to know exactly what to add, such as how many pixels an element should be from another element. With the new Figma dev mode that came out after this web design project, this communication problem would have been resolved. Also, the next time I work with a developer, I will make sure to document design decisions and style guidelines for easy reference on Figma.

7) Launch

The importance of showcasing your digital product in use on your website to quickly draw in viewers' attention

Most of the launch process was spent meeting with a Google Analytics representative to ensure we had all the necessary assets for launch: website and marketing, and how to increase click-through rates. Many people opened the website, but the click-through rate didn't meet the expected level. The specialist deducted that there was not enough concrete visual emphasis on the platform features so that viewers could decide if it connected with their needs.

The website design aesthetic didn't precisely match the industry standards for LMS school platforms; they had a techy feel that I learned I could have implemented more into my design decisions during the brand identity stage rather than going straight into the female teacher demographic taste.

Let’s get in touch!

Want to work together on an exciting upcoming project? My line is open!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.