skillsture
Role
Design & Development
Company
PEOPLElogy Digital Sdn. Bhd
Years
2024
- Create a visual language that consistently represents the brand’s values, using colors, typography, imagery, and iconography that reinforce the brand's personality, tone, and mission across all web pages.
- Adapting to evolving user needs requires continuously updating the design to meet the dynamic requirements of e-learning trends and user expectations without disrupting the existing user experience.
Solution
Strong Visual Identity: Use consistent colors, typography, imagery, and iconography to represent the brand’s personality and mission across all pages.
Responsive & Accessible Design: Ensure the design adapts to all devices and follows accessibility guidelines for inclusivity.
User-Centered Approach: Focus on usability, intuitive navigation, and interactive elements to meet evolving e-learning trends.
Iterative Updates: Use a flexible design system to allow updates based on user feedback and trends, ensuring minimal disruption.
Clear Communication: Align content, messaging, and visuals with the brand’s core values to reinforce its mission.
Design Process
Research
- Gather requirements & content
- Create information architecture
- Create wireframes
- Review and iterate based on feedback
UI Design
- Design high-fidelity mockups
- Ensure brand consistency
- Define typography, colors, and layout
Development
- Translate designs into responsive WordPress theme
- Integrate Forminator forms
- Implement functionality and interactions
Testing
- Conduct usability testing
- Perform cross-browser and device testing
Sitemap
User Story
Low-fidelity Design
Typography and Color
Primary Color
#e96b2d
Primary Color
#262261
Secondary Color
#dedede
Typography
Aa
Montserrat
Graphic Element
This graphic of angled orange parallelograms symbolizes microlearning: small, connected steps of knowledge that build towards larger growth.
- Forward Motion - Represents continuous learning and progression.
- Building Blocks - Each shape symbolizes small, incremental knowledge pieces.
- Networking Shows connectivity and collaboration within a learning community.
High-fidelity Design
