Introduction

Welcome to our Beginner’s Guide series, tailored for those embarking on the journey of discovering user experience (UX) or those seeking a refresher on fundamental concepts. In this installment, we delve into the world of sitemaps.

What is a Sitemap?

A sitemap is a hierarchical diagram that visually represents the structure of a website or application. User Experience Designers and Information Architects utilize sitemaps to define the taxonomy, grouping related content logically. Sitemaps play a crucial role in the user-centered design process as they ensure that content is intuitively organized, mirroring users’ expectations. Furthermore, they serve as reference points for creating wireframes, functional specifications, and content maps.

Why Should I Use a Sitemap?

Sitemaps offer several advantages:

1. Structural Clarity: They illustrate how the site’s navigation should be organized, enhancing user-friendliness.

2. Content Planning: Sitemaps help identify where content will reside and what needs to be created.

3. Page Relationships: They reveal the relationships between different pages, aiding in content flow.

4. Development Blueprint: Sitemaps provide a foundational structure for estimating development efforts.

5. Tangible Deliverable: They serve as the first tangible representation of what you’ll be creating.

When Do I Create a Sitemap?

Sitemaps are typically developed after completing persona and user journey assessments and wrapping up the initial discovery phase. They visualize insights gained about how users will navigate the site, their content needs, and preferred language. Additionally, sitemaps consider business objectives and the content required to fulfill the overall strategy.

How Do I Create a Sitemap?

There are two primary workshop methods for creating sitemaps efficiently. For this article, we’ll focus on card sorting, assuming you already have an idea of the content needed for the site or application.

Card Sort Workshop:

In a card sort, participants are provided with cards or post-its, each featuring a single piece of content or functionality identified during the discovery phase. These cards are labeled with reference numbers for future ease. Participants are then tasked with organizing the content into groups and assigning names to these groups. This technique is valuable for generating ideas for taxonomies.

Open Card Sort:

Participants are given cards with content written on them, similar to the open card sort. However, they are asked to sort these cards into pre-defined categories that you provide. If participants place cards in unexpected categories, it suggests the need to revisit your site structure. The closed card sort is used to evaluate an already-established taxonomy.

Use the Output

After the card sort session, you can organize the results into a mind map or spreadsheet, aligning categories and content references. Examine how participants have named items and, in the case of a closed card sort, review any unexpected placements. Remember to refer to your personas and user journeys at this stage.

Ask yourself:

- Does the proposed taxonomy support user journeys?
- Would different personas understand the labeling?
- Are there categories with only one piece of content? (Single-item categories are generally discouraged)
- Does the sitemap have more than seven categories? If so, can any be consolidated? (Over seven categories often indicates poor taxonomy grouping)

What Should a Sitemap Contain?

A sitemap should include:

- A homepage or home screen item at the top.
- Reference numbers for each item.
- Labels for each item.

What Should a Sitemap Look Like?

A basic sitemap is typically straightforward. For websites with extensive content, you may consider dividing the sitemap into multiple pages, each showcasing one category with a top-level overview. The hierarchy should follow a numerical pattern, with the homepage as 1.0 and categories incrementing numerically (e.g., the first category as 2.0, the second as 3.0, and so forth).

What’s Next?

Your sitemap serves as the foundation for what you’ll be delivering and the initial blueprint for defining the interface, particularly the navigation. It’s a valuable reference point for sitemaps, content strategies, and functional specifications. Plus, it provides an excellent way to communicate your plans to clients.

In our upcoming beginner’s guide, we will explore wireframes and how they define interfaces. Stay tuned for more UX insights and practical knowledge.

Every month, we trail the experiences of our UX Mentorship Program’s mentees as they embark on their UX learning journeys and strive to secure their first UX positions. Let’s meet this month’s mentees.

Mentee Spotlight: Fabiola Borquez
- Twitter: @fabi_borquez

1. What Have You Been Learning About UX This Month?

Fabiola: This month, my focus has been on understanding the core principles of user experience design. I’ve been delving into the importance of user research, usability testing, and information architecture. It’s been fascinating to discover how these elements work together to create user-centered products and interfaces.

2. What Challenges Have You Encountered in Your UX Learning Journey?

Fabiola: One of the challenges I’ve faced is the sheer volume of information available in the UX field. It can be overwhelming at times, but I’ve learned to break it down into smaller, manageable pieces. Additionally, I’ve realized the importance of hands-on experience, so I’ve been actively seeking opportunities to apply what I’ve learned through personal projects and collaborations.

3. What Are Your Aspirations in the UX Field?

Fabiola: My ultimate goal is to contribute to designing products that genuinely make people’s lives better and easier. I aspire to be a UX designer who understands the needs and desires of users, and I hope to work with teams that share this vision. My journey in UX is just beginning, and I’m excited about the possibilities it holds.

We’re thrilled to follow Fabiola’s journey as she progresses in her UX learning path. Stay tuned for more updates from our other mentees in the coming months.

“Accessibility for Everyone” is a groundbreaking book designed to assist designers in seamlessly integrating accessibility into their daily design routines. Today, we have the privilege of engaging in a conversation with the author herself, Laura Kalbag. In this interview, we explore the importance of making your products accessible to all.

Q: Laura, could you share what motivated you to write “Accessibility for Everyone”?

Laura Kalbag: Certainly! The motivation behind “Accessibility for Everyone” was to bridge a critical gap in the design world. I’ve noticed that accessibility often takes a backseat in the design process, and I wanted to change that. It’s vital to recognize that not everyone interacts with digital products in the same way, and I wanted to empower designers to create inclusive experiences for all users.

Q: Why is accessibility important for designers and the products they create?

Laura Kalbag: Accessibility is crucial because it ensures that everyone, regardless of their abilities or disabilities, can access and use digital products comfortably and effectively. Designers have the power to shape the digital landscape, and with that power comes the responsibility to create experiences that don’t exclude anyone. When products are accessible, they reach a broader audience, demonstrate empathy, and, ultimately, create a more equitable digital environment.

Q: Could you provide an example of how considering accessibility can positively impact a design?

Laura Kalbag: Certainly. Let’s consider a website or app. By implementing accessible design practices such as providing alternative text for images, ensuring clear and concise content, and using proper heading structures, you can dramatically enhance the experience for users who rely on screen readers. This not only makes the content more understandable for them but also improves search engine optimization (SEO) for everyone. In essence, accessibility enhancements often have a ripple effect, benefiting a broader user base.

Q: What are some common misconceptions or challenges designers face when it comes to accessibility?

Laura Kalbag: One common misconception is that designing for accessibility is burdensome and time-consuming. While it may require a learning curve initially, integrating accessibility into your design process becomes more natural with practice. Another challenge is the assumption that accessibility only matters to a small subset of users. In reality, it’s a universal concern that can impact anyone at any time, whether temporarily or permanently.

Q: Any advice for designers who want to start prioritizing accessibility in their work?

Laura Kalbag: Absolutely! Start by educating yourself about accessibility guidelines and best practices. Familiarize yourself with the Web Content Accessibility Guidelines (WCAG) and make them a reference point in your design process. Test your designs with assistive technologies or get feedback from users with disabilities. Collaborate closely with your team, including developers, to ensure that accessibility considerations are an integral part of the project from the outset. Remember, the more you practice, the more accessible design becomes second nature.

Q: Finally, what do you hope designers and readers take away from your book, “Accessibility for Everyone”?

Laura Kalbag: My hope is that “Accessibility for Everyone” serves as a practical guide that empowers designers to embrace accessibility as a fundamental aspect of their work. I want readers to understand that making products accessible isn’t just a checklist item; it’s an opportunity to create more meaningful and inclusive digital experiences. Ultimately, I hope this book inspires positive change in the design community and contributes to a more inclusive digital world.

Laura Kalbag’s “Accessibility for Everyone” promises to be a transformative resource for designers, shedding light on the vital role accessibility plays in our digital landscape. It encourages us all to design with empathy and consider the diverse needs of users, fostering a more inclusive online environment.

In the current landscape of UX design, Lean UX has gained significant traction. It advocates for quicker delivery by minimizing deliverables and embracing a highly iterative design approach. This methodology brings the product in contact with users early in the development cycle, enabling crucial feedback at a pivotal stage of the product’s life cycle. Intrigued by the potential of Lean UX, I embarked on a case study using Writr to demonstrate its effectiveness.

The Lean UX Approach

Lean UX focuses on rapid, efficient product development, emphasizing collaboration, early user validation, and constant iteration. It seeks to shorten the feedback loop between conceptualization and user feedback, ultimately delivering a product that precisely meets user needs.

The Case Study: Writr Web App

In this case study, we applied Lean UX principles to develop a web app called Writr, aiming to complete the project within a tight timeframe of just 4 hours.

Key Steps in the Lean UX Process: 1. Cross-Functional Collaboration: A diverse team, including designers, developers, and product managers, collaborated from the project’s onset, ensuring a shared understanding of goals and objectives. 2. Problem Definition: We clearly defined the problem we aimed to solve with Writr. Understanding our target audience and their pain points was pivotal. 3. Ideation and Prototyping: Rapid brainstorming led to the generation of multiple ideas. We selected the most promising ones and swiftly created low-fidelity wireframes and prototypes. 4. User Testing: With a focus on speed, we immediately tested our low-fidelity prototypes with real users to gather feedback on the app’s concept, flow, and usability. 5. Iterations: Based on user feedback, we iteratively refined the design and made necessary adjustments to enhance the app’s usability and user experience. 6. Minimal Viable Product (MVP) Development: By prioritizing essential features, we developed the MVP of Writr, ensuring a functional version of the app within the given 4-hour timeframe. Achieving Success with Lean UX and Writr

By adhering to Lean UX principles and this streamlined process, we successfully created a functional web app, Writr, within the challenging time constraint of 4 hours. The iterative approach enabled us to gather user feedback early and make informed decisions swiftly, resulting in an app that addressed user needs effectively.

Conclusion

The Lean UX methodology, with its focus on collaboration, rapid prototyping, user feedback, and iterative development, proves to be a powerful approach for expediting product delivery without compromising quality. The case study on Writr demonstrates how adopting Lean UX principles can lead to the creation of a viable product in a remarkably short timeframe.

Our Beginner’s Guide series aims to assist those embarking on their journey in understanding user experience or those looking to revisit the fundamentals. In this installment, we delve into the realm of wireframes.

Understanding Wireframes

A wireframe serves as a visual representation of a user interface, devoid of visual design or branding elements. UX Designers utilize wireframes to establish item hierarchy on a screen and communicate what each element on that page should encompass based on user needs.

Think of wireframes as akin to constructing a house. Just as an architect sketches out the floor plan before applying the finishing touches, wireframes provide a foundational structure for your website, acting as a vessel into which design and content seamlessly fit.

Wireframes range from low-fidelity pencil sketches to high-fidelity, fully annotated diagrams, covering everything in between.

The Importance of Wireframes

Wireframes prove invaluable for various reasons:

1. Guiding Visual Designers: Wireframes offer a starting point for visual designers, providing a framework to create screens.

2. Reference for Functional Specifications: They serve as a reference point for defining functional specifications.

3. Clear Communication: By presenting wireframes devoid of visual elements or branding, functionality can be effectively communicated to stakeholders.

4. Idea Exploration: Wireframes facilitate idea exploration without the constraints of visual design tools like Photoshop mockups.

5. Basis for Prototyping and Testing: They form a basis for prototyping and testing ideas in the early stages of development.

When to Create a Wireframe

Wireframes typically come into play after initial persona development, user journey mapping, sitemap creation, and other discovery activities are complete. However, lower-fidelity wireframes may surface during the discovery process itself, often taking a sketch-like format. These initial wireframes are primarily for exploring functionality options and are often considered as throwaway designs rather than a foundation for visual design or development.

Before delving into wireframing, it’s essential to have a firm understanding of your users’ goals, motivations, and tasks they aim to accomplish. Additionally, grasping the website’s structure through the sitemap is crucial to define each page’s purpose in aiding the user’s journey towards their goal.

Creating a Wireframe: Tools and Techniques Tools: If opting for low-fidelity wireframes, a pen and paper suffice. However, employing specialized software designed for wireframing streamlines the process, offering reusable common UI elements for efficiency. Industry-standard tools like Axure combine wireframing with powerful prototyping capabilities, but use whatever tool aligns with your comfort and preference. Content: Consider the content that will populate the page while wireframing. While it doesn’t need to be the final content, aim for a close approximation, envisioning the type of information users need to see, the language for calls to action, and the placement of supporting content. Avoid adding images unless essential to the wireframe’s purpose. Layout: Maintain a basic understanding of web page layouts, considering potential grid-based systems your developers may utilize. Focus on positioning the right elements in the right places rather than perfecting minute design details. Components of a Wireframe: Ensure your wireframes contain the following elements for easy reference and discussion: - A unique reference number linking back to the sitemap - Page title, correlating with the sitemap - Optional callouts describing interactions or different UI states, depending on the intended audience - Any supplementary information, such as specific templates or decision rationale The Look of a Wireframe

Wireframes typically adopt a black and white schematic approach, devoid of imagery, branding, or extensive use of color (except for links or callouts). Some tools, such as Balsamiq, provide a ‘sketched’ appearance, reinforcing the disposable nature of wireframes and encouraging open feedback.

What’s Ahead?

You now possess a set of wireframes ready for client presentations, user feedback collection, or discussions with your project team. Expect to iterate on your wireframes to fine-tune and improve them further. In our upcoming article, we’ll delve into the world of prototyping. Stay tuned!