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 information 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.
- An unaware user, not familiar with the BGBM facility, location and ticket price
- A teacher seeking teaching material who is planning a school trip in the BGBM
- A family seeking to spend their family day with a baby and a 3-year-old boy in the BGBM
Key finding
- The interface design of the website is old-fashioned
- The structure of the website makes it hard to find the information
- When they use it on a mobile device, the lack of a mobile version of the website means users have to pinch open the page to click the bottom or see information on the website.
- There are two logos, one is FU University and the other one is BGBM one. Their position is against using intuition.
- Users would like to buy tickets online, but there’s no certain function
( Old version design of website below)
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 users feel confused during browsing
User Goals
- Orientation navigation
- Improve the interface design of the website
- Streamline information architecture
- Create a responsive design-friendly for all devices
- The 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 the 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 on 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)
