WIKI Education
WIKI UX Design Platform
UX/UI WIKI is an interactive learning platform designed to help designers build a strong foundation in UX/UI. With 100+ pages of structured, hands-on content, it covers essential topics such as the Figma interface, components, UI principles, UX research, and the complete design process.
Designed for easy navigation and an engaging learning experience, this resource provides step-by-step guidance, practical tutorials, and real-world insights to help designers advance their skills and careers.
Problem
The MeetMyDesign platform offers a wealth of content, and there's an opportunity to enhance it further with more engaging visuals, intuitive navigation, interactive elements, and additional resources like portfolio examples, design trends, and job opportunities.
Enhancing these areas will create a more dynamic and valuable learning experience for designers.
Goal
Transform MeetMyDesign into a visually engaging, intuitive, and interactive learning platform that supports designers at all levels. This includes streamlining navigation, enhancing visual appeal, integrating interactive elements, and expanding content with essential resources like portfolio examples, industry trends, and job opportunities. The goal is to create a dynamic and practical tool that empowers designers to learn, and advance their careers.
Solution
To address the challenges identified with the MeetMyDesign platform, a team of UX designers implemented a series of design improvements focused on enhancing user experience and providing valuable resources for designers. Here’s how the key features were improved:
1
Enhanced Visual Appeal
The visual design was refreshed with a modern, clean, and engaging aesthetic. The team introduced bold typography, consistent color schemes, and high-quality visuals.
2
Interactive Elements
To enhance the learning experience, the team introduced a range of interactive tutorials, video materials, and other dynamic features that encourage users to engage with the content.
3
Streamlined Navigation
The team redesigned the platform's navigation structure to make it more intuitive, ensuring users can quickly find the content they need.
4
Expanded Content
The content was enriched by adding new sections, such as portfolio library and examples, industry design trends, and job boards that link directly to job opportunities.
Designer's Role
-
UX researcher
-
UX designer
-
UI designer
Process
01.
Empathize
Secondary Research
Competitive Research
User Interviews
Personas
02.
Define & Ideate
User Stories & Flows
Informational Architecture
Usability tests
Wireframes
Style Guide
Low & High Fidelity Mockups
03.
Prototype & Test
Prototypes
Usability Tests
Iterations
My Tasks & Responsibilities
-
New Pages Development
-
Website, Tablet, Mobile
-
UX/UI Design
Task 1: Develop New Portfolio Pages
Pain Points:
'As a designer, building a strong portfolio is challenging without clear guidance.'
'As a designer, access to inspiring real-world examples makes building a portfolio easier.'
Solution:
Portfolio Guide: A step-by-step example to help users understand how to create their own portfolios.
Portfolio Library: A curated collection of designers' portfolios, allowing users to explore real-world examples.
Page: Portfolio Library
Page: Portfolio Example
WebSite
Tablet
Mobile
Task 2: Develop a New UX Design Trends Page
Pain Points:
'As a designer, staying updated on the latest UX/UI design trends can be difficult without a centralized resource that highlights current industry developments, emerging styles, and best practices.'
Solution:
Create a dedicated page on UX/UI Design Trends that consolidates the latest trends, tools, and best practices. This page will feature regularly updated content, showcasing examples, case studies, and expert insights.
Page: UX/UI Trends
WebSite
Tablet
Mobile
Flow of Work on the Project WIKI UX Design
Research Stage
Competitive Research WIKI Sites
Research Design:
-
3 WIKI Applications: Wikipedia, WikiHow, fandom.com
Key takeaways:
-
Comprehensive Content: These sites offer vast, community-driven knowledge with extensive internal linking. However, dense text layouts often make it difficult to scan and digest information quickly.
-
Navigation & Searchability: Most wikis provide basic search functions but lack advanced filtering or dynamic content discovery tools.
-
Visual Hierarchy & Readability: Many sites have inconsistent UI across pages, leading to a cluttered look that reduces readability and user engagement.
-
Monetization Impact: Some platforms rely on ad-heavy models, resulting in distracting layouts that negatively impact user experience.
-
Enterprise vs. Public Wikis: Enterprise-focused platforms offer better organization and collaboration tools but often have steep learning curves and require onboarding assistance.
Competitive Research UX Design Sites
Research Design:
-
6 UX/UI Websites: uxmatters.com, nngroup.com, uxdesign.cc, careerfoundry.com, figma.com, designlab.com
Key Takeaways:
-
Expert-Driven Content: Information is often research-based and structured, making it highly valuable but sometimes overly text-heavy.
-
Content Discoverability: Some sites lack effective filtering, making it difficult to find relevant resources quickly.
-
Interactivity & Engagement: While content is informative, most platforms do not incorporate interactive elements, such as real-world examples or dynamic case studies.
-
Visual Hierarchy & Layout: While generally better designed than general wikis, some UX knowledge bases still follow traditional blog-style layouts that could be improved for better readability and engagement.
-
Community Contribution: Some sites encourage expert contributions, but submission processes are often complex and lack clear UX guidelines.
User Interviews
Research Design:
-
4 Semi-Structured User Interviews, online
- TA: 20-45 yo, f/m, UX designers, students
Key Takeaways:
-
Practical Examples and Learning Materials Are Crucial: Respondents highly value resources that offer detailed, practical examples (e.g., video tutorials on Figma, UI kits, and reference layouts). This suggests that designers are looking for hands-on learning rather than theoretical content.
-
Desire for Structured Content: There’s a clear preference for structured, easy-to-navigate content that covers key areas of UX design, such as research, trends, and UI/UX examples.
-
Need for Up-to-Date Trends and Industry News: Designers are interested in staying updated on the latest trends, new products, and news about the industry. A resource that provides timely industry insights would be highly valuable.
-
Interactive and Customizable Tools: Respondents expressed a desire for more interactive tools, such as auto layouts, to improve their workflow.
-
Gaps in Figma Training: While many designers rely on external sources like YouTube for Figma training, there is a clear demand for more comprehensive, in-depth training directly on WIKI resources to fill this gap.
-
Diverse Resource Usage: Designers tend to rely on multiple platforms (e.g., Medium, YouTube, Pinterest) for different types of content. This suggests that a single WIKI resource might not fulfill all their needs, but consolidating various types of content could be a strong competitive advantage.
User Persona (Primary & Secondary)
Brand Overview
Brand Positioning:
PASV is an interactive learning platform that equips aspiring and professional designers with structured, hands-on content, practical tutorials, and real-world insights to build and advance their skills.
Target Audience:
20-45 yo, high income, professional & aspiring designers, teachers
Brand Personality:
Educational, Supportive, Practical and Hands-On
HMW Problem Statements
-
How might we improve navigation so that users can easily find relevant topics and progress through the content?
-
How might we design a seamless search and filtering system to help users quickly locate specific UX/UI concepts?
-
How might we integrate hands-on exercises and real-world case studies?
-
How might we make the learning experience more interactive?
-
How might we foster a sense of community where designers can share insights, ask questions, and collaborate?
-
How might we incorporate real-world projects and challenges to help designers practice their skills effectively?
-
How might we improve the way complex UX/UI concepts are presented to make them easier to understand and apply?
-
How might we provide portfolio-building opportunities?
-
How might we integrate job search opportunities to help designers transition from learning to real-world employment?
Functional Map (Example)
User Stories
-
As a user, I want to explore inspiring portfolios and find a practical example to learn from, so I can create my own professional portfolio that meets industry standards.
UI Style Guidelines
Design Evolution
Portfolio Page Evolution
Wireframes
Low-Fidelity Prototype
High-Fidelity Protype
Adaptation Tablet
Mobile
Trends Page Evolution
Wireframes
Low-Fidelity Prototype
High-Fidelity Protype
Adaptation Tablet
Mobile
Usability Testing
Usability tests, 4 people
TA: f/m, 20-45 yo, UX designers
Key Improvements:
-
Search Feature
Users emphasized the importance of a search function across the entire site and within specific categories, as designers prefer to quickly locate relevant content.Action: A search feature was implemented for the overall site, along with a dedicated category-specific search.
-
Mobile Navigation
Some users preferred a horizontal sidebar, while others favored a vertical one.Action: Both navigation options were developed to accommodate different preferences.
-
Trends Page Navigation
Users suggested adding a navigation feature at the bottom of the screen to navigate to the next popular design trend. They also appreciated the idea of a quick-return arrow to jump back to the top of the page.
Action: A "Next Trend" button was added for seamless navigation, along with a "Back to Top" arrow for quick scrolling.
-
Tablet Navigation for Trends Page
Users noted that tablet screens are smaller than desktops and suggested having both horizontal and vertical sidebar menus (similar to mobile) to maximize the main content area.
Action: The vertical navigation was replaced with a horizontal layout to optimize screen space.
-
Portfolio Library Page
Users wanted the ability to search for specific portfolio types, such as UX or Graphic Design.
Action: Category titles were added to the navigation panel, allowing for more efficient category-based searching.
Imrovements: Navigation Mobile
1. A search icon has been added to the top panel for easy access and availability on every page.
2. Trend Titles can now be accessed from both the vertical and horizontal sidebar menus.
Imrovements: Portfolio Library Page
In addition to the search feature, key category titles have been added to the navigation panel to enhance category-based searching.
Improvements: Trends Page
1. An arrow has been added for navigation back to the top.
2. A button added to move to the next section of trends.
3. A ticker animation has been selected to showcase popular design trends, ensuring engaging content updates.
Imrovements: Trends Page
For the tablet, the sidebar’s vertical navigation was changed to a horizontal layout, similar to the phone version. This adjustment enhances visibility and readability on smaller screens.
Conclusion
The transformation of MeetMyDesign into a visually engaging, intuitive, and interactive learning platform has successfully empowered designers at all levels. By streamlining navigation, enhancing the visual experience, and integrating interactive features, the platform has become a comprehensive and dynamic resource. With expanded content that includes portfolio examples, industry trends, and job opportunities, designers now have a practical tool that not only supports their learning journey but also accelerates their career growth.