top of page

Vera Bradley, New Day – Navigation Design

As part of Vera Bradley's "New Day" rebranding, my task was to redesign their Navigation, Search, Header, and Footer – following our New Day branding. My goals were to create an elevated, user-friendly, and simple design that matched our newly designed site, while also setting itself apart from our competitors. 

mockup.jpg
Bags-D.jpg
StandardSearchMenu.jpg
New Footer - D.jpg

New PDP Design

implementation

  • Followed New Day design system

    • iconography, colors, typography, spacing, buttons​

  • Created subnavigation on mobile for user to quickly access top category items

  • Added breathing room between navigation items so it seems less cramped

  • Removed confusing categories, and stuck with core categories

  • Created more contrast between headings and links

  • Used remaining negative space to add imagery and CTAs

    • Called out categories and with CTA​

    • Featured best selling products 

    • Created visual interest

  • Designed search feature to be in its own container on desktop and follow the same design on mobile to be easier for developers and similarity for user

    • Highlighted "Popular Categories" that are most searched​

    • Used optimized search with keywords and spellcheck

    • Discovered "Best Sellers" with some product card information and will take user to that PDP

Figma Iterations of Navigation for Mobile and Desktop

Ideas/Goals for new design

  • How can we utilize New Day branding to make navigation, search, footer, and header fresh?

  • How should items be (sub)catergorized?

  • Remove extraneous informations 

  • Streamline user experience 

  • Remove retired and factory patterns

Desktop Full Header.png
Format=Desktop.png

Original Nav Design

Concerns with original design

  • Generic and compressed design

  • Lacking color and personality, which is part of Vera's brand

  • A lot of sub categories (i.e. Features, Work, Fashion, etc.) can be confusing to navigate for the customer 

  • Hard to differentiate between headings and links in footer

Screenshot 2024-11-19 at 6.23.59 PM.png
Screenshot 2024-11-19 at 6.35.46 PM.png
Mobile Menu Navigation Level 1.png
Mobile Menu Navigation Level 2.png

Ideas/Goals for new design

  • How can we utilize New Day branding to make navigation, search, footer, and header fresh?

  • How should items be (sub)catergorized?

  • Remove extraneous informations 

  • Streamline user experience 

  • Remove retired and factory patterns

CueentNav+Header-M-1.jpg
ShopByCategory_Bags.jpg
Bags-M.jpg
SearchInput.jpg

UI/UX | Web | Branding |

bottom of page