Online Dog Training LMS Platform

LearnDash & Wordpress/WooCommerce e-Learning website re-design

WKD Online Dog Training Web Design and Development

WKD is an online dog training company that offers practical and cost-effective training for changing dog’s behavior. It is redesigned for users to experience effectively about brand identity and improved experience to get what they look for through this website by Outsourcify. In addition, we took care of developing their redesigned website.

Team
1 UX/UI Director & Project Manager
1 Graphic Designer
1 Web Designer
1 Front-End Developer
1 Worpress Developer
Methodology
UX/UI Workshop
Waterfall methodology
Tools
Lark
InVision
TeamWork
Adobe Xd
Adobe Illustrator
Adobe Photoshop
Technologies
HTML5, CSS, JavaScript, PHP, SASS, WordPress, Bootstrap, mySQL
Timeframe
2 months

Design requirements

Our core goal was to make the website simply constructed to access training more easily due to the reason that the outdated website was very heavy with a lot of unorganized contents and it caused users hard to find the contents they wanted.

In addition, we aimed to rebuild the identity of the brand. Each component on the website wasn’t harmonized and didn’t really show the identity of the brand with many colors which didn’t look go together. It needed a jointed color scheme.

For the last, along with the content overload, the site wasn’t optimized for mobile. To adapt to any device, we had to offer a constant experience across various types of devices.

Wkd 01

Ensuring that users have a positive user experience

As we mentioned above, the old website of WKD wasn’t really user friendly with overload contents without any system to enable users understand what they offer and find what users look for. Offering the new user experience and usability strategies was necessary. Training course page was especially outmoded with a complex layout and sequence of contents which seemed to be hard to understand. During prototyping, we focused on improvements of site architecture and location of elements based on user experience

Wkd 02

Great UI design in order to reflect the brand identity

In order to reflect the brand identity and stand out from the competition with providing users with a delightful experience, we defined consistent style guidelines such as Icon styles, colors and fonts.

Colors theme

We offered our client a new color theme consisting of pink and navy color that can help the brand make a big impact. These colors also stand out from their competitors and modern at the same time. We setted up the pink color as a primary color to highlight the important components and we set up the navy color as a secondary color to use mostly for the font and secondary buttons.

New guideline of typography

WKD didn’t have any guideline system for typography such as headings, subheadings and paragraphs. For constancy or design throughout the whole website and for better development, we defined the typography style which is relevant to the brand identity and reflects the brand personality with the readability.

UI elements reflecting brand identity

We applied the roundy rectangles-including fills and borders – for most of UI elements to keep consistency with other UI materials such as fonts, colors and icons.

Wkd 03

Technologies we used to develop the website

We used HTML5, WordPress-Woocommerce and Learndash- for this project. We adopted HTML5 because no matter which browser users use, the content can be viewed correctly.

On the other hand, WordPress is very easy to use. Clients can maintain their websites on their own on a regular basis. Furthermore, WordPress is the most popular CMS in the world, it holds the largest CMS market share by far. Including woocommerce for simple cart/shop, that manages easily with WordPress. And Learndash supports online courses which are easier to custom lessons and quiz.

Wkd 04

The summary of project

Our main goal was to update the un-user-experience structure and the outmoded UI design of their old website into better UX and UI design with the reflection of brand identity. After redesigning the website, it is more clear what visitors should do and looking visually modern and clean while maintaining their brand identity. Our client is really satisfied with our work for their website. Overall we could successfully achieve our goal and targets on this project.

Wkd 05

A video of the user interface :

Have a project in mind?
Let's start your project today

Contact Us
Have a project in mind?
Let's start your project today