Websites

High-performing, quality website designs for an enjoyable user experience.

NatureScapes Store

NatureScapes.net eCommerce Store

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.

Design Process for NatureScapes Store

NatureScapes Store Analysis
Version 1.0 - Initial Launch

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.

1Analysis

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.

NatureScapes Store - Research, SEO Strategy, and Content
Research and Content for eCommerce

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.

2Research, SEO Strategy, & Content

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.

User Persona - Retail
Sample User Persona for a Retail Customer

Above is a persona for a unique customer in the online store. When designing features, promotions, and emails I think about customers like Sarah.

NatureScapes Store Wireframes
Wireframes for Updated Landing and Category

Pictured are a few wireframes showing updates for the main landing page as well as improvements to main and sub categories.

3Wireframes

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.

NatureScapes Store Home Page
Store Home Page
NatureScapes Store Category Landing Page
Category Landing Page
NatureScapes Store Subcategory Landing Page
Subcategory Landing Page
NatureScapes Store Campaign Landing Page
Campaign Landing Page
NatureScapes Store Product Line Landing Page
Product Line Landing Page
NatureScapes Store Special Offers Landing Page
Special Offers Landing Page

4Design, Develop, & Optimize

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.

NatureScapes Store Product Chart Page
Comparison Chart
NatureScapes Store Art-Directed Banners
Art-Directed Banners
NatureScapes Store Product Page
Product Page Optimizations
NatureScapes Store Text Banners
Text Banners

5Measurement & Iterations

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.

Website Goals

  • Improve traffic flow by implementing visual categories front and center from the landing page to help customers easily find what products they are looking for.
  • Increase organic traffic to attract new customers and decrease ad spending.
  • Improve product pages by writing and optimizing descriptions, imagery, and supporting assets.
  • Observe user behavior flow and incorporate changes to improve conversion rate. Make it easy for customers to find the latest sales by implementing a designated, optimized section that can also be linked to from email promotions.
  • Implement a lead magnet to grow email list and increase number of transactions using offer.
  • Interlink the store with other parts of the site like Workshops and Tours to encourage community networking.

Results Achieved

  • After creating visual categories, I was able to see which areas began receiving the most traffic. The highest value category, Tripods and Supports, became the #1 traffic draw each month from organic sources.
  • 129% increase in organic traffic over 2 years, with some keyword targets reaching page #1 on Google Search.
  • 58% increase in revenue from organic traffic over 2 years; 9% increase in organic conversion rate and 23% increase in transactions.
  • 53% increase in overall conversion rate from implementing special offers, offering helpful information, and improving page content and category organization.
  • 447% increase in email list growth over 6 months by offering special incentives and opt-in at checkout.
  • Promoting welcome offer increased campaign conversion rate by 23% with 3x as many transactions in 6 months.
  • 21% increase in traffic to Workshops and Tours, improving familiarity with other segments of the company.

NatureScapes.net Workshops and Tours

NatureScapes.net Nature Photography Workshops & Tours

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.

Design Process for NatureScapes Workshops and Tours

NatureScapes Travel Analysis
Version 1.0 - Workshops and Tours

Version 1.0 of the Workshops and Tours section has been in place for many years, requiring an upgrade for improved usability on devices.

1Analysis, Research, and SEO Strategy

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.

User Persona - Travel
Sample User Persona for a Travel Client

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.

NatureScapes Workshops and Tours Wireframes
Wireframes for Workshops and Tours

Pictured above are wireframes for the new travel schedule, trip detail page, and other new pages including the improved registration process.

2Wireframes

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.

NatureScapes Workshops and Tours - Current Schedule
Current Schedule
NatureScapes Workshops and Tours - Trip Detail
Trip Detail
NatureScapes Workshops and Tours - About Our Trips
About Our Trips
NatureScapes Workshops and Tours - Leaders and Guides
Leaders and Guides
NatureScapes Workshops and Tours - Leaders Detail
Leaders Detail
NatureScapes Workshops and Tours - Reviews
Reviews
NatureScapes Workshops and Tours - Custom Photography Tours
Custom Photography Tours
NatureScapes Workshops and Tours - Registration Process
Registration Process

Prototype

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.

3Design

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.

Highlights

  • New sections added to Current Schedule that share company values, founder’s promise, and showcase leadership, paired with featured travel reviews as social proof.
  • Trip detail pages were made to be more user-friendly, adding a special page index to the top for mobile devices. They also now include travel ratings and maps to give clients an idea of what to expect.
  • New section Planning Your Trip offers information to help a client determine if a trip is right for them. Adding more content to these pages will increase search relevancy.
  • To also help search engines, each trip leader now has their own page that displays their schedule, which will also be easy to link to from emails and social media.
  • Content on the About Our Trips page was revised to be easier to read and understand.

Improving Processes

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:

  • Duplicate content has been eliminated by designating one page for each trip as opposed to multiple pages for each year. The Current Schedule is now displayed dynamically.
  • Custom Photography Tours inquiry form was simplified and all new forms automatically validate as its filled out.
  • Improved registration process was condensed into smaller steps, now accommodating up to 4 registrants at once.
  • To help office administration, integrating Terms and Conditions into registration means they will save 100+ sheets of paper and ink each year.
  • Waitlist & Reminder feature allows users to easily add their name to be notified of last minute openings and future trip announcements, helping secure a new participant in the event of cancellation.

SHIP Website

Student Homelessness Initiative Partnership of Frederick County (SHIP)

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.

The custom WordPress theme was developed from scratch using Unsemantic CSS Framework as the grid. For more about the project, see the mini SHIP Case Study.

Design Process for SHIP

1Research & Content

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.

SHIP website research and content

2Wireframes

Using content from the team, I designed wireframes to address their goals and show layout and navigation flow. I also implemented ideas to improve messaging and user engagement.

SHIP wireframes

3Page Design & Development

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.

SHIP - Home Page
Home Page
SHIP - Join With Us Page
Purpose - Join With Us
SHIP - News and Events Page
News and Events
SHIP - Contact Page
Contact

4User/Style Guide

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.

SHIP - User/Style Guide

Website Goals

  • Design a responsive, user-friendly website for the public to provide information about SHIP and how they help.
  • Feature a list of fundraising events to engage the community.
  • Serve as an effective way to build a list of volunteers through online sign-ups.
  • Make it easy for contributors to donate money online.

Results Achieved

  • Instant increase in overall website traffic.
  • Significant increase in monetary donations.
  • Increase in number of Facebook page likes and follows.
  • Increase in number of signups for volunteer contact list.
  • Featured in local newspapers, magazines, and television.

Jamie Umak Website

Jamie Umak, Web & Media Designer

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 blog was designed and built using WordPress HTML5 Blank, an open-source boilerplate WordPress theme. Using it saved a significant amount of valuable time. Thanks, HTML5 Blank!

Design Process for this Website

1Wireframes - Version 1

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.

Jamie Umak website wireframes - version 1

2Wireframes - Version 2

In 2015 a responsive website was developed that built upon Version 1.0. During 2016–18 more iterations were made to the content, typography, and images in addition to building a blog.

Jamie Umak website wireframes - version 2

3Design & Development

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.

Jamie Umak website design and development

4Business Cards

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!

Jamie Umak - Web and Media Designer business cards

Pretty onto Paper Website

Pretty onto Paper

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!

Design Process for Pretty onto Paper

1Research & Inspiration

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.

Pretty onto Paper website research and inspiration

2Wireframes

After researching similar websites, I wrote an outline of content and page elements for each section. A few wireframe variations were created to determine the best approach.

Pretty onto Paper wireframes

3Page Design & Development

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.

Pretty onto Paper - Home Page
Home Page
Pretty onto Paper - Product detail page
Product Detail Page

4Etsy Graphics & Content

After designing and developing the website, pages were added for each product in the collection. Afterwards, graphics were designed for the Etsy shop to match the website.

Pretty onto Paper Etsy graphics
Back to Top