Species Selector Design Review

Owned by Shannon Mitchell
Last updated: May 24, 2024
5 min read

 

0. “Component” Improvements

User Need

Recommendation

As a user, I want consistent styling for buttons types and text boxes so at a glance I can easily see and know what I can interact with and how.

  • Create a “style guide” / component set for all the standard elements that appear in the app (e.g. buttons, text boxes, drop downs, etc.)

  • Add an iconography library and consider adding icons to key buttons so the user knows at a glance what the button is for without reading (priority for common / reoccurring button features, e.g. “next” or “submit”)

As a user, I want there to be clear styling on tooltips so I know where to look for help and it’s easy to digest the information.

  • Create styling for tooltips and potentially other page elements / sections so they’re clear and easy for the user to find.

As a developer, I’d like a simple “ruleset” that informs consistently how various pages change for a responsive / mobile layout.

  • Create a series of design rules / recommendations and ensure the designs across all the pages can work within those rules to create clear mobile layouts.

 

 

1. “Map & Site Conditions” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user, I'd like more instructions on how to use the drawing tool (note general difficulty with drawing tool).

Put the instructions above the map.

If possible, put the zone dropdown on the map too. If not, put it below the map so it feels less important than the map.

Screen Shot 2024-05-15 at 1.31.05 PM.png

 

 

 

image-20240515-174048.png

 

 

As a user, on the map page I didn't know to click next in order to proceed.

Hide the lower navigation bar for now. We should do AB test different approaches or placements for this bar as well.

As a user, it’s hard to realize I can get more information on the goals.

Change tool tip instructions to be “Hover over a goal for more information”

N/A

N/A

1. “Browse Cover Crops” Improvements

User Need

Recommendation

Current Example

Proposed Change

As a user I found the white space on the page distracting and hard to see the tabs.

Remove the green dropdown background and emphasize the “Hide Sidebar” button.

Make clear panels that include the filters so that users can see what gets collapsed.

Nest the “1-5” in each filter section so it only shows when that filter section is expanded.


Move the List/ Calendar options to be placed above the information display, making them feel more connected.

 

 

As a user, the tab headings are hard to read for me and I'd appreciate more contrast. I'd also like better highlighting of the tabs.

 

Add a highlight/ selection state to the sorts on the headings.

or

“pop out” the selected information and highlight the selected goal in Blue.

or

Depending on how sorting works, we could always add sort arrows to the buttons as an alternative

Tint selected goals to Blue, and make the text extra bold. Add a blue rectangle to the left of the image as a label, and add a checkmark over the pictures.

 

 

 

 

 

 

 

As a user I did not realize that the clicking the goals priotitized the order (general lack of clarity around goal ordering).

Move selected goals to the top of the list. Change the number to be green on a white background to stand out. Sort the goals by order.

As a user I need a legend so I can understand what's been shown.

Move the Legend to a panel on the left and make it collapsable.

Use a Blue [-]/ [+] button for show and hide on the top level so that it stands out from the other arrows, and feels clickable like other buttons.

As a user, I was confused by the 1-5 scale when applied to minimum temperature range and other options.

Use stars for ranking rather than numbers.

Add a tooltip for each star saying the level on hover.

 

 

As a user, I'd like to see more instructions overall. / As a user, I think it's hard to notice the instructions.

  • Needs a content review

TBD

 

As a user when I select aerial seeding, I'd like just a "yes" or "no" the current scale feels confusing.

This was suggested by a user. I agree, I think all filters should have at least 2 options. For arial seeding and similar choices adding a yes and no option would be clearer.

N/A

N/A

As a user, the similar wording between "My List" and "List View" confuses me.

Change “List View” to “Crop List”

Change “Calendar View” to “Crop Calendar”

Change “View My List” to “My Selected Crops”

N/A

N/A

As a user, I'd like the headings of the columns to be frozen to the top so if I scroll I can still see them.

This was suggested by a user, seems solid!

Freeze top headings above the plant list.

N/A

N/A