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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Snapshots of this project: Click here to download
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.