IterateUX website redesign

Project type
Timeline
Roles
Design competition
1 week
Team lead,
user research,
UI design
desktop and mobile view of Iterate UX website

Intro

IterateUX is an online community of UX designers spanning all skill levels. Members are sharing and learning together through events with guest speakers, and design exercises.

They host events on Zoom through Meetup. They also have an active Discord sever where designers hangout and chat about design topics, get feedback or career advice.

The problem

IterateUX needed a redesigned experience which would focus on; increasing membership through a newsletter sign-up, and providing better information and resources for people looking to become a volunteer or speaker at an event.

Kicking off

I started by going through the brief with the team. We all shared our thoughts and questions to get on the same page with the problem.

Next up, I laid out a rough schedule for the week to keep our team on track. This changed over the course of the week, but having an idea of where we should be at kept us all on track.

Rough week-long schedule for design task
Week's schedule

Some team members were located in the UK, while others were in the Pacific North-West. This added an extra challenge for coordination. To account for this, we found a daily time that we could all meet and work together. Keeping a list of tasks to do helped with the asynchronous nature of the project. This structure worked well.

Research

Due to the short timeline and small team, we didn’t have the resources to dedicate to a research phase. We opted to use Google Analytics data to understand how people used the site, combined with a survey to understand what users were thinking. This allowed us to work on understanding the problem and to focus on visual design while we collected insights.

The Google Analytics data taught us that most people bounced between the landing page and about page. Most users were new and wanted to learn more about IterteUX. We also found out desktop was the primary method of accessing the site.

Through our survey, we found users most wanted to learn about the group and join events. The current design didn’t offer much information about the events, so this would be another area of focus.

Improving discoverability
Reducing reliance on third-party solutions.
Adding more depth to content.

Design

We started our design by building a new sitemap. The old one had confusing labels and didn’t surface many of the pages that users were looking for. Through re-organization, we reduced the number of clicks for users to find what they needed, while increase the amount of content linked in the nav bar. The goal was to improve the discoverability of the content users were looking for, like learning about whiteboard challenges and how to join.

comparing an old, unclear sitemap with a new, clearer one
Old sitemap (left) and new sitemap (right)

To continue improving discoverability, we needed to update the nav bar. The old nav bar gave social media links a high priority, and some links like “support us” took users to other websites. To increase new member sign-up, we wanted to keep users on the website.

Comparing old nav bar which didn't surface many pages with a new nav bar which work better
Complicated Figma file with unclear structure

Using the new sitemap, we reorganized the nav bar to get users the resources they needed. The social links got moved to the footer, and we included a clear CTA, so joining IterateUX’s community would be easy-peasy.

The result is 100% of the resources can be found with 1 click in the nav bar. No more searching through the footer for useful links.

To increase independence from 3rd party solutions, we created self-hosted forms. This eliminates the need to use Google Forms. We included an email sign-up at the bottom of most pages, and moved old forms like the volunteer form to the volunteer page.

This creates more trust with users and gives IterateUX’s brand a stronger image because users never leave the site.

a new, self-hosted form for Iterate UX
New self-hosted form

To continue building trust, I re-wrote most of the copy for the website to provide additional information about the event types. The current design assumed a certain level of knowledge, but since the goal of the redesign is to increase new users, we have to assume users don’t know anything about the community. By clearly stating each section’s intent, it makes the user understand more clearly. Confident users convert, and that was the goal with the new copy.

As a bonus, we added new graphics to show off iterateUX’s fun side.

New graphics from discord, becoming a speaker and joining the community
New graphics for the website

Testing

One of the team members made a high-fidelity prototype, which we each used for usability testing. We chose a high-fidelity prototype because we were looking for feedback on both IterateUX’s brand, and how easy navigation was.

The moderated usability tests included users who were unfamiliar with IterateUX. They were asked to perform tasks and our design was evaluated based on how well users could execute on tasks. Here are our evaluation criteria:

Evaluation criteria: How many pages did users click to find something, time to execute a task, and impressions on visuals.

Users found all the items on the first page they clicked, but some users weren’t totally confident when they clicked-through. This was because there was some ambiguity in the nav bar titles, and unclear descriptions next to CTAs.

To clarify this, we changed the labels in the nav bar and included a short line of text before CTA buttons to explain what pressing it would do.

Comparing an old paragraph and Call to action with a new, clearer one
Improving user's understanding of CTAs through clearer copy

Users had issues with text size being too small, 16px on desktop. They also felt active states in the nav bar were too subtle. Our team went through the design together and tweaked things to address these issues.

comparing original 16pt font size with new 18pt size
increased font size on desktop
comparing unclear active state with a clearer one using an underline
Adding a clearer active state in nav bar (right)

Next steps

Since this was a one-week sprint, there is still opportunity to improve the design. Given more time, I would like to iterate on the forms, showing fewer items at once, and work on improving the flow for new member sign-up. To understand the new sign-up flow better, we would need to test the design with a live A/B test.

Results

Below is a small gallery of the final mockups that we submitted for the competition. You can play around with the updated prototype in this link.

What I Learned

The importance of planning

Having a solid timeline with clear outcomes for each day helped the team stay on track and made sure nobody was twiddling their thumbs.

Delegation is key to success

When each person takes ownership of a task it lets you work on much more at once. After the first few days when we built trust in each other, we got started moving much faster.

Teamwork is fun

I had so much fun working with the team. I’ve been the sole designer for most of my work to date. This was different. I got to share my excitement for the field and bounce ideas off each other. I shine most on a team.

Get in touch

Thanks for reading. If you'd like more detail, or just to chat, shoot me an email at gnlconnell@gmail.com with whatever you've got on your mind.

More case studies
User research / UI design

Improving way-finding in Figma

A design exercise exploring ways of improving way-finding for PMs and engineers within Figma.

Laptop with Figma running with several pop-out elements showing new features
User research / UI design

Collaboration in Ableton Live

A speculative design exercise for adding collaborative features into Ableton Live.

Laptop displaying Ableton Live with collaborative feature like comments and live cursors
↑ To Top