SmugMug
& Flickr

Experience / System / Webflow Developer
2015 - Present

Create end-to-end web and mobile experiences that delight users. Produce campaign templates and brand style guides. Benchmark design patterns for Brand and Marketing. Build wireframes and high-fidelity assets that evolve through a process of design thinking and iteration. Manage and maintain a design system that promotes cross-team consistency and brand identity.

Freelance

SmugMug Website Redesign

Role: Lead Designer & Developer

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.

Old:

The agency designed homepage.

The explore page displays content for specific target audiences.

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.

Above is my sketch which won the exercise during our sprint.

Reorganizing 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.

Here are some early exploration of the SmugMug website. The goal of this excercise was to see which visual style connected more with the pros.

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.

One of our goals for the redesign was to take the users on a photo journey while we narrate our most important features and lead them to sign up.

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

Campaign Creative

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.

Designs for SmugMug and Flickr campaigns

Design Systems

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.

Product design system example

Marketing design system example

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

Product Design System

Other Projects

Role: Lead Designer

Here's a list of other projects in which I have been the lead designer. Click the project to see it live.

I've had the privilege to work alongside Mike on multiple freelance design projects and his work is always exceptional. He has a great eye for design and he knows how to design products that are delightful to the user. He gets the work done on time and he's a knowledgeable front-end developer. I would definitely work with him again!

Jad Limcaco
Senior UI Designer at Apple

Michal is whom you might call a NATURAL graphic designer. He has an incredible artistic eye and is highly skilled in typography, color theory, and core design principles. Michal and I have worked in several projects together, and he has proven to be a great collaborator and is well-versed in brand strategy.

RR Abrot
Solutions Engineer at Webflow
2008 - present

Freelance

2014 - 2015

Turo

2010 - 2015

RC Consulting