

PROJECT
Website Design for
Tempe, AZ

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

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

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.





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

PLAYFUL
ENERGETIC
innovative
vibrant
BOLD

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


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

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

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.

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.






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.

