For my capstone project at General Assembly, my team and I worked with the Atlanta networking group UX Helpers to design a website from the ground up. This was completed in just 18 days.
There are a number of UX networking groups in Atlanta. In order to stand out and continue growing, UX Helpers needs a website to showcase their uniqueness and value. On the other side of the equation, local Uxers need to find networking events to learn more about relevant topics, foster personal growth, & gain meaningful connections without navigating through multiple sources to locate them.
A fully designed proof of concept that houses relevant content for users while allowing them to easily access resources & sign up for educational networking events. This website will also lay a good foundation for UX Helpers current priorities while setting them up for future expansion.
My Contributions
While I contributed to each phase of the project, I played a pivotal role in our competitive analysis, advocating for a survey, creating designs, and testing our designs. After our class finished, I developed a mobile version of our mock-ups for extra practice.
Duration
18 days
Tools
Figma, Miro, Google Docs, Google Forms, Canva
Click a box to skip to a specific section or keep scrolling to start from the beginning.
User Interviews
Card Sorting
Competitive Analysis
Stakeholder Interviews
Affinity Mapping
User Personas
Site Map
User Flow
Design Studio
Sketching
Paper Prototype
Usability Testing
Mockups
|---------------------------------------------------------- 2 weeks ----------------------------------------------------------|
UX Helpers first started in March of 2019, with the goal of providing an interactive experience for UX Designers so that they can "walk away with more of an impact." The group is open to creative professionals of all levels and allows them to take away helpful resources for future use. While they had a number of social media profiles (meetup, twitter, instagram), they did not have a dedicated website. When UX Helpers approached us, they were open to whatever design ideas our research proved to be best. Color, fonts, and general layout had not been chosen. They did, however, want us to keep a number of things in mind:
As luck would have it, the UX Helpers next event happened to be only a few days after our first meeting with them. The purpose of this meetup session was to guide the attendees through the pros and cons of a design studio. This is a great technique for collaboration on possible design solutions.
Our role was to observe the various groups and look for key patterns in their designs. This would help inform our own design decisions once we got to that part in our process.
Participants conducting a design studio at a UX Helpers networking event
We found that users expected to see these three things on the homepage:
To gain a deeper understanding of what local UXers expected from meetup groups, we conducted 6 interviews. Keeping in mind that UX Helpers wanted to reach UXers of all levels, our interviewees came from a variety of backgrounds and had varying degrees of experience with some just starting out and others at senior levels. Our interviewees also ran the full spectrum of personality types ranging from very introverted to very extroverted.
"Collaborative or more interactive events make me feel more comfortable."
"I expect to create meaningful relationships that help me grow as a UX Designer."
"The only reason I would attend meetups is if I am really interested in the topic."
"The Design Studio has been my favorite meetup so far because of how hands-on it is."
Affinity mapping revealed a number of key insights from our interviews:
After interviewing our users, I shifted my focus to understanding what the online presence of other Atlanta-based meetup groups were like. My competitive analysis compared UX Helpers with 3 other groups. I found that all of these groups were on Instagram, but UX Helpers were the only ones on LinkedIn. I also found that only 2 of the groups had a dedicated website which mostly functioned as a hub for their social media links and information about past events.
Our next step was to conduct a card sort. We conducted this at a point when our scope was bigger than the website needed to be. While we did affirm some of our assumptions on what the main navigation should be, it may have been better for us to skip this step and put more effort into our final mock-ups. Nevertheless, our results revealed that our main navigation should have the following:
At this point in our process we were able to define our personas and make sure we were all on the same page with what our users goals and pain points were.
While we knew what UX Helpers and other atlanta meetup groups were using for social media, we realized that we were missing some key information:
To find this information out, we created a survey and sent it out to various UXers in Atlanta. We received 22 responses, revealing that LinkedIn was the most popular social media used in regards to UX and blogs were the preferred medium for UX information.
When asked why our users preferred LinkedIn, they said they found it to be a great source of "professional" information and a great tool for networking.
Thinking back to the competitive analysis I conducted earlier, we realized that UX Helpers currently had an advantage over other Atlanta meetup groups: They were the only ones on LinkedIn, the most used social media app for UX!
Now that we had all the data we needed, we created our problem and solution statements.
Problem: Uxers want to attend networking events to learn more about relevant topics, foster personal growth, & gain meaningful connections without navigating through multiple sources to locate them.
Solution: This will be resolved by a UX Helpers website providing an all encompassing media hub that houses relevant content for users, while allowing them to easily access resources & sign up for educational networking events.
Due to time constraints and since our overall design wasn't very complicated, we opted to create and test a paper prototype. We tested this prototype with 3 users.
Here is our initial design:
A user (in the middle) testing our paper prototype
Paper prototype insights:
After gathering useful feedback from our prototype, our team decided to begin making mock-ups in Figma. We chose Figma because it allows for live collaboration with multiple users.
Our first versions of the homepage and about page compared to our second versions:
While our stakeholders liked the general direction we were going in for our first mockups, they had a number of requests:
Iterating on this feedback, we implemented these changes and developed our second version of the mockups (as seen above). We changed the main color from blue to green because our client liked the color and, at least in western culture, it can represent "growth."
After finishing this round of mockups we conducted 4 usability tests. We had users go through the process of signing up for an upcoming event and finding information on past events.
Usability testing with version 2 of our mock-ups
We made a number of iterations after testing:
Changes we made based on user feedback:
While some of our users expected an events list page, we opted to save this for future steps because UX Helpers has only one event per month.
Some of our final mockups:
Iphone SE mockup video:
I'm always happy to discuss UX, music, modular synthesis, ping-pong, etc...
