Comprehensive Guide to Creating a UX Site on Wix
Comprehensive Guide to Creating a UX Site on Wix Table of Contents 1. Planning Your UX Site • Define Your Goals • Identify Your Audience • Gather Content • Plan Site Architecture 2. Setting Up Your Wix Account • Creating an Account • Choosing the Right Plan 3. Selecting and Customising a Template
• Finding UX-Focused Templates • Customisation Best Practices
4. Essential Pages for a UX Site • Homepage • About Page • Portfolio/Case Studies • Process Page • Services • Contact Page 5. Showcasing Your UX Work
• Case Study Structure • Visual Documentation • Results and Metrics 6. UX Best Practices for Your Wix Site • Navigation and Information Architecture • Responsive Design • Loading Speed • Accessibility 7. Advanced Wix Features for UX Designers
• Animations and Interactions • Forms and User Feedback • Interactive Prototypes
8. SEO for Your UX Site • Keyword Strategy
• Metadata and Descriptions • Image Optimisation
9. Testing Your Site
• Technical Testing • User Testing 10. Publishing and Maintaining Your Site • Domain Setup
1
• Analytics Integration • Regular Updates
11. Resources and Tools
1. Planning Your UX Site Define Your Goals
Before diving into Wix, clearly define what you want your UX site to accomplish: - Showcase your portfolio to potential clients/employers - Establish yourself as a UX thought leader - Generate leads for freelance work - Document your UX process and methodology - Create a personal brand in the UX space Prioritise these goals to help guide your design decisions throughout the process. Identify Your Audience Your site should speak directly to your primary audience: - Hiring managers and recruiters - Potential clients looking for UX services - Fellow UX professionals and collaborators - Companies seeking UX consultation Understanding your audience will help you determine the appropriate tone, con- tent depth, and technical vocabulary to use. Gather Content Collect and prepare all content before building: - Professional high-quality pho- tos and headshots - UX case studies with images, wireframes, and prototypes - Client testimonials and reviews - Your CV in both viewable and downloadable formats - Written content about your process and philosophy - List of services or specialities Plan Site Architecture Map out your site structure: 1. Create a sitemap showing all pages and their hierarchy 2. Determine user flows through your site 3. Sketch layouts for key pages 4. Define consistent patterns for navigation and content display 2. Setting Up Your Wix Account Creating an Account 1. Go to Wix.com and click “Sign Up”
2. Register using your email or social media accounts 3. Complete your profile with professional information
2
Choosing the Right Plan Wix offers several plans with different features: - Free Plan : Has Wix brand- ing, limited storage, and basic features - Combo Plan : Entry-level premium with custom domain - Unlimited Plan : More storage and analytics tools - VIP/Business Plans : Advanced features, priority support, e-commerce For a professional UX portfolio, at minimum choose a premium plan that re- moves Wix ads and includes a custom domain. 3. Selecting and Customising a Template Finding UX-Focused Templates 1. From your Wix dashboard, click “Create New Site” 2. Browse templates under categories like “Portfolio & CV” or “Creative Arts” 3. Look for templates with: • Clean, minimal designs Recommended templates for UX designers: - Portfolio templates with case study capabilities - Creative agency templates that highlight project work - Minimalist designs that put focus on your UX work Customisation Best Practices When customising your chosen template: - Maintain consistent visual hierarchy across pages - Use a limited colour palette (3-5 colours) aligned with your per- sonal brand - Select 2-3 complementary fonts (one for headings, one for body text) - Ensure adequate contrast for readability - Create custom page layouts for case studies - Add your logo or personal branding elements - Remove unnec- essary template elements that don’t serve your goals 4. Essential Pages for a UX Site Homepage • Emphasis on visual content • Good whitespace management • Professional typography • Portfolio or gallery features Your homepage should immediately communicate: - Who you are as a UX professional - What you specialise in - A glimpse of your best work (3-5 featured projects) - Clear navigation to important sections - A compelling call-to-action Include: - A concise headline about your UX expertise - A brief professional summary (2-3 sentences) - Visual teasers of featured projects - Awards or notable clients/employers
3
About Page Humanise your professional profile: - Your UX journey and professional back- ground - Education, certifications, and specialised training - Your UX philosophy and approach - Personal touches that make you memorable - Professional photo or headshot - Downloadable CV Portfolio/Case Studies The centrepiece of your UX site: - Gallery overview of all projects - Individual detailed case study pages for each project - Clear categorisation by project type, industry, or UX speciality - Filtering options if you have many projects Process Page Demonstrate your methodical approach: - Outline your UX process steps - Ex- plain your research methodologies - Describe your design thinking approach - Show how you test and iterate - Explain how you collaborate with teams Services If you’re freelancing or consulting: - Clear list of UX services you offer - De- scription of your specialities (UX research, UI design, usability testing, etc.) - Service packages or tiers if applicable - Industries or project types you specialise in Contact Page Make it easy to reach you: - Professional contact form - Email address (consider using a contact form to avoid spam) - Social media links (LinkedIn, Dribbble, Behance, Medium) - Availability information - Response time expectations 5. Showcasing Your UX Work Case Study Structure Each case study should follow a consistent structure: 1. Project Overview - Client/company - Your role - Timeline - Team composition - Brief description 2. The Challenge • Problem statement • User needs • Business goals • Constraints and limitations 3. Research & Discovery • Research methods used • Key insights • User personas
4
• Journey maps 4. Design Process
• Ideation techniques • Sketches and wireframes • Information architecture • Iterations and refinements • Final designs with explanations • Interactive prototypes • Key features and functionality • Design system components
5. Solution
6. Results & Impact
• Metrics and KPIs • User feedback • Business outcomes • Lessons learned
Visual Documentation Effectively document your UX work: - Use high-quality screenshots of wire- frames, mockups, and prototypes - Show progression from sketches to final de- signs - Include user flow diagrams and site maps - Add captions explaining each visual - Consider before/after comparisons - Use Wix galleries or sliders for multiple related images Results and Metrics Demonstrate the impact of your work: - Quantitative improvements (conversion rates, task completion times, etc.) - Qualitative feedback from users - Client testimonials - Recognition or awards - Business metrics affected by your design 6. UX Best Practices for Your Wix Site Navigation and Information Architecture Navigation and information architecture are perhaps the most critical compo- nents of your UX site, not just for usability but also as a demonstration of your UX expertise. Why Navigation Matters for a UX Portfolio As a UX designer, your site’s navigation is a direct reflection of your professional skills. Visitors will consciously and subconsciously evaluate your UX abilities based on how easily they can navigate your portfolio. Poor navigation can undermine your credibil- ity, regardless of how impressive your case studies might be. Your navigation system should: - Feel intuitive and predictable - Reduce cogni- tive load for visitors - Guide users naturally to key content - Demonstrate your
5
understanding of user behaviours - Showcase your information architecture skills in practice Essential Navigation Elements Primary Navigation: - Create a clear, consistent global navigation system - Limit primary navigation items to 5-7 options - Use conventional patterns that don’t require learning - Ensure active states clearly indicate current location - Consider using sticky navigation for longer pages Secondary Navigation: - Implement logical grouping of related content - Add breadcrumbs for deeper pages to show hierarchy - Consider using mega-menus for sites with extensive content - Include descriptive sub-navigation for case study sections Utility Navigation: - Add a search function if you have more than 15-20 pages - Include contact/hire me button in a prominent location - Consider language toggles if targeting international clients Contextual Navigation: - Implement “related projects” links between similar case studies - Add “next/previous” navigation between sequential content - Use call-to-action buttons that guide the user journey Information Architecture Best Practices Content Organisation: - Group content into logical categories based on user needs - Create a content hierarchy that prioritises your most impressive work - Build information paths that tell a coherent story about your expertise - Consider user tasks and create shortcuts to high-value actions Navigation Labelling: - Use clear, jargon-free labels that users will under- stand - Avoid clever or ambiguous terms that might confuse visitors - Test your labels with peers who aren’t familiar with your work - Ensure consistency in terminology across your site Visual Communication: - Use visual hierarchy to indicate primary vs. sec- ondary navigation - Implement consistent visual cues for interactive elements - Create visual distinctions between different content types - Use white space strategically to group related navigation items Mobile Navigation Considerations Your portfolio will be viewed on mo- bile devices by busy recruiters and potential clients: - Implement a responsive navigation system that works on all devices - Test hamburger menus carefully for discoverability and usability - Consider bottom navigation for mobile users (thumb-friendly zones) - Ensure touch targets are at least 44×44 pixels for all navigation elements - Test navigation with one-handed use on various device sizes Testing Your Navigation System Before launching your site: - Conduct simple user tests with 3-5 people unfamiliar with your work - Create specific
6
tasks (“Find my UX research case study for Company X”) - Measure success rates and time-on-task - Ask for feedback on navigation clarity and intuitiveness - Implement improvements based on observations Your navigation system serves as both a practical tool for users and a showcase of your UX thinking, making it doubly important to get it right. Responsive Design Ensure your site works across devices: - Test your design on Wix’s mobile editor - Customise mobile layouts specifically - Check navigation usability on small screens - Ensure touch targets are sufficiently large - Optimise image sizes for mobile - Test on real devices before publishing Loading Speed Optimise performance: - Compress and resize images before uploading - Limit the use of heavy animations - Be selective with video content - Remove unnec- essary Wix apps or features - Test loading times regularly Accessibility Make your site accessible to all users: - Use sufficient colour contrast - Add alt text to all images - Structure content with proper headings - Ensure keyboard navigation works - Make interactive elements obvious - Test with screen readers if possible 7. Advanced Wix Features for UX Designers Animations and Interactions Add thoughtful interactions: - Use subtle scroll animations for case studies - Add hover effects to portfolio items - Implement progressive disclosure for complex information - Create animated transitions between sections - Use Wix’s animation tools for parallax effects Forms and User Feedback Gather insights from visitors: - Create custom contact forms - Add feedback surveys about your portfolio - Implement lead generation forms for potential clients - Set up automated responses - Track form submission data Interactive Prototypes Showcase interactive work: - Embed clickable prototypes from tools like Figma or InVision - Add video demonstrations of interactive work - Link to live projects where applicable - Consider Wix Velo for custom interactive elements
7
8. SEO for Your UX Site Keyword Strategy
Optimise for relevant search terms: - Research UX-related keywords (UX de- signer, UI/UX specialist, etc.) - Include location-based terms if you work locally - Add industry-specific keywords if you specialise - Use long-tail keywords for specific UX services - Incorporate keywords naturally in your content Metadata and Descriptions Optimise page settings: - Create unique page titles with keywords - Write com- pelling meta descriptions - Use proper heading structure (H1, H2, H3) - Add structured data where appropriate - Create SEO-friendly URLs Image Optimisation Make your portfolio images search-friendly: - Use descriptive filenames - Add alt text with relevant keywords - Compress images for faster loading - Implement responsive image sizing - Use captions to provide context 9. Testing Your Site Technical Testing Ensure everything works properly: - Test all links and navigation - Verify form submissions work - Check cross-browser compatibility - Test on various devices and screen sizes - Ensure all media loads correctly - Verify download links for CVs or PDFs User Testing Get feedback before launching: - Have colleagues review your site - Conduct informal usability testing - Track how users navigate through your site - Ask specific questions about clarity and impression - Make improvements based on feedback 10. Publishing and Maintaining Your Site Domain Setup Establish your professional web presence: - Purchase a custom domain through Wix or connect an existing one - Choose a domain that reflects your name or brand - Set up proper redirects (www vs. non-www) - Configure email forwarding if needed
8
Analytics Integration Track your site’s performance: - Connect Google Analytics to your Wix site - Set up goal tracking for important actions - Monitor user behaviour and traffic sources - Track portfolio views and time spent on case studies - Use heatmaps to see how users interact with your content Regular Updates Keep your site fresh and relevant: - Add new projects as you complete them - Update your skills and services - Refresh your about page as your career evolves - Remove outdated content - Consider adding a blog to showcase UX insights - Check all links periodically to ensure they work 11. Resources and Tools Wix-Specific Resources: - Wix Blog (for latest features and tips) - Wix Help Centre - Wix SEO Wiz - Wix Arena (for professional help if needed) UX Portfolio Resources: - Dribbble and Behance (for inspiration) - UX Portfolio Formula by Sarah Doody - Portfolios from leading UX designers Tools to Complement Your Wix Site: - Figma/Sketch/Adobe XD (for cre- ating portfolio visuals) - InVision/ProtoPie (for interactive prototypes) - Loom (for creating process videos) - Unsplash/Pexels (for stock photography) - Google Analytics (for tracking performance) Remember that your UX portfolio site should itself be a testament to your UX skills. Apply the same user-centred thinking to your website that you would to any UX project, and continuously improve based on feedback and analytics.
9
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9Made with FlippingBook Annual report maker