Daily UI Challenge 3/18/24

☆

Daily UI Challenge 3/18/24 ☆

Mount Project Hero Section Redesign

First Things First

Folks! If you are new here or just checking out my portfolio because I applied at your company, howdy. I have been trying to find ways to sharpen my UI skills while also being able to still flex my UX muscles a little bit going into the new year. I figured a “daily” UI challenge would be the best way to do it. Daily in quotations because I do still have a 9-5 and other responsibilities (going outside). You can also check out my archive HERE

Anyways here is today’s challenge:

What are we fixing?

I’ve been using this website for a year or two now to find places nearby to rock climb, find guides on how to do the routes, and get directions to said rocks. This made it a perfect candidate for today’s challenge. I decided to focus specifically on the hero section of the landing page, because that is a high traffic area that needed some modernization.

Here were the problems:

  • ✓

    Very little separation between the elements on the screen, and weird groupings for the sections as well.

  • ✓

    No clear call to action for new users to sign up

  • ✓

    Inconsistent UI elements

  • ✓

    Outdated filters menu for route finder

Here is what I like about it too (because I am not ALL negative)

  • The brand voice and copywriting is on point and cool.

  • The duo-chrome color scheme feels sleek and minimalistic.

  • The top nav having external links to the other brands they have is a nice way to get engagement/introduce adventurous folks to other sports.

My Design:

I wanted to keep things relatively similar in feel, but just clean up some of the UI. This is a list of what I changed:

  • I grouped elements that were related to be a little closer (i.e. the search bar lives with the filter selection & social icons live next to the sign up and sign in CTA’s). This reduces friction when trying to accomplish a goal.

  • I standardized the buttons and fonts & applied a little visual hierarchy to the main content section. This is easier to understand what content is header and what content is subtext.

  • I updated the filter section to feel a bit more modern and have a cleaner interaction (namely with the difficulty range slider replacing the previous drop-downs).

  • I removed the dropdown that hid the other types of climbing options, allowing users to have a full view with more of a tab selection style.

  • Dropped the opacity of the non-selected states in order to have a clearer signifier as to which option you were currently viewing (in the top nav and the tabs for climbing types).

  • I added a Sign up button because there was no call to action on the landing page.

Conclusion

I limited myself to 30 minutes for this redesign, and I think doing that allowed me to focus in on a few key issues that I had with this original design. In a perfect world, these decisions would be validated & tested, but sometimes those constraints breed some creativity that might be lost in a normal scenario.

With the philosophy aside, feel free to check out some of my more in depth projects on my Work Page. Tomorrow I will have another one of these challenges. In the meantime if you have questions, hit me up! Cheers:)