PROCESS

INTERVIEW STAKE HOLDERS AND COLLECT PAST RESEARCH

The first step was to interview all the stakeholders involved. Active listening and documenting the interviews was the key to understanding the reasons and the business and organizational goals for the re-design.

All past research and feedback was also collected in this discovery phase.

EXPERT REVIEW OF THE OLD SITE

Reviewing the existing site for user experience and visual design was the second step in the process. Although the site had a lot of valuable content, it was evident that the new site would need to be more focused on users' goals rather than the internal hierarchy and departments of the organization. There was also an obvious need to work towards more consistency in the style of the visuals and established branding guidelines.

ANALYTICS OF THE OLD SITE

Reviewing analytics reports of the existing site was a good starting point for the project. It gave us some insights into the users' behavior and their journeys on the site. The challenge was that although the organization has two distinct audiences, the members and the public, there was just one website that combined the content for both audiences.

USABILITY TESTING OF THE OLD SITE

Usability testing with a few simple tasks was conducted. The results validated the previous findings of the expert analysis, including confusion between content intended for the general public and content intended for doctors, as well as the navigation being not just confusing but frustrating. It also revealed additional problems, such as a lack of engagement due to the way the content was presented.

MOODBOARD

The Moodboard was an effective way to convey the intended overall emotional response for the site. The site required clarity and needed to evoke emotions of hope, tranquility, and trust for the general public. Although various tones of blues and greens were already part of the branding, they weren’t strategically manifested on the existing site.

CARD SORTING FOR INFORMATION ARCHITECTURE

Card sorting was extremely useful in figuring out the information architecture for the site. The Optimal Sorting app was used to assist with the process, and the card sorting was conducted with the end users to gain an understanding of their priorities.

WIREFRAMES

Coming up with task flows and wireframes for the new site was the next step in the process. The wireframes were extremely helpful for organizing the content and giving a good idea of the flow of the site to the stakeholders before getting into detailed designs. It also helped in clarifying what components were necessary to design and develop to accommodate the content needs.

UI COMPONENTS AND STYLE GUIDE

Establishing visual style, colors, icons, and components including navigation was one of the biggest parts of the project. The style was kept as neutral as possible to give the stage to the content. A style guide for all major components, colors, and fonts was established.

PAGE TEMPLATES

Page templates were created not just for the website but also for an online version of one of their flagship publications of the organization.

DETAILED DESIGN

• I created page templates and detailed designs for each major section of the site.
• Special attention was paid to the mobile designs, particularly the mobile navigation.
• Graphic designs and photography were created in collaboration with the marketing department’s graphic designers.

PROTOTYPE

• I created interactive prototypes of the site with Adobe XD in both desktop and mobile.
• Prototype made it easy for the team to share the progress with stakeholders and gave front-end developers the specifications they needed to start their work.

USABILITY TESTING

• The prototype underwent testing with end users through in-person usability testing, complemented by a series of interview questions.
• Primary focus of the testing was on the concept and information architecture.
• The testing process proved valuable in identifying issues related to the proposed navigation and taxonomy, and it provided valuable insights into the prioritization of content types: The designs were iterated based on the results obtained from the usability testing.

PERCEPTION OF OLD AND NEW

One of the interview questions was about how the usability testing participants perceived the old vs. new site. Before showing them the new designs, they were asked which image would best describe the current site. Most users selected the image of a thrift shop and a warehouse. After testing the prototype of the new site, they selected the image of an art gallery and a contemporary, clean cafe.

CONTENT MANAGEMENT SYSTEM (CMS)

Once the front-end code was done, the CMS modules were built by developers. A headless CMS (Contentful) was selected for implementing the new site. The headless option was by far the most flexible and future-proof option. It allows the same content to be used on multiple platforms, such as mobile apps.

GRAPHICS, PHOTOS AND CONTENT

The final step involved creating illustrations, graphics, and sourcing photos for the new site. The editorial team developed a new content strategy, audited the existing content, and executed the substantial task of migrating the content to the new site, marking the concluding phase of the site development process.

CHALLENGES AND WINS

• Ensuring that the designs were first and foremost optimized for the users instead of reflecting the internal structures and hierarchies was a challenge. Validating the design decisions with usability testing was the key to a successful outcome. It highlighted how important it is to get the perspective of the end users and utilize analytics in the design process.

• The biggest win was the positive reviews received from the users after the launch. The goal of improving the user experience was accomplished.
• Having an established design system made it easier to go forward with new iterations with a much more streamlined process.
• Another win was the headless CMS: The new system was well-liked by the editors for its ease of use and speed.