coffeehousepress.org
Assignment: Create a functional, modern ecommerce website for a small but internationally renowned independent publisher.
Assignment: Create a functional, modern ecommerce website for a small but internationally renowned independent publisher.
The previous site had an outdated web presence riddled with broken links and clunky navigation.
![Picture of handwritten feature notes](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/9a59740b-2b5c-4308-93ce-adc2f90e1352_rw_600.png?h=012ff0c6dd7e743603a8bf7f89a92736)
Initial site feature notes
![Screenshot of Coffee House Press website homepage](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/45624c3d-c663-4f6a-9892-7206ff639f6e_rw_1920.png?h=320fdf42d32c583a9cdbc8264903bb89)
Coffee House Press homepage
![Picture of hand-drawn low fidelity wireframes](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/ba4bae48-b283-4a34-b004-6732223e4a25_rw_1920.png?h=ba199f0994e2cdd1ab5d8af7e280e9dc)
Initial wireframes highlighting content over ecommerce
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/d2a5ce4f-7473-4df3-a90d-1743d34e5262_rw_1200.png?h=a9d28b0950c0a99f87107b00ff6a53af)
Background research informed the starting point for wireframes:
Market research conducted by an independent researcher indicated users were primarily middle-age, initiating contact with the site through shopping, and were interested in the brand of the press due to its established influence in the industry.
Flows and pages became shopper-centric rather than featuring content like news and publisher updates. Although these were still available through navigation, CTAs highlighted preorders, buy-now options, and sales.
![Picture of hand-drawn wireframes for book pages](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/8b4f58ec-db89-4084-810e-b3361843d441_rw_3840.png?h=7dc6a1e8ef847ac0645a6dbda8080df4)
Wireframes brainstorming book page layouts
![Shop page](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/d2b58879-bb96-4333-9b13-d17613181920_rw_1920.png?h=96e009b1aa830e47affe6652e0f96c7c)
Shop page
![Book details page](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/59487829-3b00-4a1b-a6f7-8ed888ae55fe_rw_1920.png?h=f859da505767fbe15dd185c249f455ce)
Book details page
![Decorative divider](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/a496a04f-8a33-413d-9192-6a726f317534_rw_1200.png?h=f05a8acaa61e4d563f1d615a19a2586f)
In addition to being functional and sales-driven platform, users from readers to media must be able to find and engage with relevant content.
Limited by budget, the ecommerce site was set up by a volunteer developer. I then designed site architecture, implemented styling and content strategy across all pages, and applied custom CSS and HTML as needed. The project in total spanned six months.
![Resources menu](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/1547145c-62bb-4a8d-bff9-eb7559691707_rw_1200.png?h=dddeb845091ac473bfe479b91a4520c9)
Resources menu
![Homepage CTA](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/2777c998-a483-4eda-a7a2-849fc24d796c_rw_600.png?h=983b9036cffed36f85d4c9e1dcb832e5)
Homepage CTA
![Cart lightbox](https://cdn.myportfolio.com/9fcf76e5-a6c2-4dbb-9396-497920901170/e73d05ee-a539-47ec-baa4-2339c51373a7_rw_1920.png?h=0b3600ea914bd57d5e6de748b81c23cd)
Cart lightbox
Results were clear:
The publisher experienced a 186% increase in website sales within the first year of the website launching, decreased bounce rate, and positive comments by users across platforms.
• • • • • • • • • •