Project Background
As a small business, growing your presence digitally is essential if you want to extend beyond your local market. This concept project take the lifestyle store Eyes Open and imagines an eCommerce solution that matches their curated and eclectic style. Located within The Source Hotel, the design aesthetic is a mixture of Japanese and Scandinavian, focusing on clean minimalism.
The Details
Solution - Responsive design website and mobile mockups, design in Sketch and supporting materials in Illustrator
Duration - 3 week project
Team - Colin Tackett (solo project)
Solution Design
E-Commerce websites have well established design patterns and customer expectations. Building for Eyes Open focused more on how to highlight what makes them stand out from competing small boutiques. In particular, Eyes Open features a rotating collection of local artist works. I summarized competitive research in an InVision board.
At the time of this design, a pop-art tribute to Andy Warhol meant that Eyes Open offered screen prints, apparel, and home decor featuring iconic pop-art imagery.
Eyes Open represents brands across North America, bringing together an aesthetic and life style that pays tribute to where the goods are made. This was important to carry over into the online experience, bringing attention to the companies that make up their line.
As a small business, simple attainable features can provide a better overall shopping experience while keeping within their operational means. For the initial launch, features like customer reviews and sale items were included while product recommendations and subscription services were not. The goal for the initial launch was to minimize site maintenance while still having an online presence.  
Our Audience
Lifestyle retailers focus heavily on creating an environment you aspire to live in while in their physical stores. Translating that to a digital shopping experience meant understanding what would still draw in our target market. Based on user research I identified two primary shopping behaviors to support: The Browsing Shopper, and The Focused Shopper. Their browsing needs, preferences, and approach represented the widest differences in behavior. 
Two groups of shopping behaviors emerged from my user research. Our first group, called The Focused Shopper can be characterized the following ways:
• A repeat customer that already has a favorite product they buy in multiple pairs
• Primarily cares about efficiency in finding the product and checking out, likes the added convenience of online shopping
• Already has established trust in the product/brand by first purchasing it in-store
For this group, I included a keyword search to help expedite navigation and a login feature to save details like payment and shipping.
The second group is best characterized as The Browsing Shopper. Unlike the first group, what they planned to purchase wasn't known in advance, and their behavior is characterized as follows:
• A shopper that picks the store based on how well it fits with the style or persona of the person they are shopping for currently
• Equally likely to shop for a gift or for themself at a lifestyle brand, and always checks the sale items first
• Cares about optimizing shopping by managing cost and quantity to get the best deals
For this group, I made the sale section prominent directly on the homepage and the ability to edit the cart in the checkout process where they can see their total cost.
Content Structure
I made several iterations of the Eyes Open wireframes. In version 1 (below), I focused on establishing structure: navigation categories, product filters, check-out bread crumbs, site architecture, and familiar design patterns.
I exported version 1 into InVision to conduct usability testing and a design review. Getting feedback at this stage allowed for wireframe iteration before moving into high-fidelity mock-ups. Several key insights came from this process that shaped version 2. Design edits annotated above in red, were incorporated into version 2 below.
• Header and Footer elements were made more prominent, including expanding the hero image
• Filter options were expanded to have collapsable categories
• Iconography and breadcrumb labeling was updated to improve navigation
I took the wireframes through a third iteration. Changes focused on demonstrating responsive design  layout and how design elements could more closely replicate the gallery-style display from their in-store experience. Where the prior versions informed navigation, version 3 refined contrast, repetition, and placement. 
The final iteration of wireframes incorporated a sale section on the homepage, customer reviews on the product detail page, the mobile navigation design, and more of the brand voice in the styling. In particular, asymmetry and influences of the Japanese and Scandinavian design that defines their physical location were added.
After 3 iterations, it was time to add more fidelity and go back out for user feedback.
Design
The final mock-ups incorporated a muted pastel color palette, product photos, and product copy. In the process of bringing the design to full fidelity, I adjusted spacing and alignment to find balance. Ultimately, the strong asymmetry from the wireframe did not flow well for users, returning to an aligned grid on the product card page better matched expectations.
This project started out as web layout only, bringing in responsive mobile design latter meant reverse engineering how content would collapse and reorder. Starting from the top, I pulled the navigation bar into the hamburger menu, keeping only the logo, cart, and search displayed. My goal was to encourage keyword search and keep the path to checkout always visible.
I followed a common design pattern for reordering the content as the screen size scaled down, keeping the left most element at the top of its given section. In-line items further right would drop below to stack, creating a single column.
Other adjustments for converting from web to mobile included creating a new set of Sketch symbols with a smaller size but larger font. The combination fit the margins of the mobile layout while improving legibility. 
Design Critique
This project concluded in a design review before a group of 10+ designer. As a group, we assessed the strengths and weaknesses of each mock-up. The following summarizes design feedback for future iterations of this eCommerce site. 
• The use of button gradients and drop shadows don't match with other flatter components in the design, pick a direction and be consistent (Resolved)
• Good use of a limited font library and image sizing to support faster site load times
• Add some additional structure to the cart screen to demarcate between items and the buttons that control those items (Pending more user testing)
• "Featured Works" as a title in mobile wasn't as effective in highlighting this unique selling point, consider how to make that more prominent/obvious.
Getting a design critique from peers or stakeholders is an important part of internal product validation. Where users are focused generally on task completion, I find that design critiques ask the designer "why." Being able to justify the thinking behind your design is a key part of this work. There should be intention behind what makes it into the product. Each round of wireframes and mock-ups should refine that path.  
Back to Top