Above: Hi-fi Prototype
Capturing Austin's character in UX in ATX website
UX Research: Stakeholder and User Interviews, Personas, Journey Mapping, Site Mapping, Card Sorting, Usability Testing
Design: Wireframing/Wireflows, Website Design, Mobile Design, Accessibility, Design System.
Data Analysis: Qualitative Data Analysis
Documentation: Redlining, Documentation.
Design: Adobe XD, Adobe Illustrator, Invision Draw.io, Flowmapp
Research and Data Analysis: Optimal Workshop, Google Docs, Sheets and Forms, Miro
REFERENCES: Google Material Design, Design Systems (Mailchimp, Polaris, Atlassian) and articles on Medium, Nielsen Norman Group.
ROLES and COLLABORATION
I was a generalist in our team of 5: moving from research to wireframe/wireflows, to working with another designer on typography and color/look and feel of the website, then moving on to visual identity, usability testing and design system.
Collaboration on the team started with inputs, ideas and agreed tasks during the research phase. During the design phase, each of us brought our design ideas to the table to narrow down our design preferences. We then moved to groups of 2 or 3 to collaborate on aspects of the design process. Our design decisions were based on user testing results, former design experience, researched articles, and prioritization, taking into account users and stakeholders needs.
UX in ATX Meetup group is a UX interest group that formed late 2019. Since COVID happened, in March 2020 they moved their meeting online. Meeting attendance exploded with attendees from outside of Austin as well as those in Austin.
The stakeholder wanted an event website, where she could post UX in ATX events and news.
She also wanted to UX in ATX to be a community place. In short, our stakeholder and organizers wanted UX in ATX to be the place for all UX Designers to grow, gain skills, and build each other. As Cindy, our stakeholder puts it,
“I want our (UX Designers) to feel that this is my place. I belong. These are my people.”
WHY DID UX IN ATX ORGANIZERS WANT A WEBSITE?
- The organizers of UX in ATX (Austin, TX) did not want to depend on the Meetup platform for their UX events outreach. Meetup only allows Zoom for online meetings. Organizers cannot choose other meeting platforms.
- They recognized the need for the UX community to support each other through knowledge and resource sharing. The website would serve as a medium for this.
Our stakeholder wanted to grow her brand as a UX leader. One way to achieve this is by organizing UX events, sharing her knowledge, and providing helpful content for the community.
How might UX in ATX build an inclusive UX community such that all UX Designers can learn, grow and support each other?
Building an inclusive community takes a lot of steps: the above diagram shows how a website and visual identity fit into the overall plan.
This part time project involved 5 team members: 3 UX designers with graphic designer background, 2 UX Designers with background in accounting.
WHAT DID OUR STAKEHOLDER and UX DESIGNERS WANT/NEED ?
After our user interviews, we discovered that our stakeholder perception of user needs is realistic and accurate.
A FEW PAIN POINTS WE LEARNED
- Our users want to be able to obtain meeting content if they miss a meeting due to work schedules
- A senior UX Designer feels that UX events are geared more towards junior/new UX Designers. Contents are oftentimes recycled or lackluster.
- Job search becomes difficult when recent UX graduates do not have real client projects.
- Beginner UX Designers are overloaded with UX Resources. They need to help to determine which UX content are helpful or need to know?
There were a few points of divergence in wants/needs, such as project showcase, job postings or branding needs.
These divergences represented opportunities for creative thinking and strategies to fulfill them.
CHANGE IN STAKEHOLDER NEEDS = DESIGN CHANGES
Our UX Research process was coming along quite smoothly. We interviewed users, created personas, did journey mapping, and affinity mapping. I created a card sort based on stakeholder and user needs, then followed with a site map. (external link)
- At our second stakeholder meeting, however, due to lack of personnel, a few web pages had to be placed on the back burner, namely, Login and member profile with links to portfolio, and forum. Scaled-down job listings for volunteers or community projects and event summary written in blog format remained.
- This scenario forced us to decide on what’s important and needed in the community, but at the same time do not impinge on a web administrator or volunteer’s time. Our designs needed to be simpler (but not basic). A developer would be able to implement the designs.
- Additionally, features such as Speaker Bios pages and tags for event type were requested by the organizer..
(Note Journey Map and Personas were consolidated by teammate–PJ)
Above: initial wireflow of website, after stakeholder meeting #1. Some pages were removed or deprioritized.
We were excited to start our design process with wireframes. Each of us started at different time frame, due to family events/vacations, etc. I did 3-4 rounds of wireframe designs: each looking at possible card designs, navigation, and interaction.
Above: Cards on carousel, flip cards. Below: Volunteer Opportunities cards with labels and different sizing.
Above (L-R) sample wireframe page from the team: PJ, MZ, AY, NW. We took parts of each others design and recreated more designs.
OTHER DESIGN CHANGES
- UX in ATX meetup was gaining traction with a lot of participation from people outside of Austin. Our homepage needed to be redesigned to add a blurb about UX in ATX. We had originally focused on having Events on the homepage.
- In another meeting, our stakeholder and organizers loved the cityscape illustration but not like the free stock illustration. At this point, we were lucky enough to know an illustrator who could do illustrations for us.
Our user testing was based on task completion followed by qualitative feedback from the users. We did 4 rounds of testing with a total of 16 users.
User testing revealed a number of surprises and changes that were needed.
- Our pre-selected filter tags confused the user when he/she tries to select a tag. This dictated we should not pre-select a bunch of tags, in combination with using “+” and “x” icon animation (ie animating the “+” into an “x” in a bunch of tags).
- Sometimes you think your wording is about the same, it isn’t (clear vs. reset). There is a preference toward “clear.”
- Users have habits when it comes to Navigation. One user expected to find a drop-down menu. We didn’t have a dropdown menu but a secondary menu below the main menu. Since the prototype didn’t show the intended sticky menu, the user couldn’t find the navigation. We think the problem is solved with a sticky menu.
Above and below (clockwise) Prototypes 1-4. Prototype 1: User commented on large text and UI. Prototypes 2-4: one of the fixes in the prototype was the filter. Users expected to select the filter tags vs having all the filter tags preselected and click to “deselect.” Reset text language confused the user more than “clear.”
- Over the summer, our team was not fully assembled due to family, travels, and preplanned activities. We lost a bit of momentum in design.
- Recruiting users for testing became more difficult. We had a lot of volunteers at the beginning. During the summer, we had a hard time recruiting users for user testing, possibly due to vacation and family time. I now understand the need for research planning, recruit planning and having an agile process.
- Our intended meeting times did not work with all stakeholders so there was a bit of rescheduling.
- We had to find FREE tools that everyone on the team could use: this meant breaking up a card sort into 2 parts to get 15 users or choosing a low learning curve tool.
OUR PROCESS NEEDED IMPROVEMENTS
- Create a design system early on: find out colors, type scale, decide on typography, and grids while creating lo-fi wireframes. This will save a lot of time, create a more consistent design look early on.
- Since our group of 5 was large, I think we should have broken our group into 2’s and 3’s to work on the design process in the beginning. I find this out much later when I worked on the style guide/design system with another teammate, and we were able to provide feedback to each other and designed better and faster. Also our team could benefitted from having a research plan (per this article I just read).
- We should have started the wireframe process with an agreed on process–and start with components: focus on the design of the navigation, cards, etc. This way, once those are finalized, we could “plug” them into our wireframe and layouts and present the pages as such. This would have saved us time and also reduced variations in the design (which we caught during the design QA stage towards the end–i.e finding hidden white drop shadows.)
- We didn’t have a formal design critique process. I think this would have been helpful in catching anything we missed during the design process.
- Users have unexpected ways of doing things on the website: its imperative to test and consider edge cases when it comes to navigating and finding something.
- We sometimes take clarity for granted. Sometimes you think you are clear about something and user testing reveals more clarity and specificity is needed.
Overall I learned a lot from this process. My teammates who have been through bootcamps commented that they also learned a lot more through this case study.
In addition to UX Design, our team decided to take on branding for the website.
Below are proposed visual identities I presented to our stakeholder and organizers.
Below are starting idea sketches for the logo. I considered the concepts used UX process, the items used in UX process, positive and negative space as well as how the letters stack, place against each other.
Although my design didn’t get chosen, I enjoyed the creation process.
I played with shapes: slicing, overlapping, adding, subtracting, extending and putting them in perspective.