NatureScapes is the most comprehensive, longest running online resource for nature photographers. As the sole designer for over 9 years, I developed the brand by designing the company’s entire online experience. The different design facets include website design, eCommerce, customer experience, email marketing, SEO, and analytics. Working on many different design problems presented the opportunity to not only improve the overall user experience for customers and clients, but also increase organic traffic, revenue, trust, and customer loyalty.
By designing with data and user feedback, I improve customer experiences through visual design as well as implementing new processes, systems, and standards. As a small company with close relationships to its customers and clients, I am excited by the breadth of knowledge I learned in every area of the business to create designs centered around the customer.
Below is the design process for a section of the website, the online store. Check out my email marketing portfolio for a sampling of customer journeys and how I grew email list sign-ups. To see how I increased website traffic and conversion rate, view my SEO portfolio.
Version 1.0 of the store went live with only the basics in place and the goal of making continuous improvements. After launch, I observed patterns to determine what to strengthen first to improve important areas like navigation, conversion rate, and organic traffic.
I created the current store design using the foundation of a BigCommerce theme. The process of preparing pages to receive customers was an undertaking for our small team. To launch, Version 1 of the store went live with the basics in place and the goal of making continuous improvements.
After launch and gaining traction, I analyzed sale and traffic patterns across different product categories to determine what to strengthen first to improve conversion rate and organic traffic, keyword rankings, store navigation, and customer satisfaction.
I noticed that certain categories like Clearance attracted more traffic than others. The “sea of products” on the home page wasn’t effective at giving customers direction. My first goal was to improve user flow from the landing page with an approach that would help them find what they are looking for while placing higher value categories front and center.
When writing content for store product pages and categories I always perform keyword and competitor research to determine action that helps customers. Volume, opportunity, and difficulty are all considered.
I researched to understand how big box stores and direct competitors were organizing similar categories, presenting products, and how it compared to what we were doing. I analyzed what keywords competitors were and weren’t optimizing for, and assessed the data to determine the best areas of opportunity for growth.
For the landing page, I researched keywords centered around user search intent to increase visibility and help customers discover the store. For categories such as Tripods and Supports, I determined each sub-page’s search intent and researched keywords to support the buying process. I used target keywords to create an outline and wrote optimized page content. My goal was to incorporate content onto category pages to describe them for customers and help Google’s web crawlers.
Above is a persona for a unique customer in the online store. When designing features, promotions, and emails I think about customers like Sarah.
Pictured are a few wireframes showing updates for the main landing page as well as improvements to main and sub categories.
Once a strategic plan was in place, I created wireframes to communicate it visually to my team. First, I examined the BigCommerce theme to learn how the template was set up and how to make modifications to the underlying code. That way I understood what changes were possible and the limitations ahead of time.
Using written content and a list of ideas, I created wireframes for the store home and category pages and explained my analysis and suggested approach. I was sure to include some re-usable elements for consistency and speed of development.
Afterwards, a few modifications were implemented before approval and starting the visual design.
Using the wireframes as a blueprint, I designed the interface of the new pages focusing on simplicity and modernism. My intent was to present all pages without distractions in an easy to understand and clear format. Strong graphic elements and a stylized web font are present throughout for branding consistency.
I developed and integrated them within the existing eCommerce theme. I also implemented art-directed banners that respond to viewport size. By default, the theme was simply shrinking banner images which adversely affected readability. Introducing 3 different sizes enables customers to comfortably read images.
Down to the last detail, I wrote and optimized page content and tags to match the copy and customer search intent. I added keywords to the rank tracker for measuring historical data and progress. As part of an ongoing process, special landing pages were designed and developed as part of SEO strategy.
Using SerpStat and Google Analytics, I tracked and monitored keyword rankings and overall traffic flow. In less than 2 months, the store landing updates improved the direction of traffic from the landing page. Excitedly, the highest value category, Tripods and Supports, became the #1 traffic magnet consistently each month while also seeing a significant increase in monthly organic traffic. This observation shows tremendous opportunity, giving me insight and direction on which page improvements should come next and in what order.
From there, iterations were made to design and optimize the entire Tripods and Supports section, complete with helpful information like a comparison chart to assist customers in figuring out what tripod to buy. I also researched and optimized product pages in need of improvement, while rewriting and organizing page content tailored to the audience.
NatureScapes also offers nature photography workshops and tours to premier destinations around the world. If a photographer would like to learn new skills alongside a professional, attending a workshop or tour at a location tailored to their interests is an excellent learning experience.
As part of the website’s responsive design phase, I recently re-designed the entire Workshops and Tours section which is currently in development. Design upgrades included updates to the landing page, trip detail page, and information pages, as well as a brand new registration system and waiting list feature.
Below is the design process and prototypes for the forthcoming Workshops and Tours section. Also related, check out my email marketing portfolio for the customer journey flow for travel email marketing. To view page #1 SEO optimizations, see my SEO portfolio.
Version 1.0 of the Workshops and Tours section has been in place for many years, requiring an upgrade for improved usability on devices.
The current Workshops and Tours section has been in place for awhile and required an upgrade. After many travel seasons of using the current website our team had developed a list of new features to incorporate into the new design. This provided a starting point for the wireframing process.
I also spent time optimizing trip pages to improve SEO, analyzing traffic, researching similar companies, and gathering client feedback to improve the user experience. All of this considered, there was great understanding of how processes could be improved for customers and staff.
Above is a persona for a travel client. During the re-design phase of Workshops & Tours, I introduced features to best serve new clients like Henry.
Pictured above are wireframes for the new travel schedule, trip detail page, and other new pages including the improved registration process.
Since the new design was largely based around the existing website plus new features, I began wireframing screens to think through the design and how to incorporate new ideas into an improved layout.
The wireframes also served as a planning and communication tool to get feedback from the web developer. By seeing the wireframes first, they could provide feedback ahead of time and suggestions could be incorporated if necessary.
View a clickable prototype on your desktop, tablet, or mobile via InVision. InVision prototypes can take awhile to load, depending on your Internet connection. You can also preview desktop screens by clicking a thumbnail image in this section.
Visually, my goal was to create a responsive design that tells a story, solidifies trust, and conveys the personal service received when selecting NatureScapes as your travel provider.
On the technical side there were some major changes along with an improved user experience, registration process, and search engine optimization. To name a few:
SHIP is a volunteer, non-profit organization that addresses urgent needs of hundreds of Frederick County, Maryland K–12 public school students experiencing homelessness.
I volunteered to plan, design, and develop a website to raise awareness, attract volunteers, and simplify the donation process. I also wrote a user/style guide for their team. Giving back to the community through design was immensely rewarding.
SHIP provided me with statistics on area poverty rates, background information, the logo, and site content. I researched non-profits and assembled a photo board for inspiration.
After wireframing, reviewing ideas with the team, and making changes, I created the visual design around their content. I was inspired by their existing logo and used motivational stock imagery to protect children’s identities.
Post-launch, I designed and wrote a user/style guide outlining design attributes and how to make updates and gather form submissions. I also included their server and Google Analytics information so they would have it in one place.
I recently gave this website a refresh, so I did what I do best! I worked hard to complete the re-design during free time.
The website as you see it now is an iteration from a design created and built around 2014–15. Pictured are the first set of wireframes that helped shape its current design.
Nature, serenity, and style was the source of inspiration for my website design. I created a logotype, color palette, assembled media assets, and finalized page content before building.
Finally, a personal website isn’t complete without a matching business card. I designed the card and selected MOO to print them on luxe paper with a blue side seam. Fantastic quality!
Designing and illustrating cards is one of my favorite creative outlets. Pretty onto Paper is my side project, which features some of the cards and printable designs I’ve made. The website also complements its Etsy store.
The collection grows every year as the holidays arrive and I have time to create more designs. This is an exciting work in progress!
Working from my own vision as a personal project, I created a mood board with images, fonts, and colors fitting my style. From there, I developed a color palette and logotype.
After wireframing ideas and deciding on the best direction, a visual design was created around the color palette and style theme surrounding the mood board.