Bike Camp NYC: Dropdown Menu

I revisited the Adobe XD Creative Challenge I started a few months back, recreating the dropdown menu project. My initial dropdown menu was a very simple mobile web application that guided a user through folder options to obtain reference documents. I wasn’t satisfied with the way it looked or its ‘purpose,’ even if it was fictional.

I rewatched the Creative Challenge video and taking a cue from the video itself (which was different from the one I initially watched), I decided to draw inspiration from one of my favorite bike shops in Brooklyn and created the fictional Bike Camp NYC.

My goal is to use this fictional bike shop and the Creative Challenges to learn UX/UI, while continuing to build on my front end web developer skills I acquired via Udacity’s Front End Web Developer nanodegree program. So: build UX prototype, code it out. Voila.

There will likely be some variations as I translate my XD prototypes into coded web projects but that’s part of learning is it not?

Anyway. Here is the first project in the Adobe XD Creative Challenge that I completed, with an emphasis on a dropdown menu (click on the image to see the prototype in action).

screenshot of Adobe XD challenge on dropdown menus
Screenshot of the dropdown menu prototype, made with Adobe XD


This is my first near-full project I created in Adobe XD and one of the challenges I faced was in prototyping the dropdown menu itself, and how the transitions behave ‘on click.’ When you click from ‘Shop Gear’ to ‘Adventure,’ the menu transition just stops in its tracks, as if there aren’t additional clicks available to view. The ‘Shop Gear’ menu closes, forcing you to click on ‘Adventure’ in order to open that menu. This behavior doesn’t repeat when you click from ‘Adventure’ to ‘Ride Reports’ to ‘Shop Gear.’ Any insight on how to address this is most welcome.

Another challenge I faced was the art boards themselves. At first, I thought it was enough to have main ‘Landing Page’ art board, and create transitions for each menu item move onto smaller art boards that contained only the menu items. When I tested the prototype, however, I ran into the issue of losing the landing page background. I wasn’t quite sure how best to approach this so I duplicated the ‘Landing Page’ art board and overlaid the menu blocks onto separate art boards, connecting the transitions that way. This eemed to fix the disappearing landing page problem, but I can’t help think there’s got to be a better way. Is there?


1 thought on “Bike Camp NYC: Dropdown Menu

Comments are closed.

Scroll Up
%d bloggers like this: