Uxtopic

Goals

• Achieve impeccable usability and accessibility.
• Ensure the site is visually appealing, functional, and educational.
• Establish strong SEO positioning and attract consistent user traffic.
• Strengthen the brand's online presence through social networks.

User Personas

Uxtopic's target audence are two kinds of aspiring UX designers. On one hand, professionals from other disciplines looking to enhance their UX knowledge, on the other, beginners needing guidance to start their journey in UX design. To guide the project, I developed two User Personas representing these profiles.

Benchmarking

After identifying the main competitors of Uxtopic, I identified the following good practices and points of differentiation:

• The page should be focused on teaching UX design.
• The content of this must be free.
• Static pages must contain the topics with the most traffic.
• Publish frequently to improve your positioning.
• Establish Spain as the main target.
• Use content in video format.

Site Architecture

Uxtopic’s structure is designed to meet the needs of new professionals interested in UX. The main navigation includes five sections derived from high-volume keywords, organized from general to specialized information. The homepage provides an overview of the discipline, with access to all site information within two clicks.

Main Sections

• UX Profiles: Includes Visual Design, UX Research, Information Architecture, and Interaction Design.
• Resources: Covers tools and courses, broken down into subcategories for quick access based on experience level and budget preferences. Focuses on top-searched tools (Figma, Adobe XD, Sketch).
• Portfolio Creation: Offers guidance on designing effective UX portfolios.
• Employment: Addresses professional opportunities, future of UX, job finding tips, and salary information.
• Blog: Provides updated and relevant content on usability design.

Prototype version

I developed a prototype based on wireframe designs for the home page, a first-level subcategory and a second-level subcategory. These wireframes prioritize clear navigation and easy-to-use design to improve the user experience.

SEO Optimization

Initial Planning and Analysis:

• Competitor analysis to identify strengths and weaknesses.
• Comprehensive keyword research using tools like Google Keyword Planner and Semrush.
• Grouping keywords by search intent to create the site architecture.
• Setting SEO-friendly URL patterns.
• Defining the main interlinking strategy for seamless navigation.

Objectives and KPIs:

• Increase organic sessions (measured via Google Search Console and Google Analytics 4).
• Generate quality leads (measured by form completions).
• Improve keyword positions (aim to rank within the top 10 Google results, ideally the top 3).

Content Strategy:

• Creating main pages and structuring content with targeted keywords.
• Developing the blog section with a strategic interlinking plan.
• Implementing a regular publishing schedule for fresh content.
• Adding comments sections to posts for user interaction.

Usability Research

Automated Analysis:

An initial automated heuristic analysis using WAVE showed positive results with zero errors, two low-contrast issues, and six alerts. Adjustments were made to reduce these alerts and improve contrast, ensuring compliance with WCAG AA standards.

Manual Analysis:

To detect as many usability and accessibility errors as possible before launching the website, I performed a second analysis using two other two heuristic methods: Jakob Nielsen's heuristic evaluation workbook and Tognazzini's interaction design principles, along with an additional analysis technique, the cognitive route.

This allowed me to identify previously unnoticed problems and improve the website to make it more functional and easy to use.

UI Design

Design Elements:

• Logo and icon: Easy to read on a small scale, includes an icon made from a "U" and an "X" that symbolizes a happy user.

• Typography: "Inter", linked to the world of UX design for being the default font in Figma. It is used for text in paragraphs and secondary titles. The modern and readable "Space Grotesk" is used for the main titles.

• Color Palette: High-contrast colors chosen following WCAG AA standards to reduce visual fatigue. The highlighted color is blue (#F4Efe4), with black (#0a0a0a) as the primary color.

Iconography:

I designed the icons and illustrations specifically for Uxtopic. Its simple and irreverent tone contributes to a positive user experience.

Style:

The design choices ensure a balance between aesthetics and functionality. The typography and color palette enhance readability and visual comfort, while the iconography adds a friendly and engaging element to the user interface.

Branding

The Uxtopic brand reflects its educational and professional mission. The logo and design elements emphasize clarity and accessibility, while the playful iconography aligns with the site's goal of creating a welcoming learning environment.

Current State of the Site

Uxtopic is currently active, with new content updates and a new publication every week. Thanks to the focus on search engine optimization, it is gradually ranked higher in Google searches with almost perfect scores in Google Lighthouse. It was even mentioned on niche YouTube channels such as Artful Ruckus, focused on design.

By addressing usability, accessibility and SEO from the beginning, Uxtopic easily positions itself to become a valuable resource in the UX community, helping aspirants to develop their skills and advance their careers.