05
ARCH
Supplies
‍
E-Commerce Website Redesign & Rebranding For San Francisco Based Art Supply Store
Two laptop mockups with ARCH Supplies detailed product page and home screens above monochromatic architectural background.
Intro
About ARCHARCH in San Francisco first opened its doors in 1978 serving a community of architects, urban designers, engineers, designers, & artists. The store not only carries top-of-the-line products, it also imparts a delightful & adventurous experience for its customers.
‍
The ChallengeWith COVID affecting local shops' way of business, ARCH faces a dilemma where their web store is not properly showcasing their unique inventory offering & brand personality.
‍
How might we provide ARCH's customers with a pleasant & explorative shopping experience at their store online?
My Role
UX Designer
Project Management, Research, Information Architecture, Visual Design, Interaction Design, Prototyping & Testing
‍TimelineJuly 27th - August 7th, 2020
‍
ToolsFigma, Google Suite, Trello, Miro, iPad & Paper, Slack
‍
Figma, Google Docs, Slides, Sheets, Trello, Miro and Slack icons in black.
Jump to Interactive Prototype
Overview
Rebuilding A Website To Recapture That Feeling Of A Kid In A Candy StoreThe goal was to redesign ARCH's web store to include better product features & promotions to emulate the exploratory shopping experience like that of the physical art supply store.
Animation of ARCH Supplies home screen walkthrough.
Painting A Story For CustomersInfusing ARCH's brand identity into the completely revamped website, rich with featured products, community events, & more about ARCH themselves.
Animation of ARCH Supplies navigation and product list view walkthrough.
Navigation & Presentation With Architectural ClarityCarefully reconstructed product navigation & structured product cards with just the right amount of info through search results.
Animation of ARCH Supplies product page walkthrough.
A Sharpened Look With Product PagesA clean & concise product page with the essential details, quality images, ratings, & other product recommendations to help the customer make confident decisions.
Animation of ARCH Supplies product page and cart walkthrough.
Peeling Back The Layers For An Intuitive CheckoutEasy product specification set up with clear call to actions. Free shipping promotions & recommended products in the Cart Page to entice customers.
Discover
What Art Hobbyists Had To Say About Shopping For SuppliesI conducted user interviews with artists, designers & crafters who shopped at local art supply stores pre-COVID. The responses helped me understand how they feel in addition to their art supply online shopping experience comparison.
Key insights and key comments identified through user interviews.
Supporting Small Business ShoppersAside from the fact that all users loved the exploratory experience with art supply stores, 3 out of 4 users mentioned supporting local businesses. This made me realize ARCH's main online customers are likely those who have been patrons of the physical location.
I synthesized the above insights & created a persona to help guide & model the redesign of the website.
Poster featuring profiles and behaviors of a user persona.
Analysis
Have & Have Nots Of eCommerce SitesTo understand effective eCommerce tactics, I evaluated the websites of big box retailers who sold products similar to ARCH's line, & then other brands that had a prominent online presence.

Through competitive & comparative analysis, I identified that ARCH was missing a good number of key components that would make an enticing & effective site for e-commerce as shown below.
Competitive and comparative analysis chart against features from multiple commerce websites.
Thoughts & Feelings With The Current Site FunctionalityI wanted to understand the current site's standpoint with functionality & therefore conducted a series of usability tests with 5 potential customers. Below are some of the notable responses of the current site regarding what wasn't working well so that I may resolve them.
Main Page On Current Site
Animation of existing ARCH Supplies product navigation menu and user pain points.
Product Category Page On Current Site
Animation of existing ARCH Supplies product category page and user pain points.
Detailed Product Page On Current Site
Animation of existing ARCH Supplies detailed product page and user pain points.
Define
To The Drawing Board For SolutionsARCH's current website has a good running start with the help of a Shopify template. However, solutions such as personalizing it & adding more materials like promotions, ratings, recommendations, & improved navigation will make a more impactful exploratory experience for users such as Alexander.
Diagram of solutions for ARCH Supplies e-commerce.
Reinvigorating The Identity In ARCHARCH's location is a fascinating brick red painted warehouse in the design district of San Francisco. The website was void of the brand & needed the identity representation to bring back the atmosphere & experience for both new & repeat customers.
‍
The mood board below helped me hone in on the brand palette & aesthetic.
Moodboard with textures, art, typography, environments, fashion in varying hues of whites, oranges and blues.
Develop
A Proper Spot On The ShelfNew site map, cleaner & better navigation. Responses from usability tests of the current site & open card sorting informed me to make the biggest overhaul with the product categories navigation.
Second was the opportunity to strengthen the utility of the home page by adding featured materials that would promote new products & also reconnect the community.
New Site Map
New site map diagram of ARCH Supplies e-commerce.
New User Flow
New user flow diagram of ARCH Supplies e-commerce.
Beyond Pencil PushingSeveral ideation sketches were completed on the global navigation & main page.
I wanted to push the envelope with global navigation & interaction conventions, however, it would not be reflective of the brand concept so I chose to keep it simplistic & structured.
Main Page & Navigation Iterations
Low fidelity wireframe sketches of home screen and navigation bar concepts.
Main Page, Product Results Page, & Detailed Product Pages
Low fidelity wireframe sketches of home screen, category, and detailed product page concepts.
Show & Tell With Mid Fidelity WireframesThere was heavy consideration with how to effectively utilize the real estate of the main page by adding promotions & community workshop features.
Product Result pages have clear alignment & delineation of information. The Detailed Product page have a no frills approach & focus on quality images & supplemental information.
Main Page
Animation of mid-fidelity greyscale home screen walkthrough.
Product Results Page
Animation of mid-fidelity greyscale product results screen walkthrough.
Detailed Product Page
Animation of mid-fidelity greyscale detailed product screen walkthrough.
Adding A Product To Cart & Cart Page
Animation of mid-fidelity greyscale detailed product and cart screen walkthrough.
Luminous Test Results With A Layering Of AdjustmentsOverall navigation & readability of the pages were highly rated through mid-fi usability testing. Some grand ideas were introduced from the users as well, such as free shipping qualifications on the check out page.
‍
Fortunately most issues that arose required minor to intermediate adjustments, & affinity mapping helped to prioritize for a manageable punch list.
Sticky notes of user insights and comments sorted through affinity mapping from usability testing focusing on Main Page, Product Pages, and Cart Page.
Prototype
ScenarioAlexander, the architecture student & intern would like to continue supporting local shops like ARCH Supply rather than the big box retailers. Due to shelter-in-place, his only means is to shop online.
TaskUse the ARCH Supply desktop webstore to find & purchase a set of drawing pencils.

Don't see the prototype?
Open Here
Retrospective
01Implemented ARCH's brand identity & personality into webstore

02Improved navigation efficiency

03Introduced promotional materials & recommended products

04Included an Add To Wishlist feature

05Added Staff Pick & Product Ratings features
ReflectionsThis project had been one of my favorites so far & was one of the moments I wanted to test my visual & interaction design abilities. However, I had to consider the product type & ARCH's identity.

Does ARCH require a flashy parallax animation on the main page? Do they need fancy call to action buttons or images? No. ARCH is a small craft business in a beautifully understated industrial shell, & anything more than a simple architectural layout would've been unnecessary embellishment.
Forthcoming
What's NextTo see many small businesses shuttering their doors during the pandemic, there is no stronger feeling than now to keep them alive. As a customer of ARCH myself, I'd love to contribute towards their success & to creatively get past the hurdles COVID has brought forth. I plan to present this project to the owner

An ambitious future goal that will really push the exploratory experience will be to implement a virtual walkthrough feature where online customers can experience "walking" around the warehouse location.
01Further iterations through hi-fidelity prototype usability tests & affinity mapping

02Implement a more effective search bar with drop-down list of both keyword & product suggestions
‍03Incentivize with a reward points system

04Promote activity kits during shelter-in-place

05Explore a virtual walkthrough feature
Back To Top
Other Work
Two mobile mockups with Padx sign-in and rental search profile screens in front of a white architectural wall backdrop.Two mobile mockups with Identity Guard sign-in and onboarding screens on above gradient wall background.
00
LinkedIn Icon in blackMail icon in black which prompts an email draft.
Designed by Naomi Suen, 2023.