How we improved the E-learning experience for Makro HORECA Academy
CLIENT
Siam Makro
PLATFORM
Web Ecommerce
EXPERTISE
Design and Development
CLIENT
PLATFORM
EXPERTISE
PLATFORM
EXPERTISE
Siam Makro
Web Ecommerce
Design and Development
Web Ecommerce
Design and Development
01
BRAND STORY
Siam Makro Public Company Limited launched Makro HoReCa Academy or “MHA” – an online-to-offline knowledge center - to support HoReCa professionals to increase their competitiveness in the digital age.
Users can register to stay updated on new business trends, free online courses, and engaging workshops. Makro HoReCa Academy Clinic is also available for anyone who requires a more in-depth knowledge in specific areas.
Get step-by-step advice Build the best experience
02
SCOPE OF WORK
Re-invision the legacy website based on MHA requirements. Enhance the structure and presentation of content, enhance usability, simplify functionality and make it more convenient to use. Launched in 2021, replacing the legacy web platform.
03
INFRASTRUCTURE
The web application for MHA is developed using Ruby on Rails and Javascript, replacing legacy WordPress code and plugins.
A mission-specific CMS system was developed entirely using Rails. All components of the containerized application are securely hosted on AWS.
A mission-specific CMS system was developed entirely using Rails. All components of the containerized application are securely hosted on AWS.
04
DESIGN SYSTEM
Colors
Primary colors swatches developed from the original MHA brand. We choose a Lighter and Solid color for the CTAs
Typography
We researched fonts to respect the brand in both English and Thai language.
Illustrations
In addition to fonts and colors, illustrations were essential to effectively and easily communicate across languages.
Better communication through illustrations and icons
Make the components lively and prominant leveraging the shapes and colors of the icon set. Help the user to quickly understand the UI states.
05
USER INTERFACE
Welcome aboard
We have improved the homepage to be more user-friendly with clear delineation of section content. All of the new site’s banner content can now be managed directly from the CMS by any authorized content administrator.
Mobile friendly
70% of Users access the Makro Horeca Academy website via Mobile devices, so the design supports responsive web.
Learning anytime, anywhere
Knowledge Center is where HoReCa entrepreneurs can easily find industry insights and business advice. Users can study and monitor their progress.
Get step-by-step advice
Skill improvement
Additionally, users can challenge their skills by taking certification exams for each of their courses. Upon successful completion of each exam, users can download their certificate. Both desktop and mobile devices support this feature making it very convenient for users on the go.
Certificates
When users have completed the course and the exam, they can receive their certificate. It can be easily downloaded or retrieved from under their Account’s My Certificates page.Stay up-to-date with Events
View various upcoming activities both online and offline. Makro members can register for the event for free via the website.
Keep your favourite recipe
Site localization in English and Thai are critical to successfully serving the local HORECA markets in Thailand. The native localization built into the platform will also make it easy to expand to additional language speakers in the future.
Easy Sign in
Users can sign in easily with the ID on Makro card or the mobile phone number used to register with Makro.
Create your free trial account
Even if a user is not currently a Makro member, they can create a trial account using a mobile phone number. To get access to Recipes, E-Magazines, and Articles, and all other free online content on MHA Website for 7 days.