Challenge and Objectives

The major difficulty I encountered for this particular website was to be able to showcase all the information needed by the client in a manner in which the user could at the same time look at sample projects or deep dive into her academic production.
‍
Being a researcher and academic, the content of the website is mostly written with very few images, which presented an interesting  challenge as a designer to create a website that would be engaging to the user.
‍
Knowing all these information the objective of the website was to design it in a way that it allows users to quickly understand the type of work that Eugenia does, while at the same time allowing users to look into her academic production in more detail by showcasing different types of academic production from books, articles, to teaching subjects and supervised thesis documents.
‍
I believe that the end product allows for the users to have a quick understanding on the field and line of work of the client, and at the same time if they wish, study deeper the client’s academic production.

UX Strategy

Research

The first step taken was to research similar websites to show to the client and help her narrow what she was looking for.
After viewing a couple of other sites, me and the client decided on the basic site structure for the full version of the site. It was also decided that a first simpler version will be launched first and the full site will come with incremental approaches.

Sample site of Dr. Alex Burchmore
alexburchmore.com

Describing the user

User Protopersona

Click to see more

User types

Students | Potential master students
Universities | Researchers/ professors

User goals

For students and other researchers to learn more about her professional path and work as an academic in the field of architecture.
‍
Recruit potential students that are interested in being mentored through their thesis project being master or PhD.
‍
For universities and researchers interested in having Dr. Salomao as a speaker or to give courses/seminars to be able to contact her and look through her professional achievements.

Site Map

After going in depth to understand the goals of the project and the users it is aimed to serve, me and the client established a good site map for the site.

Wireframes & Prototypes

Based on the site map, I created the wireframes for the first 4 pages based on a responsive design approach. The wireframes take in consideration mobile, tablet and desktop.
‍
The selected pages for the first version of the site are the following:
‍
Home Page
‍
Selected Project: Book Page
‍
Publications Page
‍
About Page

Home Page low fidelity wireframes for desktop, tablet and mobile
Click to enlarge

Home Page low fidelity wireframes for desktop, tablet and mobile
Click to enlarge

Design & Style Guidelines

Color Palette

Blue was selected as the main color to provide a sense of trust combined with orange for confidence. Grays are used for text and other elements.
‍
A sans serif typography [Roboto] is used since it is best suited for digital platforms.

Typography

Logo Design

Development

After having the high-fidelity prototypes ready, the first step was to export all the assets and store them with good naming conventions in an organized folder. After that I started the coding process. First, I introduced all the information including text and images to an HTML file.
‍
Once I had that for all pages I went ahead and verified all the links were working properly between pages. Then, I moved ahead to start styling the website with CSS and adding JavaScript at the end for some more advanced features like the hamburger menu for mobile and lightboxes for some selected images. A W3C validator and linters were used to help keep the code clean and without errors.
‍
The final result came out pretty good and was reviewed by the client in order to move into the user test stage to make sure the site was working as intended.

Go to GitHub to have a closer look at the code!

Screenshot of Index.html (Home Page) code

User Testing

Based on the high-fidelity wireframes 5 people participated in a user test of the functionality and design of the website to ensure its maximum potential.
The test goals helped me confirm the user types and goals described in the beginning of the case study.

User test takeaways

All participants found the website well designed and easy to navigate. They were impressed to see an academic researcher’s site to be so clean and well organized. They were delighted to see all the information that they would need if they were looking to understand the academic production and trajectory of a researcher like Dr. Eugenia. They also liked that it was easy to find the contact information throughout the site.

Future Iterations

Consider adding a section to the home page with the website content for users to be able to see on first hand what they can look at

Clarify what type of project the client is showing as a selected project by adding a label

Add a button to “Download CV” at the top of the Bio page in case users want to find that quickly

Add a link to go back to home page at the end of each page for easy access

Consider “Contact” menu option for user to send email directly or keep as it is

Consider changing the images for the Hero Image at the Home Page and the Contact background.

Launching

After gathering insight on the usability and functions of the site and laying out the possible future iterations with the client the site was updated for its first launch. The first version of the site considers a simpler alternative to the full site that will come in the near future.
‍
Take a look at a quick animation of the site below or look at the site live!