I was involved in several iterations of the corporate website across a 7-year tenure at Medical Asset Management. Originally as a technical writer/designer, I was first tasked to write and edit copy for a relaunch on the Wordpress platform, prior to which it had been hand-coded and maintained by an outside PHP developer.
Years later, I would be rebuilding the site myself using Webflow. Later again, I was tasked to move the site away from no-code platforms to bring in-house during my time as design director.
Wordpress (2017)
Problem
The existing site looked dated and stale
Our official company website existed parallel to and independent from the domain for our actual web application, which itself featured its own identity and splash page that clashed with the overall experience of the corporate site. These diverse subsidiaries fragmented the brand.
Maintaining the site was not a high priority for devs
The existing site was maintained in-house, but our .NET developers could rarely prioritize it over our application. Management needed a faster way to implement changes to content, press releases, or products in the store without taking resources away from release planning.
Vendor had shown little progress after months of work
At the time I was hired, management had contracted an outside vendor to relaunch our site on WordPress, a ubiquitous content management system (CMS) allowing direct content editing without development. As one of my first assignments, I would establish the information architecture and provide copy as the vendor’s point-of-contact.
Process
I standardized our brand identity
A challenge for our visual brand is that our parent corporate colors clashed with our subsidiary products. I standardized our wordmark to match the typeface used on our site. I then aligned all of our offerings under a unified brand and produced assets to be used on websites, documents, email signatures, and all other collateral.
I edited copy and organized information architecture
With scarce guidance, the vendor took our existing content and adapted it to new “lipstick;” however, the content needed to be updated. Some subsidiaries were defunct. Much of the copy was redundant across pages for filler. Over two weeks, I edited and streamlined copy. I took over the design, crafted a cleaner IA, and produced interface wireframes.
I integrated product pages into the parent company identity
The developers had made no progress on building our product pages because they were so fragmented from the marketing site they were building. I also wireframed these while bringing these subsidiary identities under one coherent visual brand.
The iRCODER product's branding featured bold yellow and black.
Result
Launched in 2018, the bolder colors and larger text of our new site invigorated our visual identity and communicated friendliness and ease. There remained many things I wished to iterate, such as a leaner navigation and closer integration of product pages, but this MVP offered a sufficient foundation on which to build.
Webflow (2019)
⇪ Back to Top | ⇦ Previous | Next ⇨
Problem
Our Wordpress was hacked
When Wordpress was originally offered as the platform for the new site, it was not well explained how we would find ourselved burdened by its administrative overhead, regular breaking updates, the unraveling of our plugins and existing content by its new Gutenberg editor↗, and especially its reputation for poor security. A year and a half after its launch, a hack exploited a Wordpress security vulnerability and took the siteoffline. Since the dashboard was hosted on the domain, it took our access to the site back-end with it.
We needed a replacement fast
At the time, I was learning Webflow, among other no-code tools, which primed me for working more closely with front-end web development and proper HTML/CSS in my future work.
We needed an alternative to Wordpress with a CMS we can update ourselves and better security.
Process
I whipped up a caretaker page by the end of the day
Using Webflow, I easily built a static page to point our domain to in the meantime while we worked on building a replacement.
I condensed our entire sitemap
The new information architecture sought to consolidate submenus into page sections to limit on-screen nav items and thus reduce cognitive load for the user. Having to start from scratch, we reasoned it would be more beneficial for search engine optimization (SEO) to load less pages with more substance than spread thin information across too many pages.
I sketched wireframes and illustrations
Having the constraints of a design detailing the proportions of columns and screen element sizes expedited my work in Webflow. Wireframes allow me to create without the constraints imposed by the design software. Design comes before development. This is a maxim I hoped to introduce to the application development as well.
I mapped elements and components in advance
Along with the wireframes, I determined the outline for my HTML scaffolding and box model prior to building in Webflow. I created a page for the site's design system to serve as both a reference and a single location for site-wide style edits.
I designed and tested UI for eCommerce
After designing layout for pages in the checkout experience, I linked the pages, configured payment processors, and personally walked through the user journey of someone purchasing an item from the site.
Result
Thanks to Webflow, I was able to get an MVP replacement site up and running within a week. This gave us a foundational online presence, which we would build upon by adding About pages, eCommerce functionality, and content posts incrementally. While the MVP site stopped the bleeding for now, we still had to restoring our subpages—not just to reestablish authority for SEO, but we urgently needed a working web store. Users were having to place orders by phone or submit a message via web form.
In-house (2021)
⇪ Back to Top | ⇦ Previous | Next ⇨
Problem
We didn't want platform-dependency
In 2021, I returned to Medical Asset Management to oversee the next iteration of the website. Having previously suffered a security breach on WordPress and with me being the only one familiar with Webflow when I left, upper management was wary of being locked into any specific platform. They hired a dedicated designer and developer to build the site in-house, ensuring complete control and security.
Some of the team's competencies were a bad fit
A UX designer had been hired prior to my joining the project, working on design documents for a year. Despite their efforts, the results were visually inconsistent and subpar, focused on graphic design over user experience. Our developer began to build the site using Create React App, a Javascript-heavy approach misaligned to our needs, as it would compromise our SEO and performance when 90% of our site is static content.
Process
I grouped info architecture by category
This rebuild presented an opportunity to taxonomize the top-level site navigation more intuitively. Using a mind map format, I organized site sections by category. This restructuring was not just about aesthetics; it aimed to enhance SEO. By establishing a clear vertical hierarchy, we could funnel SEO authority upward, crucial for recovering any ranking during the previous site's downtime.
We drew inspiration from Figma templates...
To guide our redesign, I presented several Figma template ideas to the team. These low-fidelity designs helped us visualize potential layouts and informed our decisions moving forward. The chosen templates provided a foundation upon which we could build, streamlining the design process and ensuring a cohesive visual and functional flow.
...then standardized page components
Embracing the principles of Atomic Design, I began standardizing page components. This method allowed us to break down the design into fundamental building blocks, ensuring consistency across the site. Guided by our selected template preferences, we developed a set of reusable components—atoms, molecules, and organisms—that could combine to build pages efficiently, reducing development time and ensuring a cohesive user interface.
I defined the driving principles and purpose of the Home page
The Home page needed to encapsulate our brand's essence while directing users efficiently to key site areas. I set out to create a space that was not only visually engaging but also functionally intuitive, serving as the gateway to our services and ethos.
I sold upper management on the need for social proof
Convincing upper management about the necessity of incorporating social proof elements was a pivotal moment in the project. By showcasing the value of testimonials and user reviews, I highlighted their potential in enhancing trust and establishing credibility. Integrating these elements into our site would not only enhance our reputation but also provide tangible evidence of our impact and authority.
I specified how wireframes equate to components for handoff
To streamline the development process, I mapped out each region of the wireframes to corresponding components. This clarity ensured that the developers understood exactly which elements of the design correlated with specific parts of the code. This detailed specification ensured that the development team had a clear understanding of the design-to-code translation.
Result
The outcome of these concerted efforts was a robust, in-house developed website that resonated with our brand identity and user needs. The new site structure not only enhanced our SEO performance but also provided a secure, platform-independent solution. User engagement increased, reflected in longer session durations and a lower bounce rate. The integration of social proof elements further solidified our credibility, leading to an uptick in user trust and satisfaction. This iteration of the website not only met but exceeded the expectations of upper management, marking a significant milestone in our digital presence.
Academy & eCommerce
With the base pages and repository infrastructure in place to support our own site hosting, the final pieces to add were the Academy, an online learning environment; and the Cart, a basic eCommerce feature for online purchases.
Problem
We wanted to try online training during COVID
To meet the challenge of lockdown, we would move our training system online for the first time. Our trainers were still flying to client locations for weeks to teach our software in-person with printed materials. We were burning through time and money.
Integrating a third-party made more sense than custom development
Still wary of being trapped by vendor dependencies, the owners wanted a full soup-to-nuts build of our own eLearning platform. I recommended we instead utilized a specialized eLearning service and integrate it into the site via API for a seamless user experience.
I researched the capabilities and costs of third-parties and secured approval to begin building out the online curriculum in TalentLMS↗, a flexible, affordable learning management system (LMS) that we could white-label and brand as needed.
Process
I converted static content to portable HTML/CSS
TalentLMS allowed us to author each lesson slide as raw HTML, which helped assure our decision-makers who were wary of being locked into a platform.
I resurrected and revised old shopping cart designs
The shopping cart was a feature that had been on the back burner for years. I dusted off the old designs and updated them to match the new site's aesthetic. I referred to the Webflow prototype, converting the designs to HTML/CSS for the developers to implement.
I also found opportunities to reduce the number of steps in the checkout flow proposed by the previous UX designer, streamlining the checkout process to reduce friction and increase conversions.
These services could connect via API
Customers could purchase a course through our store, which would trigger their registration on TalentLMS via Zapier or other Restful API.
I used Jira to manage the project
Using Roadmaps in Jira, I was able to schedule several sprints in advance and keep management informed of target dates. I still managed to balance development time on the site with work on the main application UI.
Result
At the time I left Medical Asset Management, content was still being added to TalentLMS for the Academy, so this final phase was not yet complete. However, the groundwork was laid for a robust, scalable, and secure online learning environment that would serve as a valuable resource for our clients and a significant revenue stream for the company.