Alexander by HAYDN
Marketing website design
Duration
June 25th, 2022 - July 15th, 2022
Role
Sole UI/UX Designer
Overview
I was tasked with assisting a company, HAYDN, which has a new AI content generator product named Alexander.
Steps To Complete
1) Create and test a prototype from a set of low-fidelity wireframes
2) Create a high-fidelity mockup of a one-page marketing website based on the low-fidelity wireframe
Research Guide
Created a one-page research guide for my usability testing.
Task #1: Review the homepage and in your own words, explain what Alexander does
Purpose: To determine if the homepage uses effective wording, hierarchy and layout.
Results:
All participants had similar answers for what Alexander does, although participants 2 and 3 thought there could be more information (in words) about how the platform works
They liked the idea of including videos (“watch how it works”) but thought additional wordage/sections would be useful
Usability Testing
Task #2: Review all plans then sign up for the free plan
Purpose: To determine if this process is easy to navigate and to uncover any changes needed.
Results:
Participant 1 thought the difference between each plan should be more clear (i.e. make the comparison page more visually appealing)
Participant 2 did not like the color choices and thought the profile page/dashboard (last screen in task) could be more robust
Task #3: Go to the Alexander blog (without using footer) and filter for the most popular article
Purpose: To determine if the filter function on the blog is necessary/easy to understand
Results:
All participants thought this task flow was easy to understand (all used the sort by button), however, participants 3 and 4 said that there could be more filtering options added
They would have preferred a check list for the tags list, not buttons
Testing Insights & Next Steps
Add more information about Alexander on the homepage (more words/explanations)
Add more sections to the homepage
Update the plan comparison page to make the differences between each option more clear (maybe a numbered list or using a check marked list)
Add more filtering options on the blog page and update tags list
Rework dashboard/profile page
Low-Fidelity Frames (iteration #2, post testing)
Task #1: Review the homepage and in your own words, explain what Alexander does
Task #2: Review all plans then sign up for the free plan email
Task #3: Go to the Alexander blog (without using footer) and filter for the most popular article
High-Fidelity Homepage (Iteration 1)
Includes mobile, tablet and desktop view
High-fidelity Homepage (Iteration 2)
Includes mobile, tablet and desktop view
Takeaways and Conclusion
This was a very interesting yet challenging task because it was my first project in the Flatiron School program that required us to go through multiple steps (i.e. mid-fidelity, testing, high-fidelity) of the design process. The research portion of this helped me realize the importance of usability testing and of human-centric design. The insights gained from users are invaluable - you can observe how users behave with your product first-hand and understand their main frustrations and needs which helps widen your perspective and improve your product tenfold. In terms of interface design, I learned how important it is to pay attention to the details, specifically when it comes to typography, color and spacing. One of the “big-wins” I had during this project was the illustration I created (in the hero section of the homepage) using figma.
My next steps for this project are to create different user flows and additional screens for high-fidelity version 2.