A

MedHelp Systems Redesign

OVERVIEW

During my time at MedHelp, the web's largest online health community, I was tasked with the responsibility of completely redesigning the company's 20-year old health forums web platform. The goals were primarily two-fold: 1. Redesign the forums to reflect the newly created MedHelp brand refresh, and 2. Improve the user experience through modern, mobile-first component design. After a long and impactful 3+ months of designing, the initiative was successfully completed. I explain the steps I followed during this systems redesign initiative below.

DESIGN PROCESS

1. Reviewed the product, took screenshots

I began this systems redesign initiative by first intimately understanding the way the current forums were designed and how they functioned. I did this by exploring each page of the site and taking screenshots of each page I saw.

2. Printed screenshots, marked core page elements

I then printed the screenshots of each page and began identifying the core elements found on each page. Since there was a lot of "noise" on the page with the existing designs, I found it necessary to use a highlighter to identify core elements so I could find trends in page layouts.

3. Grouped pages with similiar layouts, groups became templates

With the goal of identifying core templates the website was structured after, I grouped screenshots that shared the most common UI elements and overall page layouts. I labeled these templates in preparation for a new wireframe.

4. Wireframed each template

Starting with the template pages, I hand-sketched wireframes of these pages with their core elements on a whiteboard. I then moved those template wireframe sketches into a formal wireframe. After I had the core templates wireframed, I reviewed all of the pages and found outlier UI elements. I copied the template wireframe down and added the page-specific UI elements into the wireframe. I repeated this process for each of the pages I initially took screenshots of at the beginning of the process.

5. Took inventory of component elements used in wireframes

Now that all of the pages were wireframed, and each of those pages had wireframe-style UI elements present to represent actual UI component elements, I consolidated the wireframe components into a short list. From this list I then knew what unique visual components needed generated in order to properly bring the wireframed pages out of wireframes into their final visual design.

6. Created final visual components based on new brand research

While consulting the newly generated brand visual palette the company had created through a third-party agency, I constructed final visual component styles for each of the component elements accounted for in the previous step.

7. Generated final designs

I was then ready to go back to the wireframes and replace the wireframe-style components with new visual component styles to generate the final visual designs.

8. Ensured components were both mobile & desktop compatible

Since one of our top goals of the project was "mobile-first," it was at this point that I generated a mobile set of visual designs and "mobile-ized" the components. This helped ensure the designs were all usable from common mobile browsers.

9. Export final visuals, spec for development

Once the desktop and mobile designs had been team reviewed and approved, it was time to prepare the designs for development. I exported the design assets with documentation and style guide labeling for the developers. The style guide held the key of how components were measured and constructed. With this style guide, future team members could rely on this well-established, common design language to continue building onto the platform without the worry of deviating from the core design styles or brand personality.

DELIVERABLES

Snapshots of this project: Click here to download

TAKEAWAYS

Needless to say, this was no small task. The MedHelp system redesign was an entire team effort. More specifically, I worked directly with two Jr. Designers, the VP of Product, 3 project managers, and several engineers in seeing this through.

Overall, the initiative was a succcess. The replatforming and updating of the design continues to roll out today. I was certainly challenged in this task and learned the value of having a cohesive style guide that is well-documented and seamlessly connected to the brand. I'm excited to perform more system redesigns in the future.