My Framer Site

Singular XQ

Next-Gen Intelligence For a Next-Gen Digital World

UI/UX

USER EXPERIENCE

WEB DESIGN

Project Overview

My Role

• UX Designer

• UX Researcher

• Information Architecture

Tools

• Figma

• Miro

• Zoom

Timeline

30 weeks

Client: Singular XQ is a non-profit organization focused on democratizing global communication and offering digital consulting to provide continuous technology education. Their mission focuses on enhancing the digital commons through three goals: expanding open-source software adoption via strategic partnerships to promote equity; creating educational resources for startups & non-profit organizations with emerging technologies and building an active community to advocate for ethical web practices.

Goal: This collaboration centered on making SXQ's mission statement clearer and concise for their target audiences. Through meetings with our client, the SXQ team was interested in updating their website to tackle this issue. Our client tasked our project team with developing an effective landing page for their internal design team for future iterations of their company website.

Market Research

Competitive Feature Analysis

Our team engaged with Singular XQ with multiple comprehensive client interviews in bi-weekly Zoom meetings. Our discussions focused on critical assessment of their existing media platforms, identified key stakeholders, and evaluated the impact of prior initiatives for e-commerce websites. Cross-examination with other e-commerce websites revealed gaps in the current website model:

We expanded upon our research through user interviews with Singular XQ partners, donors, and members who recently joined their organization. The main goal of these interviews was to better understand user motivation for being affiliated with Singular XQ. Additionally, we wanted to know how they were introduced to Singular XQ prior to joining their mission?

◆ A hero section for first impressions on the

Singular XQ mission

◆ Multiple navigation features to quickly

view the website

◆ A feature that helps users view their

desired content while scrolling

◆ A feature to allow users to learn more

about Singular XQ for their goals

◆ Clarify and implement a clear mission statement on the landing page

◆ Reorganize site content based on stakeholder needs and behaviors

◆ Display past projects and their impact to both partners and donors

◆ Consolidate access to content (newsletter, podcast, etc.) on a single platform

◆ Ease of navigation for an intuitive user flow for

their stakeholders

◆ Accessibility to other Singular XQ digital platforms

for a connected experience

◆ Spotlight outreach projects & programs for their

respective target audiences

◆ Some e-commerce websites utilized calm design with excellent use of white

space to create a serene feeling for the site audience at first sight

◆ Other e-commerce websites use vibrant color themes and multiple

interactive elements which be very overwhelming for users

◆ Our solution space for the website could leverage calm design elements

without being too muted to risk not standing out among competitors

KEY INSIGHTS

User Persona

We developed our different website users into distinct user scenarios. Our user scenarios encapsulate the type of user that is motivated to visit the website to learn more about Singular XQ. After careful consideration with the SXQ team, we noted our personas' distinct backgrounds, calls to action, and visualized their path to success for their goals through sparklines:

After co-designing with our Singular XQ partners, we identified four primary personas that we envisioned interacting with all aspects of the website. These users are individuals interested in joining SXQ as beneficiary partners, technologists, individual donors, and organizational donors.

Our user personas were the best method for organizing our target audiences to illustrate a typical user for the website. Singular XQ and their mission draws a diverse range of stakeholders including the general public, beneficiaries, and prospect donors.

Small businesses

Non-profit &

public organizations

Users with extensive technical backgrounds

Independent private citizens interested in SXQ

01.

02.

03.

04.

Beneficiary Partner

Technologist

Individual Donor

Organizational Donor

Ex. User scenario for our Individual Donor persona and their associated sparkline. Our team used this model to

properly illustrate each user and their ideal goal for visiting the website.

What is the typical user flow to navigate the new website as our end users? What do they need to achieve their intended goal for visiting the website?

Affinity Diagram

Our strategy is to refocus the website’s design, sharpening the articulation of SXQ’s mission and using the website’s content to weave a narrative around the company's efforts and the pivotal role of open source, to drive increased traffic to existing projects and elevate overall awareness, fostering a deeper user engagement

We found common patterns during the user journeys for possible webpages & sections for the website. As such, we visualized the website content with affinity diagrams to properly determine what page on the website appeals to each stakeholder’s call to action and their actionable goals.

Using the groupings from the affinity diagram phase of our design process, we created an information architecture for the redesigned version of SXQ’s website with a sitemap format.

From this, we created five main pages or subsections that corresponded with each affinity diagram that would be linked in the website’s site navigation including who we are, partner with us, learn with us, join our community, as well as a footer/other section.

Before continuing with our high-fidelity prototype, my team and I engaged in visual analysis with other e-commerce websites to reflect similar visual designs sensibilities

We created our low-fidelity prototype in Figma to visualize our information architecture. Following the information architecture design, the headers specify the landing page’s structure and the order in each section is listed for the website's visual hierarchy. We used this iteration to identify the user flow for engaging in usability testing and the final design.

Wireframes & Prototype

Visual Analysis: Calm Design

Low-Fidelity Prototype

Visual Analysis

Visual Analysis: Hubspot

Visual Analysis: Mozilla Foundation

High Fidelity Prototype

Finally, with the visual analysis in mind, we added extensive content details and visual designs to the high-fidelity prototype. The final prototype exhibits calm design while keeping the Singular XQ brand at the forefront.