video of the prototype (set on autoplay for desktop only. Player controls appear on hover)
Building Up Austin's UX community: UX in ATX
Overview
CLIENT: Standard Beagle, LLC
ROLE/RESPONSIBILITIES: UX/UI Design, Research, Usability Testing, Visual Design, Mobile Design, Design System, Branding
Team of 5 (part-time project)
PROJECT DURATION: April 2020-December 2020 (approx. 80 hrs. of meetings or 2 full weeks)
A Standard Beagle developer is working on the website now. The website is live, but is being fine tuned.
OBJECTIVE
Our Stakeholders wanted a new website. They created a new UX meetup group in Austin. As a business decision, they did not want to depend solely on Meetup.com for their audience.
SKILLS APPLIED
Persona, Journey Mapping, User Testing, Affinity Mapping, Card Sort, Usability Testing Wireframing, Prototyping, Design System Typography, Visual Design, Branding
TOOLS
Design: Adobe XD, Illustrator, Photoshop, Draw.io
Collaboration: Miro, Zoom
Research: Optimal Workshop
REFERENCES
Google Material Design, Design Systems (Mailchimp, Polaris, Atlassian) and articles from Medium, Nielsen Norman Group
Research
STAKEHOLDER INTERVIEWS
Our research process started with stakeholder interview. As a team, we collaboratively determined important questions to ask. I and a teammate interviewed our stakeholder.
These are a few of the questions from a list of questions (see slideshow for complete list of questions)
- purpose of UX in ATX?
- constraints?
- timeline?
USER INTERVIEWS and SURVEYS
As a team, we determined survey and user interview questions. Feedbacks from the surveys were used to generate our user interview questions. Both data from user surveys and interviews were used to generate an Affinity diagram. From our affinity diagram, we analyzed the data further into user insights. Finally, we arrived at five personas and journey maps–see user image below for user details.
Who are UX in ATX USERS?
(User persona details on click)
These are our primary and secondary users: Christina and Ronnie, respectively.
We presented our results to the stakeholder to get alignment on the project. With clear requirements from stakeholders and users, we began ideating.
CHRISTINA JACKSON
Junior UX Designer
"upskill for entry-level job"
RONNIE BENETTI
Mentor
"be a good mentor"
“I want to feel like I am part of the UX community, regardless my level. I hope to network and land an entry level UX position.”
—Christina
“…the only way we are going to be a more valid industry is if we keep making sure that knowledge is shared and that people are doing better work.”
—Ronnie
Information Architecture
SITE MAP
A rough site map #1 was created from user interviews and stakeholder needs. Next, I created a card sort (see card sort data) to understand how users would conceptually group navigation items.
However, this site map #1 had to be redone after meeting with stakeholder because
- lack of people power means less web pages and less features: no blog, no membership login, no job page
- no formal portfolio review process: it will be done at meetup or slack
- mentorship program will be considered later
A revised site map #2 took into account stakeholder feedbacks.
As UX in ATX is a new organization, our stakeholder wanted “About UX in ATX” as a top focus, more than events.
Wireframes
After reorganizing the site map, we were ready to tackle wireframing. As a team, each of us divergently worked on wireframing. I came up with some ideas (see wireframes above).
When we converged, we discussed our wireframes. In later wireframe iterations, we took parts of each other’s wireframe and recombined again until we found a design we agreed on. From there, we proceeded to work on a higher fidelity prototype.
Prototypes
Usability Testing
ROUND 1 USER TESTING
Once our mid-fi prototype was ready, we split up our began usability testing task. We were able to squeeze in two rounds of user testing. After first round of user testing, we found:
- our drop-down menu didn’t require a submenu for each section due to content size. We decided to go with tabs sections for easier navigation to content. (see gif of tabs in motion)
- Mentorship and portfolio review pages had minimal content because mentorship and portfolio review could happen within the slack channel.
Above: Top left: hi-fi prototype showing tabs in motion. Hi-fi 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.”
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.
After 2 rounds of user testing, we reconvened with our stakeholder and prioritized our tasks in relation to our timeline. We knew we had a lot of work to do. These were some additions:
- Grackle bird illustrations were added to provide local essence.
- Style Guide/Design System was created to coordinate with the brand identity of the website.
- Mobile designs were developed.
- Search filter function was refined: functionally and aesthetically. We voted on naming the tags.
- Verbal identity was created to fit with the tone and voice envisioned by the stakeholder.
Prior to the last round of user testing, we saw a decline in user volunteers. There were a few features we needed to find answers to. We decided to go with A/B testing via survey method.
These were some features we performed A/B testing on:
- Include Parallax scrolling or not?
- search filter layout (see images above)
- Home page banner location
- title for sections of website
Results from the survey helped guide our design decisions.
We then conducted a final round of user testing. As we had more content on the website, we discovered the need for a drop-down menu. Plus users were navigating via the footer.
dropdown menu (click to play)
Outcomes: What I learned
- Build in systems/components at wireframe stage
- Testing, testing is important
SUCCESSES
We pulled together as a team and completed this website, through the pandemic. We went beyond the website and integrated branding identity as well–which is important and goes hand in hand with the website.
This website is being developed and produced by our stakeholder.
IMPACT
User Feedback from Usability Testing:
“Everything was intuitive. Everything was where it should be.”
—Zarema
“Website is professional and light-hearted. Engaging.”
—Natalie