Swoon Reads

noun,  /swo͞on rēds/

An imprint of Macmillan that publishes young and new adult romance novels

Responsive Showcase Mockup Swoon ReadsResponsive Showcase Mockup Swoon Reads

Macmillan Publishing

Build a website to introduce and promote Swoon Reads, an imprint of Macmillan that publishes young and new adult romance novels

Business Requirements

The goal of the site was to develop a community where readers and writers of the young adult romance genre could share and discover stories, or "manuscripts". Aspiring authors would be able to submit their manuscripts with the opportunity to be picked up and published by Swoon Reads.

Competitive Analysis

We started the project by reviewing competitor sites. This was a way to generate ideas and see what we were up against. With this insight, and having learned the goals of the business and the content we would be working with, we were able to develop the architecture for SwoonReads.com. 


The main areas of the site were Browse, Submit, and My Reads. 

"Browse" housed the manuscripts. "Submit" allowed users to upload their manuscripts. And "My Reads" was the bookshelf that held any manuscripts the user was reading or had flagged for reading later ("Read Now" or "Read Later").

When this architecture was established, I started on the design of the header and footer. 

Header & Footer

With the header and footer design in place, we moved onto the page content, starting with the core of the content – the manuscripts. We explored how a manuscript would be presented both within the landing page and listing lockup.

We continued to develop wireframes for the the rest of the sites's pages across 3 viewports: mobile, tablet, and desktop.


Below are a few key screens from our final wireframe deliverable. These screens are the Homepage, the "Browse" page, and the "Manuscript Details" page, all shown in the logged out state.

Homepage (Logged Out)

"Browse" Page (Logged Out)

"Manuscript Details" Page (Logged Out)

With all page layouts defined, the Visual Designer was able to produce the final comps to be handed off to the developer.

Visual Design

[unex_ce_button id="content_40r34hjix" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#212121" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://swoonreads.com/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]SWOONREADS.COM[/ce_button]