Override the default image zoom level and lock it to
either ‘cover’ or ‘contain’ using the icons on the right.
zoom lock
Arrow Keys
for forward & backSpace Bar
to cycle image zoom.
Unifying four sites to create a single entry point
for 8 digital products with 2+ million users. We also
had to use an externally contracted agency to build it.
archment is the largest distributer of electronic transcripts and digital awards – the 800 pound gorilla in their niche. While 8000+ education institutions relied exclusively on their services, their web apps were managed separately from their public facing site, providing a disjointed and confusing experience.
s their CEO, Matthew Pittinsky (the founder of Blackboard), was famous for often saying, “The Site Is Our Service, and The Service Is Our Site”. The transition between them should be indistinguishable. Instead, it was notoriously difficult to navigate with users often stuck in the wrong place and a high bounce rate.
ith this in mind, it became my job
to partner with the Marketing Department in uniting four existing websites into a single new design that they could easily update while still providing a seamless entry into each product. Did I mention that we would also manage an external agency to build it?
Our task was to unite four interlinking web properties. This included separate B2B and B2C sites, a support section, and a much older site with content that had never been migrated. Each one had different branding, design, and navigation.
No current employee was fully aware of everything out there given the way it was scattered across domains. To create a cohesive plan, we first needed a clear map of all the interconnected pieces. You can see that research on the right, with different colors for navigation and flows between each web property.
Drop-off rates made it clear that we needed to provide a simple way for our primary consumers, students and parents, to enter our online software to send transcripts and receive awards.
On the flip side, the majority of revenues were generated through two separate B2B funnels. This meant that marketing pages needed to be easy to find, understandable, and generate significant SEO value to empower financial decision makers.
We decided to organize the information architecture of the new website around three target audiences. Our research indicated that lifestyle messaging was more effective for our marketing pages than the previous emphasis on products and features. We also created a fourth category for Parchment news, information, and support given that it was relevant to all target demographics.
We decided that the site should have a persistent left-tray menu. This was for two reasons: first, mobile and tablet use was higher than desktop for our primary users, and a comprehensive navigation panel followed standard app conventions. Secondly, organization by target audience allowed for consistent context for our 16 possible entry points. However, it did introduce additional engineering complexity and required extensive user testing.
During Parchment’s peak month of 2017, Google Analytics logged 1.2 million unique visitors and 73 million page views. 94% of those were students and parents who were stressed out and in a hurry. We decided the homepage and navigation should make things as simple for them as possible. The persistent nav was given tabs targeting our other users, but the main content was cut to a simple school search that started the ordering process.
We wanted our navigation scheme to prevent any page from being more than 3 navigation layers deep. Another prerequisite was that all pages should be accessible and editable by our Marketing Department. Limited time and resources meant that clear template mapping and strong Wordpress integration was more important than an extensive array of unique page designs. There are mocks at the bottom of this case study demonstrating our Wordpress content types.
Parchment’s marketing department implemented many different SEO and content marketing strategies that empowered our sales team to drive conversion for our b2b side. Parchment hosted a yearly conference in addition to regular online seminars. They also had a large following for their blog, and needed a place for news updates, press releases, and product announcements. These sections became two separate micro-sites that were integrated into the Parchment panel on the navigation tray.
With 6 Product Managers at Parchment, every service within the platform was well staffed. However, as a joint venture with the Marketing Department to be built by an external agency, it became necessary to manage many aspects of the design
process. This included timelines, phases, defining the minimum viable product, visual design, product integration and QA. For example, I created the infographic on the left to explain our process and timelines across teams.
You can see screenshots from the previous sites below. We knew that it would be impossible to do a single waterfall release that updated all of the page content at the same time. A significant design departure was impractical given users might move back and forth between new and old. These limitations defined much of the look and feel and provided a unique challenge.
I am enormously grateful to our Marketing Department and Member Support for finding volunteer students and admin with the promise of an iTunes gift card who were willing to help with our guided user study. We found plenty to improve upon, but were happy that the core concept proved to be clear and easy for a wide range of demographics with varying technical aptitude. Our individual tests were scripted using both our interaction and click-through prototypes and then administered through Adobe Connect screen sharing.
Once we had created an ideal user flow and a proposal for the primary navigation as well as identified the necessary templates and the homepage content and functionality, we wanted to explore a more app-focused look and feel. Our design team created a palette of web colors based off of ‘Parchment Teal’ that allowed for a monochromatic color scheme with exceptions for CTAs. This laid the foundation for the Parchment Design Language. Learn more.
Interaction happens when the UI is easy to understand, helpful, has a clear information scent, and provides a delightful experience. There was initial skepticism about a persistent side menu within our team, even though it is a common piece of functionality within dedicated mobile apps. To ensure better user testing, I programmed my own proof-of-concept prototype showing those interactions using CSS transitions & JQuery. This also proved instrumental in helping our lead UI developer to create that experience.
The click-through InVision prototype had hundreds of individual screens. While I will not be uploading that prototype here, you can see the .GIF below for an example of navigation through the calendar section. For those unfamiliar with inVision, it links together flat images or ‘mocks’ with ‘hot spots’. With enough screens, it is able to approximately simulate flows through an entire website.
The rise of hybrid phones, large format tablets, small format Chromebooks, and variations in how browsers manage pixel density have made it impossible to design for specific devices.
As a similar evolution, the internet has increasingly embraced scrolling content while adjusting for varying widths. In contrast, Apps have flexibility with the option to accommodate all sizes and orientations without subtracting from functionality and appearance. Only recently have leading-edge web technologies allowed for the same.
While applying these principles to the navigation elements, we included the standard boostrap-based grid for the CMS while defining clear break points for the side tray based on usability rather than device.
This meant the side nav tray mimicked app behavior while the web content was fully responsive. Example below.
While our CEO wanted the brand for the site to be indistinguishable from the product, the product itself wasn’t internally consistent. There were 6 different product managers following the Pragmatic Marketing Model with 8 designated products. In practice, this meant that each product was effectively managed independently.
When I joined Parchment, there was a minimal UI kit in place. We recognized an opportunity to use the Parchment website as the catalyst for creating a new Design System with updated styles. I wrote an article about the Parchment Design System here. The reverse was true that we also needed to make sure it was consistent with existing designs and flows while still providing as much of a refresh as possible.
With this in mind, we began by defining a digital style guide that could standardize and document all of the digital styles we used in Parchment.com. This included styles such as type hierarchy and colors in addition to visual elements like forms and content types with their interactions and behaviors. Because our Marketing department would manage updates and content, we focused on designing content types rather than holistic pages. The exceptions to this included micro-sites for our support center, events, news, webinars, and promotional pages for our yearly industry-wide conference.
This was a personal challenge because I think of pages as telling a specific story through a combination of content, media, design and interaction. Isolating design to content types while making sure it could still tell a cohesive story required us to sit down and sketch wireframes for permutations we were currently using as well as could be anticipated for the future. We then identified 30 of the most common reusable elements that would allow our marketers to easily change out content and created designs for them across different breakpoints. You can see a couple of those at the bottom of the page.
The site had to unify 16 entry points and integrate with many different APIs into Parchment’s products. This required extensive documentation both for our partnering agency and our internal software team of engineers. We additionally provided mocks, prototypes, resources, the beginning of our new style guide, and various standards such as ADA compliance, responsive criteria, and browser support.
I want to give credit to our marketing department for managing the agency relationship, as I was able to focus on working with their engineering team. I think they were excited to partner with dedicated product designers, and we enjoyed collaborating on specific animations, interactions, and behavior throughout the development process.
Our partnering agency made sure their code met industry standards, I made sure that it conformed to design, and our engineering team made sure it correctly supported the necessary APIs. We first ran QA on their machines and later installed the final WordPress theme in staging on our server for full regression testing and content population. It was time to launch the new site.
Our marketing department ran an integrated campaign leading up to the launch while our support team worked with our schools to provide upfront training and manage expectations. We feared the possibility that students, parents, and administrators would complain about the changes. Instead, all of our hard work paid off when support calls were immediately reduced with a measurable jump in our NPS score.
I was the principal designer for all of the work shown unless otherwise noted, and I am the author and creator of the case studies within this portfolio. This website exists as a digital resume for the purpose of providing proof of experience in order to gain future potential work. Many of these projects were completed collaboratively in a “creative for hire” agency, freelance contract, or software company with copyright assigned to that entity or client.
I always have language in my creative contracts that I discuss with clients and employers that specifies my ability to display my work publicly. This includes concepts and processes as well as final deliverables, given that all of these are necessary to display my competence as a UX and Product Designer. I follow best practices to the best of my ability to assure that my work for clients is in compliance with copyright, either through open licensing or purchase of stock photography, mockups, icons, and other creative resources. However, I recognize that digital ownership is sometimes disputed on the internet. I do not assume legal liability for work completed in good faith on behalf of corporations and organizations, even if it is displayed here in my Resume. Even so, I take copyright and intellectual property seriously as a professional designer and photographer.
If you have any questions or concerns about something displayed here, please contact me and I will do my best to resolve them as simply and expediently as possible. Thank you!