Insecta Exhibition & Informative Website
INSERA
Project Type
School Project
Teamwork: Bion Luchase (me), Han Huynh, Ha Khanh
1 and a haft months (March to May 2022)
Tools
Figma
Adobe Photoshop
Adobe After Effect
My Role
Creative Concept / Visual / Art Direction
UI Designer
Deliverables
High-fidelity prototype
Mobile app / Landing page mockups
Design system for project
Background Story
I have been inspired by the beauty and diverse life of insects. However, I have noticed that existing information about insects often tends to be technical and inaccessible to beginners. Furthermore, I wonder where future generations will find information about extinct insect species (similar to how we study dinosaurs from past eras).
This is why my team have decided to create a website that not only filters basic information about insects but also preserves and safeguards their beauty.
In particular, I aim to incorporate an online exhibition feature on the website to provide users with an immersive experience through anecdotal stories and urban legends about insects. This project is an exciting combination of culture, science, and art that I have collaborated on with my teammates.
Process
EMPATHIZE
-
research
-
competitive analyst
-
user interview
DEFINE
-
persona
-
project scope
IDEATE
-
persona
-
product structure
-
brainstorm
PROTOTYPE
-
wireframe
-
design
-
mock up
Empathize
Mindmap, Brainstorm Process
Research
After we consider many problems around, we decide to research deeply on a science subject. We choose insects and keep moving. Then, we realized that there is not much a web or app about insects that totally satisfied our needs, so we created our own site. The main theme we hold on is: “Imagine that there will be the day, the day that insects no longer exist on earth, just like dinosaurs. There will be no butterflies in spring, no more cicadas sound in summer...”
Empathize Map
Competitive Analysis
Due to our target audience for the website being young people (aged 15-25), I have noticed several limitations in existing insect information websites:
-
The information provided is too technical and lacks visual illustrations for each specific detail, making it difficult for researchers to remember.
-
There is a lack of interactivity between users and the website, limiting user engagement and emotional connection.
-
The interface design is complex and may pose difficulties for users.
However, we recognize the scientific approach and taxonomy used by these websites in organizing information and species, which is something we can learn from and incorporate into our project.
User Interview
We did a real-life interview with 8 participants from all walks of life, ages 19 to 22. All questions were open-ended to encourage participants to think hard and share more details.
Define
The discovery phase allowed us to define development goals, review similar insect sites, understand the market and project vision, analyze needs, behaviors and pain points.
Target
Audience
For this project, the target user group consists of individuals who have a passion for, and a desire to learn and explore insects. They are young people aged between 15 and 25, with medium to high income and fragmented time.
The target users actively seek to acquire knowledge and inspiration from insects within a limited but efficient timeframe.
Persona
n
Problems
-
How can we engage users with the scientific information about insects?
-
How information can be easily remembered for beginners?
Ideate
Site Map
The name
“INSERA”
Key Visual
-
Image of insect cocoon.
-
An outer shell, containing beautiful things inside.
-
It is also a protective layer of the essence that insects bring.
Prototype
Wireframe
COLOR PALETTE
The memory core is in the cocoon
The round button represents the core, and is also the power button. When the core runs up the pipe, the INSERA world will open...
Towards a quiet space, feeling deep but no less modern and luxurious. Create a space containing memories that are quiet and unique.
BRAND INDENTITY
TYPOGRAPHY
Design Overview
Design Solution
To make the information easy to understand and remember, on the homepage of the Catalogue section, I divided it into different main categories. When users click on these main categories, the website will display the specific insect species within those categories.
Additionally, for easier information search, we have developed a filtering feature that allows users to find the specific insect they are looking for.
The filters help them identify the insect species group and also provide easy access to related information on similar species within the group.
INSECT INFORMATION
After selecting a specific insect for information lookup, we will provide basic descriptions and accompanying images.
In addition, for those who want to delve deeper into the subject, we will provide additional detailed information in the right-hand toolbar.
At the end of our information page, we will provide additional in-depth resources on the specific insect the user is reading about. We will also mention related species for users to explore further.
EXHIBITION
The exhibition is the highlight for me, as it brings a captivating storytelling element to the website, making it more engaging for users. As an example, I have created an exhibition called "The Night Watcher", which tells the characteristics and attributes of the nocturnal butterfly species.
The exhibition section is typically divided into 4 main scenes: introduction, basic information, stories, and concepts associated with each insect species.
The exhibition feature also allows users to interact with the website as if they are communicating with those insect species. Additionally, this interaction enhances the overall engagement and adds an element of fun to the user experience.
In addition, the latest exhibitions will be featured at the top of the website's home page.
Exhibition page
Mockups
-
To provide a visual representation of how the design appears on different technological devices, I have created a variety of mockups. These include interfaces for desktop computers as well as mobile devices.
-
If you would like to explore more of the design aspects of this project, please visit my Behance.
-
Additionally, we have prepared a comprehensive and detailed video simulation showcasing the functionality of this website. You can watch full demo video on YouTube.
-
Read our research process here.
My takeaways
-
This is my first UI/UX project, and it has taught me a lot. I have gained skills in using Figma, creating concepts, and developing a user research mindset. Coming from a background in fine arts and creativity, UI/UX has helped me understand the importance of providing design-driven solutions. I truly love this project and my team. I am grateful for the trust my teammates placed in me to take on the role of building and developing the visual and brand guidelines for the website.
-
This project has ignited a spark in me, guiding me towards becoming a product designer.
Thank you for scrolling!
If you have an idea or project you want to discuss, feel free to contact me ~