user's avatar
Day 1 - Adobe Xd Daily Creative Challenge
Day 1 - Adobe Xd Daily Creative Challenge
by Ivan J Badia
This challenge is around building a full design for a pet product, split into 9 challenges over the course of 2 weeks. Each day a new challenge is presented to us and lets us solve unique problems starting with a base template.
#01 - Efficient Navigation

User research shows that when visitors come to the site, they prefer to filter by pet rather than product. How would this impact the information architecture of the site, particularly the page navigation at the top?
Research, mocking layouts on paper and word mapping brand name and mark 3 hours of work. First day two iterations on logo and five designs for the Navigation.
These are my first mockups:

Supplied Base Navigation
My Changes
- Original logo
- Iconography and Labels
- Color, Font size and Spacing
- Added a search field
- removed the Live Help ** placing on the DOM as a fixed item

First Navigation
I was happy with the spacing but the logo started to feel out of place.

Second Navigation
List items as typography felt small and lost. The logo was overpowering the design.

Third Navigation
Combining both icons and typography filled the height by maintaining the negative space and all elements can easy be identified.

Fourth Navigation
Shorten the container for the search icon. The logo has to change now.

Fido Logo 
First iteration
I was happy with the result but after discussing with group a great discussion was started how the log can be used and how can visitors recognize the brand. The first problem Name Badge to small and difficult to read on Desktop once added to navigation.

Second iteration
I shaved the shadow on the chin to match the line thickness on the ears and cheeks. Again asked team on Slack for their critiques and one clear mistake kept happing. Everyone kept calling the brand Fid, placing the dog's head as the letter 'o' was not the solution for the brand.

Third iteration
final sketch and scaling pre-design stage.
While working on a solution for Fido's logo I started exploring other parts and how it all was going to fit together.

Created a grid for The Golden Circles ( 1.618 ). This helped with spacing and distribution of even shapes.
Using a 5MM spacing on the vertical grid helped me redesign typeface Circular Std with shorter stems and even bowls. A second Icon was created too. Letter 'i' represents the pet owner making the experience at Fido Online Pet Store about the pets and their owners.

Software used Adobe Illustrator

Fifth Navigation
Navigation with all the elements

Navigation Prototype
Day 1 - Adobe Xd Daily Creative Challenge

Day 1 - Adobe Xd Daily Creative Challenge

Day 1 - Adobe Xd Daily Creative Challenge


Creative Fields

Attribution, Non-commercial, No DerivativesAttribution, Non-commercial, No DerivativesAttribution, Non-commercial, No Derivatives