SUPERCILIUM DESIGN SYSTEM/UX/UI
Supercilium operates a sophisticated dual-purpose platform that effectively serves both B2C customers seeking professional treatments and B2B professionals requiring high-quality products and ongoing education. This hybrid approach creates multiple revenue streams and exceptional customer retention through educational engagement.
Problem Statement
The primary user, the professional brow and lash artist, currently experiences a disconnected journey on Supercilium.com. The path to purchasing products is separate from the path to accessing professional training, and the mobile experience is not optimized for a busy technician managing their business on the go. This friction leads to a fragmented brand experience, missed upselling opportunities between products and courses, and a higher-than-desired cart abandonment rate, particularly on mobile devices.
Design Solution
How might we redesign Supercilium.com to create a seamless, integrated ecosystem where professionals can effortlessly purchase supplies, discover and enroll in training, and manage their accounts from any device, thereby increasing average order value, boosting course enrollment, and fostering long-term customer loyalty?
Design Process
I led the UX/UI as well as front end visual design for this project, crafting both the strategy and visuals.
Qualitative Research
We gathered as much information as possible by conducting surveys of both employees and customers to get a good cross section of what the brand perception is as well as things we needed to pay primary focus on.
Target Groups
In order to emphasize with the different types of users, we developed personas which based on interviews conducted early on in discovery and research phase.
Ideation Process
Through in-depth user interviews, I gained valuable insights that shaped the website’s general user flow and task flows, prioritizing essential functionalities. Analyzing this data alongside learnings from the competitive analysis allowed me to streamline the user experience.
User Flow
Approximate end-user interaction with site.
Design Process
Starting with low-fidelity prototypes, I established a clear information hierarchy for review.
Design System
Premium professional-grade products combined with comprehensive education platform.
Positioned as the go-to resource for serious brow professionals looking to elevate their craft.
Hi-Fidelity Prototype
Supercilium's digital architecture demonstrates sophisticated information design optimized for multiple user types while maintaining clear navigation pathways and conversion optimization throughout the customer journey. Large-format professional imagery showcasing real expertise and measurable results. Brand messaging emphasizes professional development and skill mastery. Strategic call-to-action placement directing users toward primary conversion paths with clear value propositions.
UI Testing & Analysis
Experienced Professional Artist Journey
Discovery: Search engine optimization or professional network referral → Research: Comprehensive product quality assessment and technique validation → Education: Advanced course exploration with instructor credibility review → Skill Enhancement: Course enrollment, completion, and professional certification → Product Integration: Professional tool acquisition and advanced technique implementation → Community Engagement: Ongoing peer networking and continuous learning participation
Career Transition/New Practitioner Journey
Career Interest: Beauty industry exploration and professional opportunity assessment → Education Discovery: Comprehensive training program research and comparison → Course Evaluation: Detailed curriculum review and instructor qualification verification → Foundation Learning: Basic certification course enrollment and fundamental skill development → Practice Phase: Technique refinement and professional confidence building → Professional Launch: Advanced tool investment and service offering development
Returning Customer/Loyalty Journey
Return Visit: Supply restocking needs or advanced technique interest → Discovery: New product launches or specialized course offerings → Content Engagement: Educational blog consumption and industry trend analysis → Advanced Education: Specialized certification or masterclass enrollment → Community Leadership: Peer mentoring participation and active brand advocacy development
Mobile-First User Journey
Mobile Discovery: Social media engagement or mobile search optimization → Quick Research: Product specification review and course preview consumption → Social Validation: Customer review analysis and community testimonial verification → Interest Capture: Wishlist creation and email subscription for follow-up engagement → Conversion Completion: Desktop transition for final purchase or enrollment completion
