A Responsive Redesign of the Brown Fellowships Website
Overview:

As a student with big ambitions but not a lot of money to accomplish them, Fellowships have always interested me. Getting paid for an academic or moral pursuit? It can not get better than that. However, as I started exploring how I could get involved with certain Fellowships, I was greeted with a page straight out of the early 2010s. I got past the optics of the page and started to regularly use the webpage. However, I soon realized that I was finding myself asking, "wait, where do I go for office hours?" or "how do I go back to this page". When I found myself asking these questions, I realized that there was a usability problem and serious improvements needed to be made to the website so other users don't have the same confusion as I did. My own experience is where my inspiration for redesigning the Brown Fellowship website stemmed from. Come along the journey of how I did such that!

Original Page:
Image of the original Brown Fellowship web-page Image of the original Brown Fellowship web-page


Above is the original Brown Fellowships webpage. Let's explore some of the usability features (or lack of) that I and other users may face when using this webpage and how we can improve upon it.

Usability Evaluation:

Let’s run through the usability of the fellowship website. Always important to remember that this could be the difference between someone applying for a fellowship versus someone being dissatisfied with the prospect of applying! We will analyze three main factors: learnability, memorability, and efficiency. We will do this with the help of the 10 Usability Heuristics. Here is a link for more information on these Heuristics(10 Usability Heuristics for User Interface Design).

Scroll through the images to see how we incorporate and or improve the usability concepts in our low-fidelity prototypes.

What the website does well:
  • Match between the system and the real world: the prose throughout the website is welcoming to new users and conversational which ultimately helps with the learnability of the website as users are able to clearly read and feel welcomed.
    • Image of the original website with the written prose circled red.
    Image of low-fidel highlighting the prose.
    1 2
    What the website does NOT do well:
  • A lack of aesthetic and minimalist design: there are two big blocks of text on the home page that compete with relevant units of information and diminish the visibility of important information. Not only does this hinder learnability but this also negatively affects returning users' memorability of the website as the relevant information they once saw and engaged with is only viewable after having to dig around the website.
  • Lack of easily viewable help or documentation for new users. This hinders learnability of the website.
    • Image of the original website with the usability concerns highlighted.
    Image of low-fidel highlighting the addition of help button and white space.
    1 2
  • Recognition rather than recall: the website does not do a good job of making objects, actions, and options visible when entering the home page. For example, the vertical orientation of the nav bar and calendar makes it such that the user may miss out on helpful pages because it gets cut out which impedes learnability, memorability, and efficiency. Additionally, having two different competing nav bars creates conflict about which navbar to use amongst users impeding all three factors again.
  • Flexibility and Efficiency of Use: the website starts to accomplish this by putting the calendar and office hours link on the first home page such that users who already know what fellowships are will have quick access to important information. However, the design of this is not responsive and has light text that WAVE has flagged as an accessibility issue. Additionally, something that I had trouble doing was memorizing where the link to schedule office hours was located; this was because the blocks of text were pushing this valuable information to the bottom of the page.
    • Image of the original website with the usability concerns highlighted
    Image of low-fidel highlighting the addition of one nav bar and office hours.
    1 2
    A note about Accessibility:
    The original website was run through WAVE accessibility tool. A summary of the finding is listed below:
    • Certain links contain no text making it difficult for people using screen readers to use the webpage
    • Alt tags are present :)
    • There are extremely small texts located throughout the webpage. This makes it hard for people who have vision problems to use our website.
    • The calendar has low contrast making it difficult for people who have vision problems to use our website.

    Below are the three responsive low-fidel prototypes.

    The Product:
    Low-Fidelity Prototypes:
    Image of the computer based low-fidel prototype.
    Image of the ipad based low-fidel prototype.
    Image of the iphone based low-fidel prototype.
    1 2 3
    Visual Design Style Guide:
    Image of Visual Design Style Guide


    My inspiration for the style guide was using some of the fundamental palettes of the university. I also wanted to incorporate a minimalist design thus there are very few moving parts and simple font. I have also highlighted the user's interactions when hovering over the navbar and buttons which mimic the Brown University home page.

    High-Fidelity Prototypes:
    How we will build:
    Image of Visual Design Style Guide
    Image of Visual Design Style Guide
    Website Demo and Link:
    Image of Visual Design Style Guide


    Above is a demo of my website highlighting the features and responsiveness of the design. Here is the link to the website: Brown Fellowships Redesign. I hope you enjoy your time there!

    All in all:

    I hope you enjoyed coming along on this redesign journey with me today. This journey has been an incredibly fulfilling one for me. Fundamentally, I have learned that the usability of your websites -quite frankly products as a whole- is crucial. No amount of prestige, power, or influence will win your customers over if they can't actually use the site or product.