Mobile Navigation

[Date] October 20 - November 3, 2023

​

Team: Universal Design Team

UXD, Lina

Team Lead, Anouar

UXR, Julie - IdeaSpace Team

Developer, Mohammed

Usability study report

> Content

01 Background

02 Product Tested

03 What we did

04 Results

05 Findings

06 Next steps

07 Appendix

> 01.

Background ⚙️ █

> Background

Study goals

Key Research Questions

Methodology

Test if users can easily navigate with our new mobile navigation.

​

Understand how users accomplish tasks and gather feedback on their experience.

​

Observe any areas for improvement and any design opportunities.

How was your experience with our current navigation?

​

Task 1: Find a dropdown menu on the navigation bar and select the 'Submit Idea'

​

Task 2: Sign in to the Dev Launchers website and go to 'My Profile' page

Design Survey:

I recruited participants through a Discord channel and asked them to vote on the five designs that they found most intuitive and easy to read.

​

Usability Testing with Maze:

I conducted usability testing with 10 participants remotely using the Maze usability testing platform. They provided scores on design usability and shared feedback.

> Background

Design Survey

DL Discord Channel

Internal Teams

10 Participants

13 votes

👨🏽‍🚀🧑‍🚀

​

> Background

🧑🏼‍🚀👨🏽‍🚀🧑‍🚀

​

​

Usability Testing

DL Discord Channel

Internal Teams

External Users

10 Participants

02.

Prototype Tested 📱

Usability Test(Maze) Link: https://t.maze.co/197307759

03.

What we did 🧪

Pre-test questions

​

1. Technology use

Pre-test questions

​

2. Understand user experience on current navigation

Pre-test questions

3. Design preference

and why?

Task 1

Find a dropdown menu on the navigation bar and select the 'Submit Idea'

​

Follow-up questions:

• Usability Scale- How easy was it to find the dropdown menu?
• Tell me more about your score

Task 2

Sign in to the Dev Launchers website and go to ‘My Profile’ Page

​

Limitation: Couldn’t make more cards because of free membership limitation

• Usability Scale X
• Feedback X

04.

Results 📊

Answering our key questions and hypothesis with data

​

> Observation 1

Based on the design survey results, I could find the following insights:

​

​

• All participants liked the left-aligned text.
• Most of participants preferred the profile placement on top.
• Some participants had different opinions on the usage and necessity of the dividing line.

​

​

​

​

“Left aligned text is easier to read, more visually organized.”

“Dividers help with understanding the touch target area on mobile.”

Design Survey Result

“Use to dividers to group things, not separate individual items.”

> Observation 2

Learn what users experience in current navigation and find the areas for improvements:

​

​

✘ Frustrations:

• Text alignments, text sizes
• Confused with terms in navigation link
• Sign-in, Sign-up button placement
• Issues with design consistency - padding, shadow, color

​

🌱 Design Opportunities:

• Consider adjusting font size and alignment to improve readability.
• Clarify the terminology in navigation links to improve user understanding.
• Work on achieving design consistency between the mobile and desktop versions

​

​

Current Navigation Experience

05.

Findings 👍🏼

What worked well?

Positive Findings 👍🏼

> Profile Placement

Q Which of the profile placements do you prefer?

​

1. Option 1 (Bottom) - 10%
2. Option 2 (Top) - 90%

🚀 Feedback summary:

• The layout was considered cleaner and visually easier to digest in option 2, which featured the profile picture at the top.

​

• Users expressed familiarity and comfort with the profile information at the top, as it aligns with their expectations based on their experiences with other websites.

> Dropdown Nav

Task.1 Find a dropdown menu on the navigation bar and select the 'Submit Idea'

✅ Positive Feedback:

​

• Users found the navigation easy to use
• Some users could locate the "submit idea" button with relative ease
• Users expressed positive opinions about the design and layout.

> Sign In / User Profile

Task.2 Sign in to the Dev Launchers website and go to 'My Profile' page

✅ Positive Feedback:

​

• User said the new navigation smooth, standard, and seamless
• The layout was neat, easy to explore, and clear

Action Items 🚩

> Dropdown Nav

❌ Negative Feedback:

​

• Had difficulty locating the “submit idea”, suggested for additional context.
• Confusion between “My idea dashboard” and “Dream”. Lack of clarity
• Concerns about the necessity of the dropdown menu

Q. How easy was it to find the dropdown menu? Tell us more about your experience

Usability Scale: 5.5 out of 7

> Sign In / User Profile

​

Q. What are your overall impressions of a new navigation?

🌱 Design Opportunities:

​

• Questions about why “Dream” had a dropdown menu
• Unfamiliar with the navigation link, particularly the “Join”-> Join.. what?
• Recommended nesting “My profile” and “My idea dashboard” under User profile
• Confusing with “Join” button when I already logged-in

06.

Next Step 📝

🔴 Major = Priority 0 (must be fixed for the product to work)

🟡 Moderate = Priority 1 (include in a future release to be tested)

🔵 Minor = Priority 2 (Address further in the future)

> Next steps

🔴 Clarification of terms in navigation links

-> e.g., Join, Dream, My Idea Dashboard

-> Need for card sorting or information architecture (IA) for the website navigation

🟡 Research if we need a dropdown menu under the “Dream” section

🔵 Add dividing lines on the menu lists or find a more interactive user interface that can help users interact with the full width of the screen, as they touch or click only words from the navigation.

08.

Appendix

Participants characteristics, notes, documents, data, media resources & notable quotes

Usability Testing Plan: Google Docs

Usability Test Report(Maze): Maze Link

Usability Test Prototype(Figma File): Figma Link

Universal Design System- Navigation(Figma File):

Figma Link

​

Thanks 🧡 !