In this project, I was assigned to a group of 2 other members to collaborate and work on redesigning the website for Back Bay Science Center. BBSC is a nonprofit organization that educates the public about the importance of habitat conservation for Newport Bay.
The Back Bay Science Center is a nonprofit organization located in Newport Bay (Newport Beach, California). Its main mission is to educate the public about the importance of habitat conservation for Newport Bay and inform the public about its organization.
The Back Bay Science Center‘s website has design issues, such as text readability, spacing, image usage, and color usage. This makes their users have a difficult time using the website.
As UX&UI designers, we want to redesign the website to fix these design issues and help our users have an enjoyable and interactive experience while aiding the organization’s mission, which is to inform the public about habitat conservation.
To find more information about the organization and its mission, our team decided to do a stakeholder interview. We were fortunate to get in contact with our stakeholder. Our stakeholder is in charge of the education department and designed the actual website. She gave us some great insight into the organization itself, its goals, and its users’ main motives when visiting the website.
We conducted usability testing on the actual website. We asked 5 users to see their overall thoughts on the website design and navigation.
During the test, we asked our users to imagine that they are marine biology students, looking for an internship at the Back Bay Science Center.
We also asked them to go to the visited page to find visiting information about the center.
These are the summary of the findings from users:
- Should use more images.
- Due to the bad color pick and contrast issue, text in this website was hard to read.
- Navigation bar design was not good- the text are too small to read.
- The color of the background blue was too dark.
- Visiting information is hard to find, especially the hours and location information.
Based on our usability testing results, we made an affinity diagram.
We found it easier to organize into the two tasks that we asked our users:
1. Internship page
2. Visit page
Meet our user Natalie, who we decided to base our website design. We wanted to keep her in mind throughout the entire design process.
Based on our stakeholder interview, we found out that the center was visited and used for education purposes, such as field trips and internships. As a team, we came up with our user persona, Natalie who is a marine biology student at UCI.
After creating our user persona, we expanded her wants and needs by using an empathy map. We focused on her goal of getting her dream internship. We learned as a team that we need to focus on our user personas’s needs and feelings when redesigning the site.
As a team, we constructed a problem statement. This helped us as a foundation of our project. We really wanted to help users when visiting site, but also help the Back Bay Science Center in their mission. So, we came up with our user insight statement based on our user persona and the organization insight statement for the science center.
Our newly redesigned website for the Back Bay Science Center serves to help users have a convenient and enjoyable experience when learningabout the center and finding information about visiting and internships offered. In addition, the BackBay Science Center wants to inform the public about their organization and create more publicengagement for habitat conservation. How might we improve the website so that users can easily findinformation about location, hours, and applicationaccess for internship opportunities.
Natalie Portside, a marine biology college student, needs to find an internship opportunity near her because she wants to pursue her career as a marine biologist. She needs an easy and convenient application process so she can apply for multiple opportunities in one sitting because she of her busy school schedule.
The Back Bay Science Center is a marine wildlife reserve that strives to promote habitat conservation and educating the public to conserve the Newport Bay. They need to inform the public about their mission and create more clear opportunities for public engagement through the use of their website.
When we were researching, we found out that the website had a very simple navigation flow. We charted a user flow to see what our user, Natalie would do to achieve her goal (visiting internship page and find visiting information).
This activity helped us map out our entire navigation of the website. Although the website’s navigation was simple, we wanted to make it more clear. For instance, there were so many ways to visit the site for different programs, we wanted it to differentiate and make it more clear.
Individually, we drew paper prototypes and used InVision. We all wanted to incorporate more images and the hero banner. Also, we wanted to include the main navigation on the actual web page. We had similar ideas of using circle frames. But, eventually we decided to keep our frames consistent and not used circle frames.
As a team, we discussed what kind of aesthetic we wanted to keep in mind for this design. We all agreed that we wanted it to be clean and professional. In addition, we wanted to keep the ocean blue theme. We chose lighter blue shades to make it more casual and playful. Also, we chose the font type - Oxygen. The name of the font fit with our science theme and it looked very clean on our design.
We implemented our style tile elements and we created a mid-fi prototype for our desktop verion and mobile version of the site.
Based on our mid-fi prototype, we conducted usability testing. We asked users to do 2 tasks, which were to visit:
1. Visit us page 2. Internship page.
Here are our findings:
- Spacing needs to be fixed-some spelling errors
- Fix the banner images
- Important Co-vid information banner need to be fixed
After our usability testing done our mid fidelity prototype, we used those findings and iterated our design for our final prototype. After iterating, these are the changes we made:
- Fixed spacing
- Fixed the important updates banner
We came up with a final prototype version 1 and did more user testing. We asked our users to do the same tasks and if about the overall look of our website.
We had a very positive response from our design and it really encouraged us to keep up the good work.
We fixed more of the issues that they brought up:
- Choose better images for the banner
- Fixed the navigation bar/ glitches with hover effect
- Add more interactive states for buttons
Looking back at our project, we really enjoyed this assignment. As a team, we worked very well together and had a great time collaborating. We are really proud of work as our team. Here are some future directions that we could have done:
- Add more interactive elements, such as adding some animation or video content.
- Break up internship page and add pagination, progress indicators.
