top of page
A COMPREHENSIVE SITE FOR THE ECODESS RESEARCH PLATFORM
Summary
EcoDESS is a research platform involving multiple US and Ecuadorian universities conducting research in Borbón, Ecuador, and the surrounding Esmeraldas region since the 1990s. However, as they grow larger and expand their research, their old website no longer meets their needs for paper publication, education, and record-keeping. Thus, I created a website that better suits their needs using Figma and non-code platforms like Wix. I was also tasked with an aesthetic rebrand to give the team a fresh, modern feel. The website is currently in its final testing phase, so not every piece of information is finished, but the overarching design and information architecture is complete.
Practices
User Research, Web Design, Interaction Design, Prototyping, Graphic Design
Team
Janna Jacobson, Joseph Eisenberg
Role
Lead UX Designer, Lead Graphic Designer, Writer
Timeline
3 months
Tools
Figma, Illustrator, Photoshop, Wix
Preliminary Research
This was my first time creating a research website, so I conducted preliminary research through EcoDESS' lead investigator, Joseph Eisenberg from University of Michigan. He has lead the project for nearly 30 years, and provided a wealth of information on the pain-points from the old website, and the needs of the current research group. He is also facilitating the final phase of research before the website is officially published.
There were 4 main questions I had:
What main problems did researchers face on the old website?
Who is the audience for this new website?
What information is needed on the website and what is the order of importance?
What aesthetic features does the team feel best represents their research?
Old Site
Old Home Page
Has both Spanish & English on same page; Doesn't describe project summary; Doesn't have information on new projects Dengue, EcoMiD, or EcoZont; Main menu takes up a third of the width of page.
Old Area Page
Lacks information on actual people and culture; Isn't up-to-date on recent project locations.
Old Project Objectives
Information is too specific instead of summarizing goals concisely; Requires a lot of scrolling to see most information.
Old Field Activities Page
Has to scroll to see most information; Page feels dense and awkward.
Old Team Page
School is listed first instead of name and title.
Old Publications Page
Publications are not organized in any order; Cannot download or access any links to read publications.
Researcher Interviews
Key Questions & Answers
Q: What is the main goal of the website?
A: I'm hoping to be able to find key information on past and current projects. Just something easy and simple to show people or people on our team. Also uploading and finding publications. Last site was a nightmare for that. I don't think anyone knew how to add papers. We kind of just googled the papers when we needed to find them.
Q: Who is the main audience?
A: Probably just the team. We hire lots of new people constantly and they usually wanna know what we're about, and the website should be a quick way for them to find out. It's also just a nice way to look back on the work we've done.
Q: Are there any secondary audiences you're concerned about? Like outside of the team?
A: Not really. Maybe just as long as it's easy to understand in case people wanna ask us about it or if they're looking at the site for funding or if they might want to apply to join our team.
Q: What key features would you like to see?
A: Definitely the projects and publications. Something for the team.
Q: Is there anything important for the home page?
A: Yeah just as long as people can see all the projects and navigate to them from there. And summaries of each project.
A: Make it a little more personal than the other site. I think a gallery of photos would be cute too.
Mood Boards
1/5
I made several mood boards to show the research team to determine the design direction. They chose a couple key features they liked from a few of them that I then turned into a website draft on Figma.
Research Conclusions
4 main questions answered:
What main problems did researchers face on the old website?
Based on observation of the old website and team interviews, I found that the old website was unintuitive, dense, and papers were difficult to upload and find. Much of the information was out of date and too specific. Researchers wanted a way to quickly find all projects, project summaries, and papers, without any extra fluff.
Who is the audience for this new website?
Based on team interviews, the main audience is team members, especially new hires who need a quick rundown of the research and research area. The secondary audience is potential hires.
What information is needed on the website and what is the order of importance?
Based on observation of the old website and team interviews, the main information needed is some info on the area and people being studied, the project summaries, and papers. The most important information (projects and summaries) will be displayed on the main page with easy navigation to more details. Papers will also be simple to find and sift through. Some researchers also wanted to add some more personality to the site with photo galleries.
What aesthetic features does the team feel best represents their research?
After having team members look through mood boards, we determined that the new site should be clean and modern with neutral tones to reflect the environment in which the study takes place.
Problem Statement:
Researchers using the old website struggled to efficiently locate, upload, and understand research materials due to an unintuitive, text-heavy, and outdated interface. The website lacked clear organization and prioritization of content, making it difficult for both current team members and new hires to quickly grasp key projects, summaries, and publications.​
​The redesign must create a clean, modern, and easy-to-navigate platform that emphasizes accessibility and clarity. The most important content—project summaries—should be immediately visible, with intuitive pathways to deeper information. The new site should also incorporate subtle personality through visual elements such as photo galleries, while maintaining a professional, neutral aesthetic that reflects the research environment.​
​Goal: To design a modern, minimal, and information-focused website that enables researchers and new team members to quickly access up-to-date project information, explore relevant papers, and gain a clear understanding of the research landscape—without unnecessary clutter or confusion.
Ideation
Lo-fi Figma Drafts
Home Page
Left: This version displays Phase 1 and Phase 2 projects sequentially, and the sizing of each section implies their equal importance. But it's too much scrolling to see all the projects, so people might not even care to check out the later ones.
Right: This version contains an overall project summary for all phases/projects in the hero section, with Phase 1 and 2 projects one scroll down. The projects in both phases are given equal importance and are displayed together. This was the preferred version.
Left: This version displays the initial Phase 1 EcoDESS project in the hero section with the other Phase 2 projects one scroll below. It prioritizes the Phase 1 project while still making the Phase 2 projects accessible. However, after examining this option, the researchers agreed that both Phase 1 & Phase 2 projects should be equally important.
Project Page
I created two versions of the main project page; one where users could just see all information on one page, and another where the objectives, field activities, ares, etc. were on different page. The final prototype is more similar to the far left option.
Mid-fi Figma Drafts
Right: For the mid-fi it was important that the home page show Phase 1 & 2 fairly equally so that users would know they were both essential. However, I ran into some difficulties because Phase 1 only has one sub-project, while Phase 2 has three sub-projects. Furthermore, the research group is called EcoDESS, and Phase 1 is also called EcoDESS. While I consulted with the research team about whether we could rename Phase 1 so that the website would be less confusing, they all felt that EcoDESS needed to remain as the name for both the sub-project and the overarching platform.
Far Right: The project pages all mimic this format, though the Project Objectives and Field Activities were eventually moved next to each other. I had each field activity button lead to a different page in this version, but later discovered that each activity didn't have enough information to fill an entire page. Thus, I just created a slide-show in the hi-fi version that contained the 1-2 sentences needed for each activity.
Hi-fi Draft
What I Learned
All the websites I've designed for others and myself have been extremely diverse in subject, function, and purpose. This was the first research website I designed, so I learned a lot about the specific issues faced by research teams, and the unique solutions needed to combat these pain points. For example, the layout was particularly challenging, as the separation of phases and sub-projects created a dilemma for presenting information in a way that was both visually pleasing and hierarchically accurate. This project also had me considering different ethical concerns than the typical e-commerce or portfolio sites I've designed in the past. Because EcoDESS is focused on studying a particularly rural region of Ecuador that has faced a long history of racism, exploitation, cultural erasure, and political unrest, I wanted to highlight the actual people and that the research team worked with. After bringing up my concerns to the project lead, Joe Eisenberg, he tasked me with researching the region's history through both a cultural lens, which resulted in the final "Location History" page.
On a broader scale, I discovered that the less space/words needed to convey ideas, the better. My initial designs for the site were quite convoluted, with different pages for each field activity, separations between the different types of objectives, and extra pages just to explain Phase 1 and Phase 2. However, the ultimate result consolidated these pieces into just the home page and project pages. The home page briefly explains Phase 1 and 2, and the project pages also contain brief descriptions of the field activities and objectives, eliminating the need for different pages that will take time to click on, load, and navigate away from. Sometimes less is more, which is a lesson I've continuously been shown throughout my UX work, and especially with the EcoDESS project.
bottom of page