top of page
Tempe-intro.png

PROJECT

Website Design for 

Tempe, AZ

Tempe-logo.png

GOALS

Showcase the city as a place 

brimming with energy & innovation

1

Portray the forward-thinking and innovative value of the city

2

Feature the community - energetic, playful, bold

3

Convenient access to services, events, and features

Tempe-videos.png

MY ROLE

Lead Designer (Granicus Inc.)

Consulted with the client on the art direction for the website. Created a design that reflects the vibrant energy of the city with user experience that provides easy access to information and online services.

CHALLENGES

Tempe-arrow.png

How to incorporate all the colors of the brand palette for an energetic and lively vibe without becoming messy?

 

 

How to implement parallax effects without being overwhelming to the user?

SOLUTIONS

Kept their general usage concise to the different sections while also using ample white to help with breaking up the colors and maintain that professionalism.

 

 

For a deep connection to the brand, we incorporated the swirls, which offer fluidity to the design and with the movement of the parallax scrolling feature, will give a strong feel of energy and liveliness to the experience.

Tempe-search.png
Tempe-btns.png
Tempe-events.png
Tempe-tagline.png
Tempe-arrow3.png

RESEARCH

Stakeholder Survey

Community Survey

Analytics

User Testing

PAIN POINTS

• Poor search results
• Weak call-to-action and top-services buttons
• Cluttered design, no visual hierarchy

Tempe-colors.jpg

PLAYFUL

ENERGETIC

innovative

vibrant

BOLD

Tempe-images.jpg

To ensure the search is a key focal area, it is large in size and strong in contrast for prominence.

number1.png
number2.png

Opted for circular icon buttons for a more playful tone, and added animations of the shape growing in size with the parallax scroll.

number3.png

Subtly introducing the tagline “Making waves in the desert” here really promotes the values and branding of Tempe and adds to the parallax story.

number4.png

Consistency was important to the client so we opted to present large featured news item in the same format as the events and videos sections.

number5.png

With the use of of the branded swirl elements in the parallax animations, we are able to evoke the playful and energetic vibe of the city. 

Tempe-wireframe2.png
Tempe-wireframe3.png
Tempe-wireframe4.png
Tempe-wireframe1.png
Tempe-accent-sm.png
Tempe-arrow2.png

RESULTS

We have a bold, vibrant, innovative concept that showcases the city as forward-thinking and a place brimming with energy - really radiating with the yellow and purple. With a clean and spacious interface that focuses on the presentation of content, we achieve our goals of providing easy access to information and online services.

TempeAZ-result.png

CHECK IT OUT LIVE!

©2023 annastopa.com

bottom of page