UX-Based Homepage Re-design
Washington University School of Medicine needed to redesign their website in a way that it is geared toward the user.
This report includes thorough research and design to create a top notch user experience on the web. In this report, we will go through the following:
With any design project, thorough research is always required. We spoke to employees and directors at the School of Medicine to understand their needs and what they feel is needed for a successful re-design. We also used surveys to gain a better understanding of the users’ needs. These included prospective students, current students, prospective faculty/staff, and current faculty/staff. Finally, a competitor survey was also conducted by looking at the top 25 Medical schools.
We looked at the top 25 medical schools and created a spreadsheet to log the various features and content that we may want to include as a part of the new web experience at Washington University School of Medicine. Two separate surveys were done. The first looked at all of the information on each school’s homepage. These were separated into three categories – Hero content (or above-the-fold), middle content, and lower content. The second analysis consisted of a deeper exploration into their site as a whole, which included a full site map examining the content of each top level category.
Throughout the competitor analysis, we noticed some fairly interesting things. One of the things we focused on was how the schools handle “Latest News” and what priority this section was given on their homepage. On the Washington University School of Medicine site, the “Latest News” section was given high priority. Our contention was that it did not need to be so high up in the order on the site. A competitor analysis did not help a lot in solidifying this theory since most sites did have “Latest News” in their hero content. We would have to survey our users to determine if this was the right position for this section. The competitor analysis did help us see that, while it may not be the most important information for the user, the user has learned to expect to see “Latest News” in the middle to above-the-fold section of a school’s site.
Another area we sought to learn about was how often a school had a call-to-action in their hero image banner. The School of Medicine did not have a call-to-action anywhere in that hero section, and not only that, but because of the size of that image, the user would have to scroll down to find any definitive call-to-action. We noticed that most all sites that we looked at had some sort of a message followed by a link or button to take the user to that area on the site. We decided that this would probably be something we would like to see on the re-designed School of Medicine homepage.
Surveys to web users as well as prospective students were used to gain insight on the end-user. For web users, we used a service called Hot Jar. Hot Jar is an online web survey that will pop up to web users as they navigate your website. Survey questions were carefully determined through research and utilizing the results from our competitor analysis. We crafted the following questions which were added to the survey:
This survey would show up on the bottom right-hand corner on the School of Medicine site. The user had the opportunity to provide their feedback if they wished or hide the survey altogether. We were very conscientious over whether this would annoy the user, but knew that we needed to get some concrete data from our end-user. For the settings on this, we set it up so that it will only show up to the user one time in an effort to mitigate the risk of negatively impacting their web experience. From there, we would review how many responses we would receive and then decide if any further action was needed. Thankfully, we received a large amount of responses and were able to keep our settings as is so as to not obtrude on the user.
The survey provided tremendous insight that helped shape our understanding of the areas of importance for the homepage. The most helpful information was finding out from prospective students what they were most interested in learning about.
To gain better insight on prospective students, we worked with the Admissions group and analyzed survey data from prospective students who were accepted but chose not to join Washington University School of Medicine. This information recorded qualitative data about the student’s experience from visiting campus and what they wish they knew before coming.
Heat Maps were set up to track user behavior on the WUSM homepage. These maps recorded actions by users such as where the user clicked or hovered on the homepage. When retrieving the data, we were able to see a visual representation as well as numerical data to this behavior. This data allowed us to see what areas of our site attracted the most interest and what we need to focus on during the re-design process.
A user persona is a description of a fictional person, however their attributes and lifestyle match closely with a certain category of the end-user, in this case, a prospective student. We created a user persona from the survey data results. Most of the topics we covered for this person echoed the sentiments found when reviewing prospective student feedback. The persona gave us a mental image of the person we are designing for that helped to go back to when trying to understand the needs of the user.
The design phase consisted of taking our research findings and building out a content architecture and user-centric design. This also included doing a survey of the school’s current design and seeing where areas may be lacking.
One area that we noticed right away was the above-the-fold content. The header had a red gradient, which made the site feel dated and not part of a modern design. The banner image took up the entire screen, which could lead to a negative user experience. There was a lot of wasted real-estate as well as no call-to-action to drive the user to an area of the site they may want to go instantly. Instead that user would have to spend time searching for that specific section. The full height banner image also may mislead the user into thinking there might not be content below the image as well. Among others, these were specific areas that we wanted to address in the re-design.
Once the research phase ended, the design phase began. One thing that had to be decided upon was the various content that would need to be created for the homepage redesign. We looked at our survey results, as well as the information provided by directors and stakeholders, to determine the content that would work best for the user. These included:
Rough wireframes were put together to help get a feel for content and layout of the new homepage. We had a pretty good idea on the areas of content we wanted to include, but how it would flow, and what priority was still being determined. There was still a contention over how high up the “Latest News” section should go. While our competitor analysis showed other schools placing a top priority on “Latest News”, our user research showed that this was not something of great importance to the user. We mocked up multiple wireframes showing how the flow would look with “Latest News” displaying both above-the-fold and below-the-fold.
Adhering to a specific style for design was very important for not only consistency, but to keep the message brand aligned with Washington University. We used specific brand colors with red being the predominant shade. We alternated between the school’s traditional serif font (Libre Baskerville) and their more modern sans-serif font (Source Sans Pro). Photography was carefully selected while working with the school’s photographer and using subjects that displayed the school’s student body.
Design iterations turned into high fidelity mockups for review by stakeholders. Final Designs showed how the design should scale when on different devices and screen sizes.
We started with the header. We made quite a few changes to the header, but also wanted to keep the overall look and traditional feel of the university. First, we removed the color gradient, and replaced that with a white background. Next, we took the brand red color that signifies a Washington University website and made that the color on the top bar. We did this also to align better with the School of Medicine’s partner sites (sites.wustl.edu). Next, we shrunk the height of the banner to conserve real estate, and we added a message with a call-to-action on the screen-left side of the banner. This provided a more consistent approach to other websites we viewed and were more in tune with what the user would expect to see.
For the next section, we wanted something eye catching that contained a lot of information but without feeling cluttered and overwhelming to the user. We found that a simple infographic would help convey this message. For the topics we wanted to cover, we used our information from the research phase. This included telling the user we were a top 10 medical school, a school that graduates students with low debt, and a school that is wide and broad in research and clinical opportunities. Using the colors from our color palette, icons were created to symbolize each area we wanted to highlight and grab the user’s attention.
Through our interviews with stakeholders at the School of Medicine, we learned how important Diversity & Inclusion is to their school mission. This was an area that we needed to highlight as we learned there wasn’t much excitement about the approach being used on the current website. In this third section, we also set up a style structure for highlighting important areas on the site. For this we mixed the serif and sans-serif fonts for the heading, followed by a thick divider line in the color of the school’s brand primary color, followed by a description and a red outline button. This style is introduced in this section and seen throughout the rest of the page.
The “Latest News” section follows after “Diversity & Inclusion”. We pushed this down a bit from the current website in response to what our user’s viewed as a priority to them when accessing the School of Medicine Site.
The next section is closely related to its previous section, “Latest News”. This section is a flexible section intended for the content manager to swap out different videos and stories as they see fit. The intention for this section is to be used for special events such as Graduation, Match Day, or some other thematic event in which a video accompanies the story.
One of the things we learned from the prospective users’ responses in our online survey was the importance of student testimonials. Users wanted to hear first-hand how a student’s experience has been at the School of Medicine, so this section was created to highlight that. With the idea that this would be updated periodically, the content manager would have access to change the person and quote as they see fit. This page would link to the “Dis-orientation Guide” website, a site created by current students for new students at WashU.
The next section carries over from the current design, but with some minor tweaks. The current design of community leaders does not allow for the content manager to update these manually or highlight certain people if that person chooses to. This re-designed version is meant to be manually updated and allows for the content manager to add all of the pieces of information necessary to highlight a particular person’s accomplishments. This section is very focused on research accomplishments, something that reinforces the feedback from the users.
After a few sections with a lot of content and imagery, a design decision was made to allow some breathing room with negative space here. This helps the user feel more comfortable as they scroll through the website. A section to allow the user to “Explore Departments and Centers” was added as a secondary call-to-action further down the page from the main call-to-action “Explore Degrees and Programs”. This gives the user another opportunity to find one of the most important parts of the homepage – a gateway to explore the school’s offerings.
In the Discovery & Impact section, we again bring back the type style treatment initiated in the Diversity section. This section was designed as a result of feedback that was heard from stakeholders. Outlook Magazine is the school’s flagship magazine, however on the current site, there were no entry-points to find how to easily get to the online magazine. While the decision to include this on the homepage was fairly easy, our competitor analysis only further supported the idea that schools indeed highlight articles from their magazine on their homepage.
The final section deals with an issue we saw in response to our surveys. Among prospective students, there appears to be uncertainty over what it would be like to move to St. Louis. Since most prospective students will have to relocate to St. Louis, the school wanted to find a way to showcase the many great things St. Louis has to offer, and this last section was designed just for that purpose.
Mockups, assets, code, and notes were given to the developers for final production. In all, there were 10 screens mocked up to keep the design in-tact across multiple breakpoints. Each screen included notes for font sizes, margins, and changes in padding. This was used to help in the final coding stage.
A UI Kit consisting of fonts and their sizes, colors, icons, photography, padding, margins, and responsive elements was packaged and handed off to the developer in order to maintain consistency from the final approved mockups.
A lot must be taken into account when doing any type of re-design. While this was only a re-design of a homepage, it was not something that could be done lightly. Through research by talking with stakeholders, surveying users, analyzing dozens of competitor websites, and creating personas, we were able to get a solid grasp on the type of people we were designing for. After analyzing data, a content plan was designed, followed by the interface of the site. After final approval, the homepage was successfully launched in late 2018 on the School of Medicine site.
The next steps in this design process is to look at the design of the interior pages of the School of Medicine site. This will be the second stage as part of this design process and will allow us to create a more functional, cohesive, and consistent site.
One area we will be focusing on next was a direct result of the research done on competitor sites as well as the user surveys that we sent out. The users responded with a clear indication that they were heavily interested in the types of Research that goes on at Washington University School of Medicine. As a response to this, we will be building a faculty lab database to become part of the site.
For the homepage, as with any design or re-design, the design process is never finished. From here, we would like to explore usability testing for the homepage as well as additional surveys to make sure the content is still meeting the needs of the user, and that the design is not hindering that process.