Navigation 2.0 Prototypes Showcase
What you are about to see are several prototypes, both mobile and desktop, that I created for user testing for our new navigation on the Lumen website. This is more about how different prototypes impacted the testing results than the results themselves.
My Role
UX Designer,
Wireframing & Prototyping
Project Duration
2 year project
Area of Focus
Main Navigation / Browser Site
Synopsis
I was tasked to create a couple of prototypes in order to test our new navigation designs for Lumen.com. It was a long journey using different tools and methods in order to obtain the data we needed within the limitations that were set.
Flexible Desktop Nav Prototype
First prototype made for desktop users for unmoderated test in usertesting.com
Requirements
Research goal:
Taxonomy & desktop function
To obtain users' feedback on how our navigation worked and the menu items within it.
Focus device: Desktop
Data shows that most users access Lumen's website via desktop.
Menu that opens on hover
Based on previous user interviews on their preferences.
Complex and flexible prototype
So that the user can naturally play around with the prototype.
What is the main challenge?
Limitations of XD's prototyping feature
Rudimentary prototype features, limiting the test that we can do, causing a lot of complaints about the prototype itself, instead of the experience.
Results & Benefits
Testers freely explored our prototype without issues
Obtained more natural responses, no need to lead the tester due to limitations of the prototype.
Less complaints on the prototype itself
This feedback was saved for answers that were essential for our research goal.
Linear Nav Prototype
The next few prototypes, made for mobile testers through unmoderated usertesting.com
Can't use UXPin anymore!
After using it for one user testing, I could no longer use UXPin for future prototype projects due to.
Incompatible with Workfront proof
Tedious process of using other programs to provide feedback for internal stakeholders.
Not shareable between teams
Only I have have access to it.
Hassle of transferring the team to UXPin
Have to adapt wireframe templates and design templates to the new program.
What happened next?
Circumstances and changes had to be made.
Research goal:
on layout and taxonomy
The main aim is to see if the users can differentiate our Products and Solutions Items.
Focus testing on mobile users
Much easier to test, no need to worry about hover states.
Linear and simple prototypes
Users would not be able to click on everything.
More scripted questions
Allowing for specific end goals to obtain the data we need.
How did it go?
Despite limitations, we obtain data for our research goal
While not natural, we were still able to get observation and feedback on how taxonomy and visual design.
Direct questions causes testers to find the "words"
We still found out that testers would try to find the key page word that we give them, making it look like a treasure hunt.
Flexible Nav Prototype
This is one of the final XD prototypes that I created for the project, to be used for Mobile testing, an unmoderated test on usertesting.com
Requirements
The following is how I dictate how I created my prototype
Research goals:
test the mobile functionality
To see how the user interacts with different menus and the search bar.
Focus Device: Mobile
Comparing the tester's experience between desktop and mobile experiences.
Complex yet flexible prototype
Allow for seamless transition between different menus along with their animations.
Utilizing atomic designs
To adjust for last-minute designs, based on previous experience.
How did this one go?
There aren't any complaints from the testers on the prototype itself
Thus, the tester's feedback was reserved for feedback on the animation, function, and taxonomy of the prototype.
Able to make last minute layout changes
We were able to successfully make last-minute changes within a short amount of time before conducting the test.
Reflection
Always adapt to new challenges/limitations
This allowed me to switch and adjust different tools and research questions based on the limitations set for our team.
Learning which methods to use depending on limitations
So that in the future I can use them with more efficiency when similar challenges arise.
Implementing new methodology
I was able to use what I learned from atomic design from a meeting and implement it into the prototype with great effect.
Prototypes don't have to be perfect
So that I won't waste my time trying to get a 100% functional prototype unless the research goal requires it.
What I should improve on
Could have made the final prototype, no color
To decrease the amount of time it takes to make last-minute changes, even with atomic designs.
Making quicker decisions on what to use
To me more efficient as there were times when I agonized that the prototype wasn't 100% perfect.