NAPA Photography

Photography Organization’s Contest Website

Jump to:

Project Info / Website Improvement / Webpage Mockups / Next Steps

Role

UX, IxD, UI, Graphic Design

Client

North American photography Association (NAPA)

Project

The North American photography Association (NAPA) is a Chinese organization that hosts photography contests with themes of various aspects of Chinese culture, such as the themes “Chinese Culture,” “Chinese New Year,” and “The Country China.” They sought to create an English version of their Chinese website that was easier to use and navigate.

The main goals of the website were to have visitors:

  • Learn about the contest
  • Register for the contest

Website Improvement

Problem

I found that the main contest information was presented as a heavy amount of text on a single page which consisted of:

  • How to enter
  • Rules
  • Prizes
  • Judges’ information
  • Contest organizers
  • Terms and Conditions
  • FAQ

The information needed to be easier for the visitor to digest.

Solution

I organized the information into separate pages and created a navigation bar with links to each page to which visitors can go whenever they wish.

The site map I created to reflect my design of the new website:

Webpage Mockups

Back to top

Contest Website Homepage

  • Shows NAPA’s ongolng and past contests
  • Call-to-Action button in header prompts visitor to enter the latest ongoing contest

Contest info page

  • Main info page for an individual contest
  • Call-to-Action button in header prompts visitor to enter the contest
  • “Up to $5000 in Prizes” text and link encourages visitor to enter contest

Timeline infographic

  • On Homepage
  • Converts the organization’s events information from text to a visual, easier-to-digest way

Two versions:

White-arrow timeline
  • Highlights the different types of events by color
  • The style has a light feel
Red-arrow timeline
  • Emphasizes visually the flow of time more than the events
  • Style based off of Oscar’s red carpet and gold trophy colors, as the client desired their contest to “feel like the Oscar’s”

How to Enter and Rules Page

  • The Rules section’s categories expand and collapse to avoid showing too much information at a time
  • Both sections’ “Enter Contest” CTA prompts visitor to enter the contest

Prizes Info Page

Judges Info Page

  • Existing contest gallery
  • Has Sorting and Tagging filters and Search functions
  • Can access the Archive of previous contests’ galleries

Contest Organizers

Terms and Conditions

FAQ

Contact Us

Login and Register Pages

Green color automatically highlights the active form field upon landing on the page.

Next Steps

Back to top

The website is updated continually as the organization grows and hosts future contests and events.