SmugMug
& Flickr

About:

SmugMug is a photographer's perfect photo partner. It's the one-stop-shop for photographers who are looking to start or grow their photography business. When I joined SmugMug, they were in the final phases of redesigning their marketing site. They had hired a design agency to research the target audience and design a website based on that data. All of the business is online, so the success or failure of the business rested on a website that could deliver signups.

Problem:

The marketing site is the first contact for many potentials users. The agency designed website was our chance to sell and answer any questions they may have about our product. But after extensive user testing, it became evident that there was massive confusion in our website. As a result, we were not signing up our target audience.

- Users didn't fully grasp how our service could benefit their photography business.
- Users missed features we offered.
- Designs were outdated and didn't inspire confidence in our brand.
- Our tone and voice didn't connect with our target audience.

Research:

After gathering feedback, we held a sprint and listed down what our website was missing. The most important benefits for our users were storing, sharing, and selling photos. We had more tools to offer, but putting them all in the same hierarchy de-emphasized our main features. We solved to address these pain-points and reorganized the information architecture.

Opportunity:

During our interviews, we learned that we weren't connecting with professional photographers effectively because our language were too general. Anyone can use SmugMug, but it is still a premium product for photographers who want to streamline their business. So we decided to redesign the website ourselves using this information and adjust how we speak to our audience. We also updated the visuals to reach more pros and inspire them with incredible and relevant photography.

Exploration:

Now that we did the hard work of gathering information and putting together a strategy, it was time for the fun part. We explored a variety of designs to capture a style that will look good no matter what kind of photos are used. As soon as we committed to a visual style, we tested how we can display the content in a consumable way. We failed a lot but we also learned a lot. In the end, we had a structure and design that users understood.

Outcome:

This was an incredibly long but rewarding project as it provided real value, involved a lot of research, and helped us re-engage with our core audience. This redesign also gave us the opportunity to build the whole website on webflow and enabled the marketing team to test and run campaigns faster and easier than ever before. There is still a lot of work to position us to reach more people. That being said, I'm proud of everything we've learned so far and to be part of the process from start to finish. The website is live now and here are a few notable high-level improvements:

- Increased signups by 52%
- Decreased bounce rate by 70%
- Established a clear value proposition
- Organized information architecture
- Modernized the interface and utilized incredible photography that attracted professional photographers
- Fully dynamic content and CMS for faster updates

Role: Lead Designer

Story:

Every year, we run various campaigns for SmugMug and Flickr. My role is to work with the creative director to bring the idea to life, design the main theme, and create a full campaign style guide.

Role: Lead Designer

Problem:

Our design team is comprised of several designers working for different departments. Many of our projects overlap, and that's when we noticed that there were many inconsistencies in our design. We listed down several problems that needed to be fixed:
- Several versions of components that did the same thing
- Spacing was arbitrary
- Different grids
- Mis-matched typography
- Old components have not been updated to the latest
- No source of truth

This greatly handicapped our team to the point where our projects took longer and the product looked different.

Solution:

There is currently a style guide in place that helped inform our design decisions... but that wasn't enough for the day-to-day. What we needed was a library of approved components that would help us build faster and more consistently. Thus we created a design system.

Process:

I started by auditing our product/marketing site and indexing all the components we currently use. After I had the list, we began to consolidate by creating a process for "hiring" and "firing" components. This allowed us to manage and refine our design at scale. I also worked with our engineers to build a REACT version of the system using a shared language to improve project handoffs.

Result:

There was an increase in efficiency, consistency, and scalability as a result of the implementation of the design system. Because we had a full library of our components, we were in great position to start redesigning our product and marketing site.

Improvements:

- Decreased project time of wireframes and high-fidelity mocks
- Ability to update components faster and with full visibility
- Cross-functional team consistency
- Seamless handoff with engineers