Rebecca Gleason Design  / /

E-Commerce Site Wireframes

(in Axure RP)

 

Overview:

Drawing on research I had performed earlier, I was tasked with creating an entirely new, responsive site experience that is more aligned with users' needs and better supports a new business model (from CTM to E-comm & content platform). Part of this project also included early tagging and taxonomy investigations, as improved search and navigation plays an integral part in this new design.

 

Challenges:

Increase engagement & conversion

Create perception of shopping “funnel” 

Effectively surface product relevancy sooner 

Allow for maximum content flexibility

Allow for personalization of content 

 

Design Solution:

 

MODULAR GRID SYSTEM (global pattern)

With a changing business model, I set out to design a solution that was adaptable to future content types & strategies. A modular pattern allows for flexible content & product placement and can be programmed both manually and algorithmically, based on current needs. It also lends itself well to personalization of logged in states as well as seamless transitions through all responsive views. 

 

USER TOOLS  

The USP of the brand lies mainly within the unique gifting tools that allow users to find the perfect gift, every time. Since the homepage is essentially the “front door”, I designed these tools to be front and center here. The billboard area becomes a staging area and internal marketing for these tools. All tool info and interactions begin within this area and allow users to engage up to a point, without leaving the page. On other pages, the tools are placed integrated in to the modular content & product areas as well as accessed through the top menu area.

 

NAVIGATION  (global pattern)

With the main navigation system, the entire selection process happens within the menu pane that slides down to take over the billboard area on each page. This pattern feels quite different from a traditional dropdown menu because, instead of sitting on top of the page beneath, the menu integrates itself into the page design. The menu options are icon-based, so this space allows for those symbols to be easily read as well as scrolled horizontally. Also, it is easy to switch between main nav selections to see those options in the pane (which remains open until closed or until a selection is made). 

 

WORLDS

I wanted to create the sense of entering an entire ‘world’ dedicated to the specific category, occasion, recipient, interest, etc. that the page represents. These can include categories such as Adventure Gifts, Foodie Gifts, Birthday Gifts, etc. This is done by using rich imagery in the billboard and integrating other visual cues throughout the page.

 

HYBRID PAGE DESIGN

One of our main goals with this project was to increase engagement and provide users the sense of place as well as relevancy and “narrowing” down as they searched for ideas. The previous site’s use of landing pages that link out to multiple Search Results pages forced users to page-hop and made the experience feel ungrounded. This hybrid page design keeps the interactions tied to the landing page (world) and products and content changes on the page as selections are made.

 

CONTENT HUBS

Our previous site experience was lacking in relevant content and ways to access that content. Much of the redesign was focused on ways to surface content across the site, maintain flexibility, and provide easy ways to browse and search content both separately and along with products. In addition to appearing on relevant pages, articles, guides, video and additional information & inspiration are grouped into it's own area of the site. 

 

SUB-NAV BEHAVIOR

I saw the opportunity to design a page that behaved like both a landing page and a search results page in order to keep users grounded in the current “world”. To do this, the entire sub-nav interaction remains within the page and when a selection is made, the icon slides left and everything below it (products, content, etc) changes based on the selection. 

 

INLINE VIEWS (global pattern)

Curated content “collections” as well as articles can be viewed inline by opening up a tray, which slides open within the grid system. This keeps users on the current page, while still allowing them access to featured content. It can remain open or easily be closed. 

 

SPECIAL CONTENT BANDS (global pattern) 

Special content (such as price points or advice clips) can be placed in horizontal bands that run the full length of the page, fitting seamlessly into the grid, yet visually standing out from it.