Rethinking a modern interface design of website for Botanical Garden and Botanical Museum Berlin



Project Summary


During the learning independently process of the UI and UX design, refreshing the BGBM website was my first self-initiated project in order for me to perform a systematic exploration of the workflow.

(The logo, contents and imformation of website and photos in this project, provided by Botanical Garden and Botanical Museum Berlin)

Software

  • Adobe Photoshop
  • Adobe Illustrator
  • Figma
  • Notion

Role

UX research & UI design

Deliverables

  • User Interview & Usability Testing
  • Sketches
  • Wireframes & Mockups
  • Hi-Fi Prototype 

Year

2019



About Botanical Garden and Botanical Museum Berlin


The Botanic Garden and Botanical Museum Berlin is a central unit of the Freie Universität Berlin. With our research and development projects we contribute to national and international programmes on biodiversity and at the same time to academic research and teaching.

The Botanic Garden Berlin is fantastic place where citizens and visitors from all over the world can recreate and experience plant life. We present the Earth’s plant diversity in a gorgeous and artfully designed landscape.

In following paragraphs, I’ll use the abbreviation of Botanic Garden and Botanical Museum Berlin, the BGBM.



Refresh Website - Evaluation and Competitor Analysis


Competitor Analysis

I used this method to compare how other museums designed their websites and what functionality they use and the layout they had chosen to present.


Persona



Usability Interview and Testing — Current Site


I collected data on the challenges and opportunities of the current BGBM website which involved usability testing, navigation elements, page flow and functionality.
I invited four users to perform tasks and fill up the survey, based on different user scenarios.  Through my interviews, I recorded and measured the interaction time of each task, surveyed them, then transcribed the feedback they shared.

  1. An unaware user, not familiar with the BGBM facility, location and ticket price

  2. A teacher seeking teaching material who is planning a school trip in the BGBM

  3. A family seeking to spend their family day with a baby and a 3 year old boy in the BGBM

Key finding

  1. The interface design of website is old-fashioned

  2. The structure of the website makes it hard to find the information

  3. When they use it on a mobile device, the lack of mobile version of the website means users have to pinch open the page to click the bottom or see information on the website.

  4. There are two logos, one is FU University and the other one is BGBM one. Their position is against using intuition.

  5. Users would like to buy tickets online, but there’s no certain function




Challenge

Pain Points

  • It's not a responsive web design

  • Lack of online ticket booking service

  • Lack of search function

  • Unclear logo position at navigation

  • Complex hierarchy and orientation make user feel confused during browsing

User Goals

  • Orientation navigation

  • Improve the interface design of website

  • Streamline information architecture

  • Create a responsive design friendly for all devices

  • Online ticket booking system

  • Add the search function to the website to find information more easily

  • Add the search event/exhibition function to find the activities more easily



Design Principles


  • Usability - Easy to use

  • Orientation - Easy to understand

  • Responsive Web Design (RWD) - Adopt to different devices



Information Architecture


To reorganise the IA of website, also the information structure for users on each page, I was trying to arrange it in a proper navigational manner to create a strong navigational structure for the website.


Wireframe


Keeping all these things in mind, I started making the sketches for the layout of the website, and created medium fidelity wireframes in Figma.


Design System


I aimed to keep the original logo design of the website, adding a colour palette to match the concept and style of the project.


Desk Design Proposal


Compared to the previous design, the overall look of the UI is modernised. I used button and card components as the proposal. I also further developed a few new functions for it to provide a better user experience. 

There are major changes

  • Refreshed the website design.

  • Created a search function, so that the user can search all the information of the website.

  • Included a new section - ticket booking system.

  • Adjusted the original IA to make it more clear for classification.

  • Added a filter control for event searching

Prototype

  The BGBM Website   
(Click the button, it will link to Figma online prototype)


Mobile Design Proposal


It’s similar to the desktop design, and an improvement compared to the old design of the website, that I developed a mobile version for the website.

Prototype

  The BGBM Website - Mobile Version  
(Click the button, it will link to Figma online prototype)