As part of our Human-Centered Design Experience Studio we worked with Neuro Vigor, a pharmaceutical startup in the Purdue Research Foundation.

Team Members: Cameron Grundy, Kaela Disney, Nick Gould

Needs:

  • Modern Design
  • Appeal to collaborators & investors
  • Hassle-free way to manage the site & update content

Site not yet launched

The Research

Neuro Vigor needed to reach collaborators. Focusing on that audience we started researching what collaborators needed and wanted to see.

  • > Surveyed needs/wants of the target audience

    Lead: Kaela & Nick

    Objective: Find out what our audience needs. By knowing what they need, we can design to fit the needs of our audience, and hopefully include their wants as well.

  • > Completed a competitive analysis

    Lead: Nick

    Objective: Analyze the competition of Neuro Vigor. Through familiarizing ourselves with the competition's designs and content, we can determine industry standards, find successful approaches, and learn what problems others have come across.

  • > Conducted a heuristic analysis

    Lead: Kaela

    Analyze the pain points of Neuro Vigor's current site, and use them to learn what to avoid in the new design.

Heuristic Evaluation
Sketches & Wireframes

The Design

We worked through an iterative design phase. The design we made was one that constantly evolved as we received feedback and developed the site.

  • > Style Guide & Mood Board

    Lead: Nick & Cameron

    Neuro Vigor did not have a pre-existing style guide or mood board, so we made one for them before we started on our designs. Having a definitive style to follow was something we needed to set before we could start designing.

  • > The Colors

    Lead: Nick & Kaela

    We chose to highlight the colors of Neuro Vigor’s logo throughout the site. Highlighting their distinctive blue and gray pulled the design together and gave it a sense of unity. Blue also promotes authenticity and trustworthiness, traits important for a pharmaceutical start-up.

  • > The Fonts

    Lead: Nick

    Neuro Vigor uses the font Kelson Sans in their logo. We chose to use this font for headings, and Myriad Pro for body text.

  • > Sketches

    Lead: Full team

    Separately, we all sketched our own ideas for the new design of Neuro Vigor’s website. Afterwards, we came together, compared sketches, and determined what designs not only looked best, but also worked best for our audience.

  • > Wireframes

    Lead: Kaela & Nick

    More hi-fi than our sketches, our wireframes combined the designs we liked from our sketches into a more concrete design that we could get feedback on from sponsor from Neuro Vigor

  • > Mockups

    Lead: Kaela & Nick

    Our mockups then further refined the wireframes by adding color and pictures instead of placeholders.

  • > Prototyping

    Lead: Kaela

    The final step of our design phase, we created an interactive prototype of the complete site using Adobe XD. We used this prototype to conduct usability testing with our target audience, which led to minor information architecture changes in our design.

The Development

Development was the part of the design I contributed the most in. Being familiar with WordPress, I quickly became the internal expert on the subject.

  • > WordPress

    Lead: Nick

    Neuro Vigor was already using WordPress for their current site. In order to keep the new site as familiar as possible when maintaining it, we decided to develop the new site as a WordPress theme.

  • > Advanced Custom Fields

    Lead: Nick

    In order to customize the WordPress editing screen for pages we used Advanced Custom Fields. This allowed us to simplify and streamline the editing process for each page template.

  • > Bootstrap

    Lead: Nick

    While not a requirement from Neuro Vigor, we decided to make the site responsive using Bootstrap. Using this, we could adapt the site for any screen size.

Mockups