context

During my second year of RiceApps, I was the lead designer for the Houston Ballet… the fourth largest nonprofit in the United States… and did some coding alongside it! This project was later deployed in 2024 and used by already 15k+ to help with navigation with their annual Nutcracker Market.

I worked with nothing short of an incredible team, and this was by far one of the most fulfilling projects not just because of the impact and success of the work, but also because of the relationship the team had with each other and with Houston Ballet. I miss this team so much.

And before I move on, let me give credit where credit is due. As the designer, I worked very closely with the following:

• Ben Liu — PM

• Ahmed Hisam — Tech Lead

• Anya Gu — Tech Lead

what was the problem?

For context, the Nutcracker Market is a huge hallmark of Houston's Christmas traditions and is easily one of Houston Ballet's biggest events… ever. According to the 2023 stats, it:

• had over 115,000 shoppers annually

• over $22 million in total merchant sales

• hosts over 270+ merchants.

It also makes a significant impact on the arts community and Houston Ballet's income, contributing a net of $5.5 million to the non-profit.

The Nutcracker Market is a big deal… both in terms of income and culture… but their navigation system was flawed at best.

Before, shoppers were only given a massive paper booklet that contained everything about the market, jumbling information about vendors, products, and even complex map location in one booklet. These vendors were listed only by their name and an assigned number, and their locations were poorly drawn in a complex map on the different page of the PDF. Virtually nothing else was told about these vendors.

This made it very hard for shoppers to navigate the market — much less find the items you're looking for (in fact…. one shopper tried really hard to find a nutcracker but couldn’t LOL).

a side tangent on finding this problem…

Below was the problem statement initially given to us:

The Houston Ballet is looking to improve their event attendance… they believe that their lack of mobile and web presence makes it difficult for people to access performances. They [also] want to spread awareness about their academy…

We didn't have a clear problem or product, and neither did Houston Ballet. It took some time, a LOT of communication with Houston Ballet and their users, and even more product redesigns to clearly settle on this problem. Big shoutout to our PM, Ben, for figuring this out.

This was a very interesting experience for me; before, all the projects that I've worked on were already clearly defined and handed to me in a silver platter — this was my first time working on a project that was ambiguous and required us to define the problem ourselves.

the solution

So, we decided to create a mobile-friendly web platform to help this Navigation process in the following ways:

• 🛒 A CMS system with:

  • Vendors directory to filter by name or product

  • Categories directory to filter by type of product they're looking for

• 🗺️ 3D Map with built in directions and real-time locations of the user

• 💬 SMS sign up page in which users could sign up to be on Houston Ballet's communication channels

With our product, we envisioned a system in which shoppers could browse before going to market using our digital vendor directory. Shoppers and NM volunteers could also use the directory at the market itself to locate items and navigate!

what i did

Aside from scoping out the project, I did the entire design and some frontend based development for the platform! I won't get too into the design specs, but I had a number of iterations that involved 1) hand-drawn lofis and 2) lots of midfi redesigns. I'll give an example of some below:

first iteration

This was even before the project was well scoped out, so this design in particular was just an experimental wireframe that I could go over with our PM! This, like most early designs, was later scrapped.

second iteration

After we had a more defined vision over what the app should look and do, I started creating lofi and midfi wireframes over integrating the directory, vendors, selected venue, and their corresponding map page. Notice how all the features weren't implemented yet.

third-fourth iterations

Here, I made some pretty major UI changes and added more features/implementations like the filter and categories page. I also started trying out hifi implementations just to see what it would look like….

This was also about when I started jumping in with the development — I wasn't content with how the coded website was working as I felt like there was a disconnect between the wireframes I made and the actual website coded up. This was my very first time working with our languages and coding in general for RiceApps!

?th & last iteration (i lost count)

By this point, we had added the SMS page… and with most, if not all, of the features down, I finalized up the UI to match Houston Ballet's existing themes. Also did some more development here!

Side note: this was one of the hardest parts of the project… I was used to more modern themes or simply creating brand from scratch, so making the UI similar to Houston Ballet's was a challenge that made me question a lot over what the heck I was doing.

final links

And as I already mentioned a number of times because I'm annoying, this ended up being used for the 2024 Nutcracker Market, and I was one of the proud attendees/users! We had a lot of users reached, and both Houston Ballet and my team were very happy with the result. I absolutely love this nonprofit and am so grateful to everyone who helped out.

I will also add some links below:

• The actual, real life, DEPLOYED website (usually linked on the official Nutcracker Market website when the market is taking place)

• Our final showcase presentation (if you'd like to learn more about the process and the nitty gritty details)

• Our open source GitHub repo

With that said, the website that was deployed actually did not match my designs perfectly, so I will also add a prototype of my Figma designs at the end of this website as well!