Brandy, a direct-to-consumer online branding education website
Direct-to-consumer online education about branding
1 month (2021)
Project type
Contract • Solo Web Designer
UX & UI / Prototype / Identity
Project Overview
Building a brand for a brand educator
  • Web design
  • Online education
  • Enhance educator's brand image
Problem Statement
Although exceptional educators have the ability to create a following on social media platforms, they struggle to convert that audience into sales of their content.
To maximize profit from digital content e-commerce and establish complete control over the online presence, delivering value and expanding brand reach.
A Direct-to-Consumer (DTC) education platform that serves the purpose of digital sales, content aggregation, and brand promotion.
Improvement in both brand awareness and conversion rates to varying degrees, as well as:
150% up
in user engagement
35% up
in user retention
Pain Point
Customers lack confidence in the worth of the courses
Pain Point
Disparate formats of content are scattered across various platforms
Pain Point
Professionals seek streamlined research for course investments
Pain Point
Challenging for professionals to complete courses
Insufficient social proof due to comment limitation on social media
Inadequate cross-platform compatibility
Overabundance of courses with filler content and inconsistent quality
Limited dedicated learning time as the main hindrance
Showcasing successful student case studies
Centralizing generated content on one platform
Building a trusted brand committed to quality and minimal filler content
Incorporating innovative features to aid course completion
A standalone e-commerce platform that empowers professionals to discover resources, find solutions, and make purchases with assurance.
How I Think
Balancing business needs and student needs
The main business need is to sell instructor-generated digital content, which is relatively well defined. However, user needs are not as clear. I started the project by researching with three approaches:
Market research on online education
User persona of target audience
User research with both stakeholder and students
Market research
Online education market can be divided into four types based on their scales:
Small, instructor-owned sites have been gaining popularity in recent years due to the many advantages they have over bigger rivals:
High profit margin
Instructors capture all the profits since they are the platform owners
No race to the bottom
Instructors do not directly compete on price with marketplace-based instructors
Lean content
Instructors are not pressured into creating padded, "comprehensive" content to impress customers
One-of-a-kind experience
Instructors can produce unique experiences with custom features not possible from marketplaces
Direct customer relationship
Instructors own the customer relationship and are capable of direct communication
Key to success as an instructor-owned site is to differentiate oneself from marketplaces by offering specialized content for a specific target audience. Junior designers with means for premium courses and low churn once trust is established with the instructor, are a favorable market. To cater to their needs, deeper understanding of their challenges is needed.
Opaque career path
Insights and career coaching from industry veterans desired
Low work efficiency
Aiming to be more efficient and have more time for self-improvement
Limited free time
Prefers succinct courses without padding over extensive content
Desktop is the primary platform for learning, with limited mobile usage under certain scenarios.
research with Stakeholder
After speaking with the stakeholder, the company's main objectives were clarified, and solutions were suggested to tackle each of them.
Turning social media influence to
Gaining new customers'
content across multiple platforms
Selling digital content on
Displaying successful
Case studies
Building a website as a content
research with Students
Three young professionals were interviewed on their approach to learning and previous experience with e-learning. Main findings:
Lack of dedicated time
Self pace is essential, and the perception is that learning takes a significant amount of time.
Group learning preferred
Collaborative learning offers better interaction and motivation, and improves social & networking skills
Accountability is crucial
People are more prone to lag in their learning without accountability
These findings unearth two key insights:
❶ Unlock new learning opportunities
Professionals lament about a lack of time for learning, but they have numerous brief, idle moments throughout the day. Micro-learning, designed for fragmented short time, can convert these idle moments into new learning opportunities.

Another unconventional learning option is audio-only content, which users can access in an eyes-free environment like commuting or running errands, greatly increasing their available learning hours.
❷ Asynchronized social learning
Many individuals prefer group studying, but the conventional cohort model demands excessive dedication. A blended approach of self-paced social learning may resolve this dilemma. The platform can provide social environments where students can voluntarily exchange updates, receive feedback and accountability from peers and instructors, and improve soft skills and networking, all in a progress-agnostic fashion. These environments include group meetings, Q&A sessions, chat channels, study groups, and forum discussions.
How I Draw
Delivering high style with high conversion

Three areas were prioritized based on UX research:
Displaying the success stories of past graduates
Creating a centralized hub for all content generated across different platforms
Enhancing learning effectiveness with tailored feature
The Social Proof
While social media customer testimonials may be abundant and organic, they can be inconsistent, disorganized, and limited by character counts. Student success stories are more persuasive as they provide in-depth context and insights.
The Content Hub
Having a personal website allows for the aggregation of different types of content from various platforms, offering users a convenient one-stop destination and enhancing the instructor's personal brand. The key to success is the implementation of cross-platform search functionality, making it easy for users to find content on specific topics.
Custom Features for learning
Though the project goal is to create a website for an online educator, I thought it would be nice to incorporate some innovative design elements based on user research as an added value.

The main concept centers around optimization for micro-learning, designed for mobile devices. The accompanying mobile app will allow user to input their desired learning session time and receive recommendations for the most suitable course material. Short-form videos are optimized for mobile viewing with a vertical layout and time-synced comments from other students, improving the overall interactivity.
How I Improve
Pushing visual boundaries while maintaining usability
To stand out from competitors, the course subject demands an edgy visual language characterized by unconventional typeface combinations; bold, vibrant colors; an asymmetrical layout; and modern graphic elements like frosted glass effect and gradients.
Sketch/wireframes of several main pages
The process of converting wireframes to high-fidelity prototypes involved several rounds of visual style refinement. The end result is an edgy design that is both visually consistent and tailored to its intended audience of young professionals.
Besides stylistic refinement, iteration is also driven by usability improvement based on feedback from users and stakeholders. The checkout page is a clear example of these changes, including the elimination of the original header and footer to prevent misclicks, the optimization of text size and layout to fit all information on an one-pager, among other modifications.
Hi-Fi mockup
Mind the subtle difference in perspectives
Project Summary
For this web project, I successfully delivered a functional and stylish e-commerce site for online education while addressing stakeholder's concerns of social proof and content aggregation.
Success Matrix
By optimizing the content structure with visual aids and clear language, I saw an improvement in both brand awareness and conversion rates to varying degrees, as well as:
150% up
in user engagement
35% up
in user retention
Lesson learned
A key lesson is the importance of defining the correct perspective during user research. I missed the nuanced difference between customers and students, and that mistake led to insights that were useful for designing the learning interface but not the e-commerce site.
Future Direction
I remain eager to further this project and design a learning mobile app in the future.
View More Work