top of page
Link - link to homepage.png

<UI Design> <Ecommerce design> <Marketing Strategy & Research>
<Visual Brand Design> <Photography> <Digital Content>

Role: UI/UX Designer & Digital Content Designer
Project: E-commerce Website Improvement
Industry: Retail & Framing Services
Duration: August - current
Below = Project pitch (timeline: 1 week); Research and further implementation TBD 

Assignment
Improve a product page for a new product on hallofframes.com

Background
Our lowest-performing products on the website are the Tabletop Frames. They receive a lot of views, but produce very few checkouts. To improve sales of tabletop frames we want to add more table-top and similar products over time, and optimize the product page for sales.

Ex. of Client Use Case
The client has returned from a recent vacation and wants to showcase their favorite image in a tabletop frame. After a Google Search, the client came across our website (due to strong SEO). They ended up on the home page, used the menu to navigate to the Shop menu, and selected Tabletop Frames. Once on the category page, they will browse our tabletop frame options to see which frame they think would look best with their image and the space the frame will be going in. 

The UI/UX designer/content creator will need to optimize the product page to promote sales. 

Brand Guide 

Header Font: Gentium

Body Font: Poppins

#C10904

Hall of Frames
Red

#005EB9

Paradise
Picture Frame Blue

#DDB967

Secondary Color (#1)

#C8D7D2

Secondary Color (#2)

#1D92A3

Secondary Color (#3)

Inspiration + Market Research 

Below are various product pages that I found successful within e-commerce, where I highlighted elements I took inspiration from to incorporate as improvements for HoF.
Scroll to See: GreatJones, Umbra, Porsche Design, Patagonia, Anthropologie.

Design Audit - Existing Page

Section 1.png
Grey Banner
  • Could emphasize a sale to entice buyers for that first purchase (or deal going on), and be colored in red to highlight this. I feel like because the price compared to competitors may be higher so if this is a reason for drop-off, this could help that possible issue.
​
Navbar/ Header​
  • Since banner would be used to emphasize product sales and promotions, header can be tweaked to include maybe a multi-section/layer organization.
  • Icons rather than text for visual ease in more instances to save room (find a store- use pin icon. enable hover text for clarity) *Patagonia
  • Get rid of “coupons” in red- use banner or corner popups with these deals (that show what these coupons are) the red makes it seem like a selected page within the menu (when frame would technically be selected)
  • Search icon seems neglected, this may be a key function for users so move search more centered and re-design. *Umbra
  • We can make this visually more interesting to look at in many ways. (will experiment)
​
Listing Photos​
  • Include more photos (+lifestyle/environment) create more interest.
  • Magnifying glass may be unnecessary since photo is large (and there will be zoomed photos) but possibly implement zoom hover box. Could also utilize button as a “discover similar products” *Porsche
  • Include more photos in zoom / rearrange for better usability
​
Product Description / Information
  • Reorganize for better hierarchy, I feel that you could place description lower since more text-heavy and less priority (not immediately important/necessary)
  • Larger button touch-points
  • Add reviews or stars (is there any?)
  • Lots of negative space. Improve sizing and organization for better composition
  • Question: since HoF frames photos themselves.. do we want to include this feature in description as an option?
  • “ask us a question” could be an icon and placed elsewhere, not as secondary button
​
Scrolling down (sections)
  • See section *IMPLEMENTING THIS SECTION ON SCROLL*
  • You could move existing sections down, prioritizing relevant things of “tabletop frames” to boost those sales. Keep “more like this” but maybe reorganize and re-design to save more space?
  • Reviews section may be best at the very end. They can jump to this by selecting a button on the product description page- put stars for credibility if possible.
  • Put FAQ below for further info;
  • Redo Footer (bug?)

Re-designing Nav Bar

Starting from the top, I re-designed the nav bar + header by:​

  • Rethinking (IA) Information Architecture

  • UI of Nav Bar

IA Redone

Changes to make to simplify and create better UX:

  • Combine Services and Business services under one tab, make the “business services” it’s own section within the dropdown aside from the other info on services dropdown.

  • Utilize more icons for information overload ease.

  • For some reason, selecting the “frame” to me initially makes me think of “frames” being the main thing you sell. I wonder if others have the same reaction (research needed) to make this a bit easier to follow, since both “frame” and “print” are items for customization, we could create a “Custom” tab highlighting these services.

  • Ideas is a really cool section, although thinking main functionality and importance, I feel that it’s home is not on the nav bar. We could either place it on the nav bar somewhere or even create another area for it... will play around.

existing/current:

changed:
Existing Nav Bar.png
NavBar1.png
Information Architecture.png
2Information Architecture.png

UI Design for reframed Nav Bar

Existing Nav Bar.png

current nav bar:

NavBar1.png

new, default:

NavbarNew.png

new, scrolled down:

new, hovered menu:

Group 13.png

Re-design of Product Page 

Design changes to make:

Layout
  • Breadcrumbs moved to the side
  • Change hierarchy of title text for more skimming ease
  • Photos can be arranged more visually interesting *Anthropology
  • Layout inspiration *GreatJones
  • Reorganize product description

Things to delete:
  • “ask us a question” doesn’t need to be a big secondary button like this, probably a smaller popup
  • I deleted one of the sentences in description to make it an optimal 2 lines max. Frame color in description unnecessary because it is shown right below

Things to add:
  • Reviews! for credibility, if there are any. (try to start encouraging feedback?)
  • On all products, there seems to be availability problems which may frustrate user because it initially appears available, or it seems you can still add to cart. Add a button on top where they can immediately choose whether options are available (based on location)
  • Include option for in-store pickup? (see availability based on location)
  • Add “customization” because this sets HoF apart from others- we can add a cost to this service providing more value
Main.png
NEW.png

Before (current)

After (changes to improve)

Photography

Materials Provided: Burlwood Frame containing (my own) Photo
 

HoFoverview.png

Final Product Page 
-overview

High-Fidelity Mockup
Nav Bar + Header 
Product Listing + Photos
Product Description

Low-Midfi Mockup
Sections to include: "Picture This" and "Get in the right frame of mind"  
Recommended Section
Reviews Section
FAQ
 

bottom of page