Concept, design and build (on Webflow) the Newsletters repository and associated pages and directories, respecting the existing Design System.
Jewish Foundation for the Righteous - Advocacy | Non-Profit.
Product Designer for the Newsletter and associated sections. From conception and design to Webflow development. Help from the team for revisions and guidance.
Suits & Sandals has been rebuilding the Jewish Foundation for the Righteous website [Old website here] to fit a cleaner, more current aesthetic. The Client is seeking to keep much of the functionality of the old website.
When I joined the team, much of the website had been built, but as I had become comfortable working with Webflow, I was given ownership of concepting and building some remaining sections - namely the Newsletter directory and associated pages, and the Book Review pages.
Each month, two newsletters are mailed to subscribers via Mailchimp. Each newsletter contains link to pages on the website (many of which have not yet been designed, so it is my task to build these pages and associated directories).
A newsletter linking to the month’s entry page for: News from the 19th Floor (Events/ Announcements); This Month in Holocaust History (Historical); and Profiles in Courage (profile on a specific rescuer) [already built].
A monthly newsletter with a link to the month’s recommended book and detailed review.
Each of these pages needs to be built out using Webflow CMS, and corresponding directories/archives need to be created.
This kind of project is very interesting from a UX perspective, because the main User to we need to design for is internal - namely, the client.
In this case specifically, I needed to design keeping the Marketing Director’s usability needs in mind. The Marketing Director (MD) would be writing and publishing these newsletters monthly, as well as writing the content for the pages linked within.
.png)
The main persona (or more accurately in this case, person) considered when designing the newsletter function, is the Marketing Director (MD). This is because the MD will be directly using and amending this section, as she will be adding a new page monthly and linking it within the monthly newsletters. Additionally, it is likely that the mode website visitor is of a similar demographic as the MD.
Because of this, it is essential that the section is designed in a way that is highly usable for the MD. The main consideration is that the MD is not comfortable learning new technologies or technological processes. The old site was hosted on WordPress, whereas the new one has been built on Webflow so the transition between the two platforms needs to be as smooth as possible.
I chose to use this Agile strategy to help me understand and organize project needs. As this is an Advocacy and Education platform, the main focus for the Marketing Director (our Persona) is giving website visitors plenty of access to information, both presently relevant, and past.The danger here is that lots of information can become messy, so this needs to be done in a way that is well organized and not-overwhelming.
The user stories outlined above help us break down the Epic (Adding Newsletters and related sections to the website) into manageable, clear and actionable tasks:
On the old website, the User Flow for accessing newsletters and the information contained within, has a few issues.
There are two modes of entry/access to Newsletters: through the Newsletter themselves (which would have been received by email) or through the Directory/Archive of newsletters found on the website.
Two issues stand out: first, if accessing the Newsletter from the website archive, Users are forced to enter a second loop of actions in order to access the pages (e.g. News from the 19th Floor) linked within. There is no direct access to the individual pages. Second, once said pages are reached, the User is effectively “stuck” there. It is a digital dead-end with no connection to the rest of the website except for the Navbar.
I designed this new User Flow to both respect the client’s wishes to maintain the same system of Mailchimp Newsletters, while creating less of a headache for users trying to access information. Designing for the User stories enabled me to create a User Flow that is a lot more simple and useful.
Where accessing the Newsletter Directory/Archive still opens a second loop of actions to access the pages linked within, this is now an optional rather than obligatory step.
Creating separate archives for News from the 19th Floor and This Month in Holocaust History pages means users can access these directly instead of being forced to dig through newsletters.
Additionally, once these individual pages are reached, breadcrumbs allow users to return to the archive and the rest of the website, following Usability Heuristic protocols.
Breadcrumbs become very important when a User land on a page through an external link, as it helps them orient themselves inside the website. For the rest of the website, a Side Nav has been employed for this function, but when I designed the Book Review page I found there just had to be an obvious button linking the page to the other recommended books, so I made a rare use of it here.
I included the CTA for purchasing the book here as well as in the book directory to give users double the chances of clicking it.
As mentioned briefly above, the Recommended Reading Directory had already been built by the team but needed some editing.
As it stood, the Learn More button linked to an Amazon affiliate link, which is confusing. I renamed it to Buy Now (using active, immediate wording to increase click-through rates) and added a Learn More button which would link to the Book Review Page.
Note that not all recommended books have an associated review, so that button is designed to disappear if there is no associated content.
*This will be revised during iteration - see the next section.
Here I used the side nav as a way of orienting website visitors while respecting previous design choices. Selecting “News from the 19th Floor” returns you to the directory.
In this case, the team decided to keep the featured month (This Month) separate from the directory (All Months).
I also formatted the first paragraph to have more visual weight to it than the rest.
This serves to pull in the gaze and start the reading process, and acts almost as an article summary.
I used a similar layout for both directories to provide consistency and minimize confusion.
However, upon reflections I decided that while both are contained within the same newsletter, it would be more intuitive for website visitors if This Month in Holocaust History and its directory were placed in the Holocaust Education menu, given its educative nature. As these pages have a title, I included it in the directory so as to help users make decisions on which article to open.
I designed the newsletter directory to reflect the more minimalist UI of the new website.* As a team, it was decided to keep the number of available newsletters limited to the last 12 editions - a number we deemed as providing a good balance between providing plenty of information (a year, precisely), and not being overwhelming.
*This will be revised during iteration - see the next section.
Upon team review, we changed the UI and positioning of the buttons to give the primary CTA (the affiliate amazon link) more prominence both through layout and position, guiding User’s gaze to it and increasing likelihood of click-through rates. It also makes the design less busy.
It was also established that given the length of the available newsletter archive (12 months), we would need to design them as accordion menus. Otherwise, the second newsletter risks disappearing out of site and losing potential subscribers.
A main element I would revisit given the proper approval is the very system of newsletters. Newsletter subscribers sign up to one or more of two newsletters: one (From the JFR) which includes notices of upcoming events and talks (News from the 19th Floor); educational pieces on Holocaust history (This Month in Holocaust History); and educational pieces on rescuer stories (Profiles in Courage). The second, separate newsletter is called From the JFR Library and links to a recommended book and a full book review.
Website patrons who would like to receive both recommended reads and event and historical information, have to sign up to both Newsletters, meaning double the amount of emails and increased cognitive load at sign-up when trying to understand which newsletter to subscribe to. Since merging the two newsletters would only result in the increase of one content category (adding the recommended book to the From the JFR Newsletter), it seems it would be better for the User to just have one general newsletter whose sections Users can explore at their own free will.
This would also clean up the Newsletter Directory on the website as it would reduce it to one section.
Aside from internal review which brought about the changes detailed in the previous section, this project hasn’t had much post-launch analysis or metrics, in part because it was out of scope and in part because the small size of the website means there might not be meaningful insight gained.