Aware Web
A website for a digital agency that claims to focus on usability needs to be pretty impressive with how it communicates.
Project: AwareWeb.com
As a digital agency, we wanted to promote our experience and thought leadership through intuitive, empathic design and clever, yet instinctive interfaces to showcase our capabilities and qualifications.
Challenges
- Convey agency’s capabilities amidst an ever-changing vocabulary of trends and tools
- Present the company and its employees as experienced, strategic-minded thought leaders
- Present relevant content within intuitive interactive features that can double as tech demos
My Role
UX Architect, UX Designer, and Interactive Designer
Designs
The goal of the design was a clean interface with as few words as possible, to practice what we preach when it comes to strategic content for the web. Our secondary goals were to convey our capabilities, differentiate through thought leadership, and present our work samples with real-world results.
Tools
Adobe Photoshop, Adobe XD
Features & Solutions
- “Trending Bar” beneath the main navigation allows us to insert the latest buzz words and topics, linking directly to our thought leadership articles on the subjects
- Billboard is flexible enough to be customized and personalized depending on many factors
- We present our services in different contexts: by technology, by expertise category, and by intellectual process through a “thinking, engaging, building” interactive menu
- Our homepage work samples are presented simply, with interactive rollovers that display improvement stats and links to more details
- Subpage content is presented in an easy-to scan format that can be read vertically or horizontally without losing meaning or context
Interactions
A few additional interactive elements were planned and implemented to offer different views of our capabilities but also to act as tech demos for how we can creatively solve UX puzzles with functionality and flourish.
Tools
Adobe Photoshop, Adobe XD
Features & Solutions
- “Cardstack” image gallery was conceived to visually display creative industry solutions that were perhaps too complex to explain with words
- “Cardstack” component automatically rotates be “re-sorting” with appropriate animation to show our implemented solutions in context, but always displays the full list of solutions on wider resolutions, saving valuable space and yet keeping the words visible
- Homepage animation organizes the agency’s capabilities under “Thinking, Engaging, and Building” categories with a fully-animated interface that reveals a list of sub-services with a simple click
- Both interactions shown here were optimized for display on all resolutions, so that no functionality is ever lost for any user on any device