Over 7 ½ months, I collaborated virtually with a volunteer UX team to build a brand for a rapidly growing UX organization in Central Texas. We utilized design thinking to identify stakeholder and user needs, develop the site’s information architecture, iteratively design and test prototypes, and provide a developer hand-off with high-fidelity assets and branding guidelines. This initiative successfully contributed to organizational awareness and created a unique space for the organization to grow.
Project Name: Building a brand from the ground-up for a large, Austin-based UX organization
Client and Project Type: UX in ATX/Standard Beagle/Volunteer Project
Project Date: April 15th - December 3rd, 2020 (~7 1/2 months)
Collaborating with a team of four other up-and-coming UX designers, I helped build a brand from the ground-up for UX in ATX, a growing UX organization based in the heart of Austin, TX. From identifying stakeholder needs and conducting user research, to branding and deliverable hand-off to client stakeholders, I was involved with the entire end-to-end process and design of the UX in ATX's website and branding.
In April of 2019, Cindy Brummer faced a wicked problem. The UX group that she had founded was on pace to very quickly outgrow the roots of their humble Meetup page - as were Cindy’s ambitions for the organization. Cindy decided to put a stake in the virtual ground - it was time for a dedicated website for the organization, one that would function as a hub for all members, meeting information and organization resources. Leveraging existing members of the UX in ATX organization, Cindy recruited my help, as well as the help of four other members, to design a website for UX in ATX in order to reduce the organization’s reliance on the Meetup platform.
Working fully virtually over the course of over 7 and a half months, our team of volunteers leveraged design thinking methodologies and human centered design principles to design, from the ground-up, a website worthy of the ever-expanding UX in ATX organization. The website is currently under development by Standard Beagle and is slated to go-live later this year.
Our team was tasked with the challenge of designing a website that is entirely controlled by the organization and didn’t have to rely on third parties services such as Facebook or Meetup. Several pain points were uncovered with the current Meetup group during our stakeholder interviews - including platform limitations such as no links for online events, Zoom only conferences, the inability to record meetings and bad UI.
A screenshot form our team's first stakeholder meeting with Cindy (bottom right).
Several feature requests were made by stakeholders - the website must have:
Several constraints were in place:
With a minimal viable product (MVP) established and requested feature sets/project constraints laid out, our team set out on the next step in our design-thinking process - identifying and understanding our users.
A survey of users was conducted to identify quantitative information, such as user demographics, work and education backgrounds and UX experience levels. Information gathered through the use of user surveys was aggregated and analyzed to help us generate questions for user interviews, our process of qualitative research.
A breakdown of survey takers responses indicates that the organization contains a wide spectrum of members with varying experience levels from hobbyists to senior UXers.
Six virtual interviews were conducted with users of various experience levels to better understand needs and user motivations. Questions were designed to uncover motivations for attending UX meetups, understand what makes a UX community successful, as well as uncover networking and mentorship preferences. User survey and interview information was synthesized virtually through the use of Miro affinity diagrams. Based on identified trends and uncovered insights, five User Personas and Journey Maps were created:
Of the five persona's we identified - Christina, the Junior UX Designer and Ronny, the Mentor, were chosen to be our primary and secondary personas - given their prominence in the organization.
Our findings were presented to stakeholders, who were impressed by the depth of our research and quality of our deliverables. To better establish concise objectives for the project, a primary and secondary persona were selected to be our primary points of focus. With a solid understanding of who our users were, as well as stakeholder requirements, we began ideating.
A card sort was conducted with 15 participants to help inform our information architecture. A site map was developed based on the results, which would serve as a starting point to the creation of our website’s global navigation and content hierarchy. Keeping our primary and secondary personas in mind, we set out to create low-fidelity wireframes for the website’s primary pages. Low-fidelity wireframes were reviewed with stakeholders to ensure alignment. Once initial approval was received from stakeholders, we began refining our wireframes and developing prototypes for user testing.
The very first low-fidelity wireframe featured a user dashboard that placed an emphasis on upcoming events. All wireframes and prototypes were developed collaboratively in Adobe XD.
Each round of testing focused on different aspects of the website, from validating global navigation and hierarchy, to page and content layout, to user accessibility and branding. User testing was conducted virtually with 4-6 different participants of varying UX experience levels who were asked to complete various scenario-based tasks. All sessions were conducted virtually via Webex, recorded and reviewed. Testing outcomes were documented and shared during team meetings to help identify deficiencies and/or points of focus in preparation for the next round of testing. In total, four rounds of user testing were conducted over a four month period ranging from July to October.
.jpg)
We leveraged Miro to visualize the findings of each round of user testing, and to identify key insights/pain points/potential areas of improvement.
Each round of testing helped to validate and refine our design - bringing us closer and closer to a polished final product. As we inched towards higher levels of fidelity, greater consideration was placed on responsive and mobile design as well as the development of a consistent style guide.
With each round of user testing we iterated on our existing designs based on user feedback. From the very first low-fidelity wireframe (left) to the final high-fidelity prototype (right).
Over the course of the project the UX in ATX organization grew substantially, from 500 members to over 1300. As the organization expanded it's sphere of influence in the UX mentoring space, so did our expectations of what the website could be. With new members joining everyday, not just from central Texas, but all across the United States and all over the world, new questions were raised. "What if our UX in ATX website served as a template for other regional UX organizations?" These considerations and more were raised throughout the course of our project. Several changes in scope were made throughout the course of the prototype testing period, from the removal of discussion boards from the MVP to the addition of featured sponsor areas and guest speaker sign-up.
A familiar sight around Austin, Grackles will be featured prominently in illustrations on the UX in ATX website, adding some character and light-heartedness to the site.
Drawing inspiration from the very things that make Austin unique, a visual identity was established for UX in ATX. An illustrator was brought onboard pro-bono to help develop unique illustrations for the website.
Comprehensive branding guidelines outlining the brand’s color palette, typography and iconography, as well as proper use for each (including considerations for accessibility standards) were created. At the request of the stakeholders, a finalized sitemap providing a high-level overview of website navigation as well as detailed redlines were developed, providing the development team page-by-page exact specifications for content including spacing, margins, font sizing, etc. A case study was created to provide an in-depth look into the iterative design thinking process we leveraged to design the website.
The finalized UX in ATX logo sizing guide, presented in different sizes for various mediums.
After close to eight months of countless virtual team meetings, multiple rounds of user testing and several stakeholder discussions, our team of UX designers presented finalized project materials to project stakeholders and developers. What began as a learning experience for a small group of up-and-coming UX designers turned into a full blown project for one of the fastest growing UX organizations in central Texas, complete with comprehensive and professional-grade deliverables that repeatedly blew away our stakeholders expectations. As of the writing of this case study, the UX in ATX website is currently under development by the Standard Beagle development team.
