desktop browse experience

With the recent launch of a brand new iOS app, and the upcoming launch of our first Android app, the creative team at Jukely decided it was time for a web refresh as well, to keep all our products visually aligned cross-platform. I was the primary designer on the web project, but I also worked very closely with the mobile-app designers, devs, and creative director. We went over designs daily, discussed ideas, and made decisions together. It was an extremely collaborative process.

We wanted to provide users with all the information they would need to decide which shows to go to. Obviously, day, time, location, etc. are all important factors. But one of Jukely's goals is to enable music discovery. We wanted to convince our users to go see new artists. And so we included additional information such as similar artists, spotify and youtube embeds, and our own custom artist "blurbs": short, one sentence descriptions of each artist that provided a quick summary of what they sound like (and hopefully peak your interest).

desktop browse headliner length considerations

You wouldn't believe the length of the band names we get on Jukely sometimes. Or how many supporting bands a headliner could have with them. Other times, there's no supporting bands at all. I made sure that the Browse layout would always work, no matter how long or short the event's title might be.

desktop browse navigation iterations

Jukely promised its promoters that the Browse experience would only present one show at a time to users. That way, users can fully explore each artist before deciding which show they should go to. Thus, we decided to go with a slideshow experience. Here's a few iterations I went through when working on the show slider.

I liked the idea of playing with a blurred "unseen" show. If a user hasn't looked at the next show yet, it appears blurred; a very subtle form of gamification.

mobile browse wireframes

Before settling on the expandable cards, I explored a few other options for the mobile view. This included scrolling through information horizontally and tabbed content. We decided against horizontal scrolling because we didn't want to effect the native behavior of most mobile browsers (scroll horizontally to switch tabs). And we didn't want to do tabs either, because it's not as easy to build upon in the future if we decide to include more content. Expanable cards were the best solution for us.

desktop browse: holding a spot

Above is the simplest flow for grabbing a pass. A user decides to go to a show and chooses how many spots they want. Then the success state provides the user with attendance instructions.

When a user has a spot to a show, a small "ticket" type of element appears on the show, with further details about their status.

Notice in the top nav a small representation of the show the user is going to has also appeared. That's a shortcut to let the user quickly jump to the shows they are attending.

On mobile, a user's spots may not always be able to fit in the top navigation like on desktop, so I decided to bring them under an expanded profile menu instead. With the extra room in here, I was able to add the headerliner, day, and time, as well. All useful information on the fly!

browse flow chart

While working on Browse, I created a flow chart for myself to better understand the various paths a user could take, depending their membership options. The Browse experience utilizes a combination of modals, flash messages, and drawers, so this flow chart also helped me keep track of when these UI elements came into play so I could make sure they were used consistently.

desktop browse: last card

mobile browse: last card

We added an additional card at the end of the show list with a countdown to when tomorrow's shows will be released. We also included a call to action to upgrade to a plan with a longer view, if the user wants more shows now ;)

browse iterations

Iterate, iterate, iterate! I love to explore design options. I build and build upon my ideas, then go back and reassess my favorite options. My Sketch files usually end up looking like stair steps.

more browse iterations

...but not always. You can't always harness a creative mind :D Here I was trying to perfect the layout and design of the meta information on the mobile view.

gifts

Leading up to the holiday season, we worked quickly to put out a brand new gifting page. This was such a fun project to work on because it was straight-forward and fast-paced. Plus, I love working on forms!

gifts: various states

Jukely has various monthly plan options, depending on things like whether or not you want to bring a guest with you to shows. One of the challenges with the gifts page was allowing users to pick a custom amount to give, but educating them on how the recipient might get the most bang for their buck. We decided to recommend certain set values, but provide a custom field that automatically launches a "cheat sheet" tooltip.

I split the entire process into two smaller forms to make the experience more approachable. On the second step, the credit card form, I included all the information from the first step in a fun gift card graphic, so the user can see what they're paying for!

settings

The settings page was a collaborative effort between myself and another designer. He jumped ahead and got the designs about 75% there, and handed them off to me to finish up and build. While building, I fine tuned his UI designs and solved for some cases that he hadn't considered. We worked together through both stages, and we're both really happy with how this turned out :)