Our Hackathon Winners Discuss Their Side Nav Project

Meet the team who won the Weiss-ly Done award for their amazing BigCommerce side navigation project.

Our Hackathon Winners Discuss Their Side Nav Project

Earlier this month, we sat down with The Deadly Six, one of the winners from our recent BigCommerce Hackathon.

Recent Demo: Vue.js - Use BigCommerce to Quickly Set up Advanced Commerce Functionality

Now, we'd like you to meet RIP Dreamcast. They won the Weiss-ly Done award for their amazing BigCommerce side navigation project.

If you missed our last interview or would like a refresher, here is how we execute our internal Hackathons:

Hackathon Details

  • This Hackathon ran for three consecutive workdays.
  • The theme revolved around a beloved hedgehog that has blazed through the video game world since 1991. Do you see what we did there?
  • Teams consisted of up to five players. Their projects were not limited to code, and they did not need to benefit the BigCommerce platform or need a clear path to production.

Teams who demoed their completed projects had the opportunity to win the three coveted awards below:

  • Weiss-ly Done - This award is dedicated to our inspirational former team member, Matt Weiss, who made a difference in many of our teammates' lives. Senior leadership selects the team who solves an intimidating problem that others may be too leery to tackle.
  • Master Emerald - Think of this as the People's Choice Award, where BigCommerce team members throughout the world vote for their favorite project.
  • Super [enter the hedgehog's name here] - Product Management and the Designers choose the team who created the most impactful end-user experience for merchants, shoppers, or 3rd-party developers.

Meet RIP Dreamcast

Maria Navarro, Software Engineer I on the Channels Platform Experience Team

Background: I started my career as a Software Engineer about 3 years ago. I use to be interested in programming, so I started studying by myself and as I continued learning, I realized that I enjoyed it. I wanted to do something serious about it, so I joined a bootcamp.

In the bootcamp, I learned about front-end and back-end, and that helped me decide what path I wanted for my career. After graduating, I had the opportunity to work for a start up in Mexico as a Front-end Engineer. After that, I joined BigCommerce; one of the best decisions I have made since it is not only a place where I can grow as an engineer but also is a place that has an awesome cultural environment.

Fun fact: I enjoy cooking and trying new recipes! But, there are two things that might be easy to make for most people but not for me: tortillas and pancakes. I just can’t get the right consistency!

Role in this project:  I helped implement the redesign of the side navigation.

Connect with Maria on LinkedIn.

Jorge Moya, Software Engineer II on the Channels Merchant Experience Team

Background: My professional journey into software engineering started in Monterrey, Mexico when I interned as a software developer while studying Computer Science. During my internship, I eventually started to focus more on web development/front-end engineering. Upon graduation, I moved to California to work as a front-end engineer full-time. I looked for more opportunities in Texas, and BigCommerce was my top choice.

Fun fact: One of my life goals is to ride a motorcycle from Alaska to the tip of Argentina.

Role in this project: I came up with the idea of reworking the side nav and helped implement the redesign.

Connect with Jorge on LinkedIn.

Turner Vickery, Senior Product Designer on the Channels Developer Experience Team

Background: My formal education is in industrial product design. I started my career at a design agency in Chicago, focusing on medical devices and illustration. Over the years, my interests shifted to digital design, and I reskilled to UX through a bootcamp at General Assembly. Since then, I’ve worked as a product designer for both IBM and Cigna, spanning multiple industries including FinTech, IT and data and analytics. I joined BigCommerce last year in hope of finding the next great challenge - I have not been disappointed!

Fun fact: I had a small part in the movie Spy Kids when I was 11 years old. I played one of the robot kids and am still recognizable in a couple scenes.

Role in this project: I worked as the designer, coming up with some early conceptual wireframes for Jorge and Maria.

Connect with Turner on LinkedIn.

Learn about Their Project

How did you come up with your team name?

Jorge Moya: When I think of [the famous hedgehog], I think of the game console, [rhymes with “mega”]. Their last official console unfortunately had a short shelf life even though it had some innovative technology behind it at the time. It’s our homage to it.

Turner Vickery: I miss it. It was great.

What is the name of your project?

Jorge Moya: It’s Fresh Cut. In the Channels team, whenever we want to get a cool haircut, we say, “I’m gonna get a fresh cut.” It made sense to name the project this way because we were thinking about redesigning the side navigation and giving it a fresh look.

Turner Vickery: I think that it’s perfect.

Please describe your project.

Jorge Moya: This project is about redesigning the BigCommerce control panel side navigation to bring it up to par with other design initiatives like mobile and BigDesign. We also wanted to add extra functionality to the collapse view and find a better way to navigate around submenus.

What inspired you to choose this project?

Turner Vickery: The side navigation has been kind of a point of contention among the design community for a while. Navigation is tricky to begin with, and we know that BigCommerce’s navigation has a lot of elements in it.

When Jorge came to us and said he wanted to work on this project, it was kind of a no-brainer because we already had some ideas of how to make it better. The Hackathon seemed like the right platform to really get some of those ideas out there and get people thinking about the fact that there could be a much better way to do this.

Which pain points does your project solve?

Turner Vickery: We wanted to touch on a few things that we know merchants have had problems with in the past, one being transparency of the items. Can they [merchants] actually find what features they’re looking for and know exactly where they are in the control panel at any given point?

Another would be consistency across the different platforms and UI elements that we have. We have BigDesign, which is a pretty elegant looking design system, but it doesn’t really tie in well with the current navigation. We also have the mobile platform, which doesn't really look like the web platform right now because the navigation is just completely different. So how do we create the consistency between all of those constituent parts and create a consistent brand for the product?

The third would be more modernization of the brand, thinking about how we can make BigCommerce as a platform look like it has the power and the capabilities that we all know that it has. Then also preparing for some future features like dark mode, potentially, or commerce as a service.

Which challenges did you face while you were developing your project?

Jorge Moya: Within this short timeframe [three-day Hackathon], we weren't sure how much of the redesign we would be able to implement within the existing code. One other challenge worth mentioning is by changing the side navigation, Turner found out there’s some other UX elements in the control panel that we might need to modify in order for us to implement this new side navigation.

Turner Vickery: We faced a lot of challenges with this one. Redesigning the navigation meant not only considering the UI and how a merchant interacts with it, but also (as Jorge mentioned) the interplay with existing pages in the control panel and making it feel at home with the brand. Where I think we really could benefit in this project moving forward, which we just didn’t have the time to do [during the Hackathon], would be more feedback from our merchants and understanding what they expect from this navigation. And, is everything really intuitive like we planned?

How did you overcome these challenges?

Turner Vickery: The most important thing, at least from a design perspective, is having clear communication with our teammates because if this is something that will be implemented in the future, it's not just my opinion [that counts]. It's the opinion of everyone that I work with.

Jorge Moya: Development-wise, we set some daily goals to try to reach the initial scope. At the end of the day, we would evaluate if we could get there and if we could add more scope to it like new features.

What’s the one thing you’d change about this project?

Jorge Moya: Turner had a prototype with some really cool collapsible submenus, and unfortunately, we couldn't implement that [in time] . It's just the one thing that I wish we had more time to do.

What are the next steps for this project?

Turner Vickery: We're in the process of refining these concepts and making sure that all the designs that we have can fit with the existing UI within BigCommerce, or at least the aspirational UI that we have. That means having everything within BigDesign. Then how it also works with mobile and how it would work with the “powered by” experiences.

We're going to see what kind of interest we have from our executive leadership as well as seeing if there's room for more people to work on this in the future. There's a lot of work to be done in terms of getting merchant feedback for the navigation and going through the proper channels of research and testing. Our goal is to first get the right backing for this and to make sure that everybody's aligned. Then we need to make sure that it matches the merchants’ expectations before we start to build it.

What advice would you give to an engineer who is about to participate in a Hackathon?

Maria Navarro: Talk with your teammates, and decide what are going to be the next steps. Always start with a MVP (minimum viable product), and the most important thing is to enjoy coding and learning.

Jorge Moya: Set an initial scope, and try to adhere to it. Don’t worry about the small details because it cannot be perfect. Hack your way around, if you need it.

Turner Vickery: That was really well said. At the very beginning of our project, we all aligned on what we thought the scope of this really would be. We actually narrowed down what was going to be the scope of development versus design because design can go a lot faster, making wireframes and conceptual mock-ups. We knew that for development what we could actually get done in three days had to be a more modified version.

Meet BigCommerce's Engineers