At InRhythm our agile team of 5 (2 Senior Developers, a Front End Engineer, a Product Manager and myself) were to develop a customized CMS and promotional landing pages for Blue Apron. Blue Apron needed message-specific landing pages for customer acquisition and felt the over-the-shelf CMS they were currently using was not specific enough to their needs.
From the Blue Apron team, we were able to gather lots of great feedback and observed how the old CMS was used. We listened to their wants, needs and pain-points.
Through weekly sprints, we were able to develop MVPs for user-testing, evaluating and revamping. Getting work out quickly and receiving timely assessments let us ship out quality UX.
I decided to restructure the landing pages using a modular design, using smaller pieces to create a whole that could be inserted. This way, the best use-case scenario would be available, as non-designers would be building these pages, and there would not be random design elements injected into the content. The CMS was built using React and the content changes real-time as you type or click. The user can start with an existing template to edit or build one from a pre-formatted structure. Fonts, buttons, images, headlines, copy ect is fully customizable. By clicking on one of these items in the template, the left-side control panel reflect all it's changeable CSS styling options.
This screen shows the hero image module's CTA button selected, and all it's CSS attributes able to be edited.
CONTENT BLOCK SELECTED
The modular content module with wine and food plates is selected. The control panel on the left shows all the module's elements, each one clickable, therefore editable. Each content module can be edited, deleted, moved up or down, and what is really useful- saved and used again in a different template.
USER LOG IN/TEMPLATE AND LANDING PAGE START
After log in, user chooses to build from a wireframed-template or an existing landing page to make smaller edits to.
VIDEO LANDING PAGE
Wireframe and finished design for promotional Blue Apron branded video, bulleted value props and a CTA button. Larger headline image and copy value props below.
Haymarket Ad Tracking Dashboard
SQL data tables are everywhere and not great to look at. Tiny llegible rows and columns of data are incredibly hard to read and export. Our business team needed a better way to see how targeted ads and campaigns were performing for each brand at any time, 2-3 layers deep, across a range of variables.
I planned and designed a visual-based dashboard using vectors to create Haymarketmedia's advertisement tracking site. This unique product allows the business team to provide real-time analytics to their advertising clientele. I directed the front-end team for this AngularJS single-page project. I designed the flows, IA, micro-interactions, UI component system and the complete layout.
Breakouts for each campaign can be viewed and analyzed to see where IAB standards are, or not not fulfilled. I needed to allot design for 100% viewability in order to adhere to impression/views.
This product proved successful and was in talks to becoming a stand-alone app for licensing.
Haymarket Drug Database (Codenamed-Project Royale)
This internal-facing drug database was built out of the necessity to easily add, edit and maintain prescription drugs to export to our empr.com website, which medical professionals use to prescribe drugs.
With our editors, who will be using this product extensively, I conducted in-depth research, recording their pain points, needs and wants, performed agile component testing, and constant feedback to design this user-friendly database that eased their roles substantially. I designed the flows, IA, micro-interactions, UI component system and the complete layout.
No more confusion who or when a drug was added or edited. No more clunky hard to read industry-tabled data that made editors squint and wince. The final product was praised and has been mentioned as a possible licensed product for other drug companies.
Drug Database screens-
Dashboard
Drug add/edit version history
Drug search results for adding/editing
Drug manufacturer information
Expanded fields of a individual drug page for editing
Haymarket in-house CMS The section transformer
As to the delight of our web editors the first version of our in-house CMS underwent a complete UI/UX overhaul.
I worked closely with the cross-functional teams to design, direct and produce an appealing, visual-based CMS platform that editorial and web teams would be working with for hours on end.
In this responsive-based editing interface I split content areas into gridded regions, editors now have total flexibility and adding and editing content is super streamlined.
I worked directly with the front-end team during design and at handoff to get the smallest details perfected, such as drag and drop components and intuitive micro-actions. I designed the flows, IA, micro-interactions, UI component system and the complete layout.
This product alleviated many headaches and complaints, and saved the company money as not having to purchase and migrate to a new CMS.
Retractable Phone Component
Problem and solution affordances for a retractable phone clip that hooks to a belt loop or the inside of a bag/purse, to keep us from losing our phones.
The problem is my friends and I were always losing phones in the cab, left them on the bar, fell out of pockets, maybe pick pocketed, even. I wanted a way to keep your phone on you at all times but not loosely, actually safely clipped, but had to be able to be used at any times without hinderance.
The logistical issues are that with all the devices out, and most people already using an expensive protective case, I had to rule out any device specific holder, among other ways of device specific attachment.
The solution is a strong "adhesive disc" the size of a dime would be stuck to the back of any phone or device case. The retractible can be unhooked from the disc at any time.
The benefit/win is the retractable ribbon makes it easy to call or text, just pull the phone out until the ribbon locks, use it, then when done it retracts back to your pocket or bag/purse.
I was asked to create two 22x30 inch c-prints celebrating the 10 year service of NY Fed President William Dudley. This was an incredibly sensitive, high-profile project since one is now on the accolade wall of the Federal Reserve, the other was presented personally to the retiring president.
Since this was a celebration of his tenure I researched through many photos of President Dudley with many important constituents in milestone events.
I was able to own the project from inception to printing and framing.
Investing in America’s Workforce 3 volume printed book, rack card and icon set.
With initiatives with partnering institutions, the Federal Reserve devised an offering of contemporary research and best practices on workforce development in this three-volume publication.
I worked alongside a Project Manager and a business/marketing team to create a consistent visual system for all 3 books and a 2-sided promotional rack card.
I sketched up an Americana theme for the deliverables, listened and incorporated a lot of excellent feedback, often on the fly.
Also delivered were custom icons used for chapter sections and as a pattern on the cover.
I was tasked with a problem that needs to expand the top funnel for lead generation and rapid expansion in newer markets. To achieve this, a contest was run offering 10 lucky people a chance to dine with Bobby Flay, celebrity chef and restaurateur.
The challenge is to imagine and design the contest. How can I entice contestants to enter? What research should we do upfront? How will we captivate entrants? What should they know about MealPal before, during, and after the contest? What downstream processes should be in place to help capitalize on leads generated? What story are we telling? How will we measure success?
I had fun with this study, and learning Bobby Flay's favorite food are burgers, the mocks are as follows:
1. Email promo
2. Dedicated click through landing page
3. Confirmation page
I outlined in paper sketches my reasons and affordances for the process, putting the user first. I deviated from the traditional illustrative MealPal emails I receive to create something more visually verbose and bold, using type. I also decided not to use a head shot of Bobby Flay (everyone knows who he is) and I did not find one that would work out for this particular promotion, instead I used enticing copy in brighter colors.
Not only is getting a lead to convert paramount, building a brand loyalty and creating awareness is even more important, such I added referring a friend and share to possibly increase chances of winning.
The mocks are seamless between desktop and mobile, with a prominent call to action front and center, in the viewport.
myCME- Haymarket Medical Education’s (HME) industry-leading medical education website, offers highly credible, rigorous, certified CME/CE programs that meet the day-to-day and evolving long-term needs of healthcare professionals.
For this tight-deadlined product I was responsible for user stories, vision, and complete design control for this huge UX project. Since many users would be completing tests for credit, the mobile experience had to be seamless and of utmost importance.
I directed and created the whole signup/registration, course taking journey, along with the purchase and check out experience. By repeating design patterns from a modular system, our users will gain familiarity and the layout is flexible that easily adapts to different screen sizes. In addition, the modules act as containers for components, enabling us to insert different types of content and functionality, This redesign led to a tenfold increase in registrants and purchases.
MIMS Learning (UK version) is growing fast, providing free and premium education for GPs and other healthcare professionals in the UK.
Medical professionals in the UK that need to keep up with accreditation do so a bit differently in the US. They compile online learning, along with their notes and seminars then submit this to mentors. In short- we needed a way to organize and have a cloud-based locale for all this information.
We created "My CPD Organizer". Search and complete courses, take and save notes and add classes to a targeted learning plan, then export this to your mentor. No one else is doing this, and has simplified the experience that UK medical professionals interact with online learning.
Fully responsive transition. Many users would be using this product remotely.
My CPD Organizer dashboard gives you a visual snapshot of your notes, saved bookmarks by "labels" and credits earned within a selected time.
20/20 Advisor branded sites
New initiative to develop 20 new sites for healthcare providers by 2020. It is critical to develop new ways to reach specialized healthcare providers. By recognizing and understanding that specialists covet niche content, we can engage more users and deliver more advertising opportunity.
Since these sites are under a branded network umbrella and would need to be deployed quickly as targeted advertising is sold, I created these as a modular template, with reusable components, with only minor style changes needed to ship out a new one. Therefore, design and dev resources are spared and only new editorial content needs to be put in place. With only a few changes, network sites would be pushed to production as soon as targeted advertising is sold and the niche medical business model progresses and brand awareness is promoted.
Currently there are 10 of these brands and this is currently in testing.
MPR-Monthly Prescription Reference, with over 820,000 healthcare professionals online, and mobile is THE multispecialty drug information offering concise prescribing information.
I overhauled the nav and restructured the section and article pages to improve ad placements (viewability, number of placements, embed in user flow for increased conversions)
This strategic redesign was keeping in mind that we needed to make global advertising changes for a enterprise CMS across all sites to address viewability and inventory issues.
Result- 25% increase in impression inventory available as a result of increased engagement + increased/improved ad call placement on site and on mobile.
At least 25% increase in total PVs across site and mobile (approximate gain of 100,000 PVs/month)
Medical Marketing and Media- News, analysis, expert commentary, feature stories and special reports for leaders and decision-makers in the healthcare marketing community.
I proposed this design with the idea of offering more unique ad placements within the editorial content. By being the advocate for a modular design the We were allotted a budget for original art and commissioned photography. I designed this 4 column gridded layout with rich full-width imagery, proposed shorter headlines, without decks. A quicker visual story telling read.
These sites are yet to be built.
MM&M responsive
DMN is the leading provider of digital and data-driven marketing analysis, research, and content.
McKnight's and McKnight's Senior Living are the pre-eminent media brand for senior living professionals.
McKnights expanded their presence in the untapped senior living sector to better serve our audience while generating new revenue and profits.
I created the senior living design to enhance blogs and guest articles. The flagship brand deals more with quick hit government/regulation news while senior living has a bit "softer" editorial readership.
I juxtaposed large imagery/headlines with smaller headlines while choosing not to clutter the layout. This direction has increased scrolling and page views.
I redesigned the email newsletters pushing for no deck blurbs and shorter headlines, thus resulting in more clickthroughs.
With the success of the redesign and the birth of Senior Living, The business team wanted to redesign their online directory to provide a better user experience and increase sales.
To tap into more revenue opportunities, I recommended and quickly mocked up a "Featured Company" asset and an email that this company would pay top dollar for premium exposure. I created a "multi-tier system" for companies based on the amount of exposure they can pay for.
We completely simplified the search and their results. I designed a huge search box on the main splash page, while keeping this a bit promotional looking to entice companies to advertise with us.
Advertising revenue and page views have skyrocketed since the launch, and we are planning on using the template for our DMN brand.
Awards!- Azbee awards-Gold: The McKnight's 2017 Industry Directory, a valuable resource for long-term care providers with contact information, trends and purchasing reports, in the online Buyer's Guide category.
25th Annual APEX competition- McKnight's earned a Grand Award for its website for the second straight year.
For the second year in a row, McKnight's Daily Update won an Award of Excellence in the “Best Newsletters — E-mail” category.
SC Media arms cybersecurity professionals with the in-depth, unbiased business and technical information they need to tackle the countless security challenges they face.
I headed the effort for this huge content strategy and redesign to deliver news and stories in niche channels. By structuring assets into a grid we could inject more ad positions while maintaining a clean tangible layout. This design responds seamlessly to device types.
I created the whole product review user flow and reviews. I worked diligently and directed the front-end team since this was a challenge to get it perfect for mobile.