top of page
Navigation Prototype Hero.jpg

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 Lumen website. This is more about how different prototypes impacted the testing results than the results itself.

My Role

UX Designer, 

Wireframing & Prototyping

Project Duration

2 year project

Area of Focus

Main Navigation / Browser Site

Synopsis

I was task to create a couple of prototypes in order to test our new navigation designs for Lumen.com. It was along journey using different tools and methods in order to obtain the data we need within the limitations that was set. 

Navigation_Protoyp1_Hover.png

Flexible Desktop Nav Prototype

First prototype made for desktop users for unmoderated test in usertesting.com

Requirements

Screenshot 2024-11-11 at 5.10.32 PM.png
Asset 10.png

Research goal:
Taxonomy & desktop function

To obtain user's feedback on how how our navigation worked and the menu items within in.

Screenshot 2024-11-11 at 5.01.32 PM.png
Asset 18.png

Focus device: Desktop

Data shows that most users access Lumen's website via desktop.

Navigation_Protoyp1_Hover.png
Asset 15.png

Menu that opens on hover 

Based off of previous user interviews on their preferences.

Asset 11.png

Consulting

Complex and flexible prototype

So that the user can play around with the prototype as they would naturally would.

What is the main challenge?

Limitations of XD's prototyping feature

Rudimentary prototype features, limiting the test that we can do, causing a lot if complaints about the prototype itself instead of the experience.

The solution? 

Switch to UXPin UX/UI tool

With access provided by other UX teams, UXPin allowed me to create more complex prototypes, that would resolve the problem that we originally experienced. 

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.

These feedback were saved for answers that were essential for our research goal. 

image001.png

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 one person in the group that has 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.

Screenshot 2024-11-11 at 5.06.33 PM.png
Asset 10.png

Research Goal:
On layout and taxonomy

Main aim to see if the users can differentiate our Products and Solutions Items.

Screenshot 2024-11-10 at 11.18.28 PM.png
Asset 3.png

Focus testing on mobile users

Much easier to tester no need to worry about hover states. 

Screenshot 2024-11-10 at 11.12.11 PM.png
Asset 6.png

Linear and simple  prototypes

Users would not be able to click on everything.

Asset 9.png

More scripted questions

Allowing for specific end goals in order to obtain the data we need.

Example of the linear prototype

Nav Prototype Option B version

Testers were given this option in order to see if they would be able to find the Fiber+ and Networking solutions based off of how each menu is presented.

How did it go?

Despite limitations, we obtain data for our research goal

While not natural we still were able to get observation and feedback on our 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. 

Nav_Mobile_R3_AtomicComponents.png

Flexible Nav Prototype

This is one of the final XD prototypes that I created for the project, to be used for Mobile testing, unmoderated test on usertesting.com 

Requirements

Following is how I dictate how i created my prototype. 

Screenshot 2024-11-11 at 5.14.24 PM.png
Asset 13.png

Research goals:
Test the mobile functionality

To see how user interacts with different menus and plus the search bar.

Screenshot 2024-11-10 at 11.18.28 PM.png
Asset 3.png

Focus Device: Mobile

Comparting the tester's experience between desktop and mobile experiences.

2.0Navigation_Prototype3_Lines.png
Asset 11.png

Complex yet flexible prototype

Allow for seamless transition between different menus along with their animations.

Nav_Mobile_R3_AtomicComponents.png
Asset 12.png

Utilizing atomic designs 

To adjust for last minute designs, based off of previous experience.

The final prototype

How did this one go?

There isn'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 swtich and adjust different tools and research questions based off of the limitations set for our team.

Implementing new methodology 

I was able to use what I learned from atomic design from a meeting an implement it into the prototype with great effect. 

Learning which methods to use depending on limitations

So that in the future I can use them with more efficiency when similar challenges arise.

Protoypes 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 time to make last minute changes, even with atomic designs.

Making quicker decisions on what to use 

To me more efficient as there were times where I agonize that the prototype wasn't 100% perfect. 

bottom of page