Website Design & Wordpress Development

Design and development for a platform tailored for individual learning paths offering mentorship and career guidance. CodeMonya offers coding bootcamps with a focus on hands-on curriculum, industry expert instructors, and a supportive community.

Role: PRODUCT DESIGNER, USER EXPERIENCE DESIGN (UX), USER INTERFACE DESIGN (UI)

Objective

The objective is to create a cohesive and visually compelling web design that enhances user experience, strengthens the brand’s visual identity, and effectively communicates the CodeMonya’s product’s value and story to the audience.

—————

Content Structure Evaluation: Assessing how information is organised to ensure it’s logical, navigable, and communicates effectively.

Layout: Analysing the arrangement of web elements to facilitate a smooth user journey and support content delivery.

Interaction Devices: Reviewing interactive elements to ensure they engage users and make features easily accessible.

Visual Identity Application: Implementing brand-specific design elements like colour and typography to enhance brand recognition and storytelling.

Use of Color, Typography, UI Elements: Utilising these design components to create a visually appealing interface that conveys the product.

Solution

The solution was created through a process of sketching, wire-framing and visual design.

Colour Palette: A colour set was established from the logo. This would help formulate the colour hierarchy for a holistic approach for each component, Ul element and the overall visual hierarchy as a whole. All contributing to the story telling design approach.

Typography: The Inter font family carries several weights. The focus is on how to apply the bold, medium, regular and light weights across the design.

Iconography: Product and feature-focused, introducing a new suite of iconography designed to help tell the CodeMonya product story. These icons aim to emphasise the product and its features with a detailed and informative style.

Wire-framing

Wire-framing the page’s anatomy using Figma, we evaluated the content and structure to propose a new layout. This layout centers around the ‘What,’ ‘Why,’ and ‘How’ of the CodeMonya product, fostering a more streamlined and consistent format. Additionally, an element of discoverability was incorporated to enhance screen estate usage, usability, and overall engagement for the new homepage design.

High Fidelity Design

Through ideation, wire-framing, and defining visual language, a high-fidelity mockup was created. The layout hierarchy, colour palette, and font weights work together to emphasise UI controls and improve navigation, enhancing storytelling.