Background
THE PROBLEM
Before the launch of the website redesign by Wizardly, the Alloy team had added extra copy at the last minute which negatively affected the user experience. With the abundance of content, users found it hard to quickly scan and navigate different pages. After some time, Alloy recognized the need to improve the user experience of the website, so they contacted Wizardly.
At this point, I had joined the Wizardly team to introduce and implement UX services for clients. I took the lead on redesigning the UX of the Alloy website for this project.
THE SOLUTION
My approach to improving the website's user experience included conducting user testing, auditing the current website, defining the pages' key performance indicators, streamlining the user flow, and more.
I also developed a comprehensive list of recommendations to improve the website's user experience, ranging from small tweaks to major redesigns. It was essential that our design decisions be supported by user data during this project, so we could receive the approval of Alloy stakeholders—many of whom were scientists—to move forward.
Teams & Their Roles
Lorem ipsum dolor sit amet consectetur. In ut eu odio massa pharetra enim adipiscing. Enim ultrices amet tellus nullam. Tincidunt eu auctor nascetur adipiscing integer mi diam.
STARTING POINT
Understanding the Users
Before the launch of the website redesign by Wizardly, the Alloy team had added extra copy at the last minute which negatively affected the user experience. With the abundance of content, users found it hard to quickly scan and navigate different pages. After some time, Alloy recognized the need to improve the user experience of the website, so they contacted Wizardly.
At this point, I had joined the Wizardly team to introduce and implement UX services for clients. I took the lead on redesigning the UX of the Alloy website for this project.
Survey outcome
The two surveys received 17 responses that confirmed the findings of my website audit and uncovered other issues that had not previously been identified.
Problems Uncovered
-
All pages looked similar, hard for users to identify that they were on a new page.
-
Large headings in each section overwhelmed users, making it hard to identify what was essential.
-
The copy was cluttered, making it difficult for users to quickly scan and navigate.
Survey outcome
-
Assigned the main page's colors to help with identification, including their sub-pages.
-
Created a structured design system that utilized typography hierarchy, while also using the bolder sized fonts for specific areas.
-
Set limits on header and body copy lengths, and use H6 to help identify each section.
Lessons Learned
Alloy's users consisted of entrepreneurs and scientists, and I quickly realized that they did not want to be bothered with surveys or testing. After the initial survey was rejected, I shortened it, understanding that these busy people needed something more straightforward. This effort was also declined. Meanwhile, our contact at Alloy had sent the survey to their users via Mailchimp. Although some opened it, most of the clicks were to the website, with no responses.
Desiring user feedback, I needed to be creative. With the two goals of gaining feedback from new users, I reached out to people outside of their user group. We wanted first impressions from those less familiar. The second approach was to have our Alloy contact send the survey internally, as these people were already familiar with the site and the users' industry. This wasn't ideal, yet the feedback was valuable.
IDENTIFYING AREAS FOR IMPROVEMENT
Website Audit
While awaiting user feedback on the survey, I audited the site to locate areas for improvement to report to Alloy stakeholders. I captured screenshots of pages to be redesigned and added my recommendations with annotations in the Figma file.
The survey results, when received, revealed a common theme: users had difficulty moving from the home page to other pages, creating confusion. This led me to the conclusion that the user experience needed to be updated.
User Flow
Before creating a new user flow, I needed to understand and visualize the current flow in order to identify what wasn't working at a high level. This was immensely helpful in restructuring the user flow to be more streamlined and removing sections that were unnecessary.
Previous Flow
Along the way, I also identified what needed to be fixed on the home page. It's important to note that the home page was outside the scope of the redesign. However, with the combination of user feedback data and my updated user flow, I was able to effectively express the importance of redesigning the home page with a wireframe during a meeting.
New Flow
THE VISUAL PROCESS
Mockups
Lorem ipsum dolor sit amet consectetur. Non arcu nulla fermentum lobortis praesent non leo mauris. Eget et sed quis auctor lectus ac nunc ut ut. Sit non eu at molestie mauris. Eu dictum urna nisl condimentum metus scelerisque eleifend. Accumsan maecenas.
IDENTIFYING AREAS FOR IMPROVEMENT
Website Audit
While awaiting user feedback on the survey, I audited the site to locate areas for improvement to report to Alloy stakeholders. I captured screenshots of pages to be redesigned and added my recommendations with annotations in the Figma file.
The survey results, when received, revealed a common theme: users had difficulty moving from the home page to other pages, creating confusion. This led me to the conclusion that the user experience needed to be updated.
Outcome
User Flow
Before creating a new user flow, I needed to understand and visualize the current flow in order to identify what wasn't working at a high level. This was immensely helpful in restructuring the user flow to be more streamlined and removing sections that were unnecessary.
User Flow
Before creating a new user flow, I needed to understand and visualize the current flow in order to identify what wasn't working at a high level. This was immensely helpful in restructuring the user flow to be more streamlined and removing sections that were unnecessary.
