The Ethnographic Museum in Belgrade is one of the oldest museums in the Balkans and its main mission is presentation, revitalization, and development of crafts in Serbia. Along with over 200.000 collection items, the Museum owns one of the richest specialized libraries in the Balkans and publishes professional publications.
01
Customer
Challenges
The main objectives were to increase knowledge of the museum’s collections and activities while optimizing and facilitating online access to content and all important information regarding exhibitions, tickets and working hours.
Solution
The most common way to browse an event calendar is either through a list of events or through a monthly calendar. We decided to incorporate both and made a calendar that is easily accessible through a sticky button that upon click triggers the calendar in a modal dialog. We separated content into meaningful slots of time where every type of event has its color, thus making them visually separated.
0
Founded
0
Collections
0
Items in collections
02
Design process
Design thinking is a process for creative problem solving. It encourages us to focus on the people we’re creating for, which leads to better products, services, and internal processes. When we sit down to create a solution for a business need, the first question should always be – what’s the human need behind it?
Understanding the human needs involved:
- Re-framing and defining the problem
- Creating many ideas in ideation sessions
- Adopting a hands-on approach in prototyping
- Developing a prototype/solution to the problem
03
User Flow
This is a part where we visualize interfaces. We start by writing down the starting position and the user goal and map them out to see how the flow goes. We also make some rough models, so that entire flow appears easily accessible to all users. Below is the user flow for the events calendar.
04
Wireframes
Wireframes are a crucial step in any design process since the final wireframe should represent the main structure of any website or app. Just like a blueprint of a building, it describes details clearly and specifically.
Compared with a complete and detailed high fidelity wireframe, gathering feedback is much more important. Why? Because people pay more attention to software functionality, information architecture, user experience, user interaction flowchart, and its usability, rather than considering the aesthetic characteristics of these elements.
Design System
We follow the principle of atomic design when building design systems.
Especially having in mind that this approach performs well on the front-end as well.
Documentation
Basics
Naming rules
Writing principles
Animations
Layouts
...
Base
Grid
Spacings
Colors
Typography
...
Atoms
Buttons
Controls
Icons
Links
Ilustrations
...
Molecules
Fields
Dropdowns
Lists
Tables
Tabs
...
Organisms
Headers
Forms
Modals
Footers
...
Basing user interface on existing brand guidelines
Open Sans font family
Playfair Display font family
Primary colors
Shiraz
#ad0e2a
C0
M92
Y76
K 32
R 173
G 14
B 42
Tundora
#434343
C0
M0
Y0
K 74
R 67
G 67
B 67
Del Rio
#ac978f
C0
M12
Y17
K 33
R 172
G 151
B 143
Secondary colors
Wafer
#e3d3cd
C0
M7
Y10
K 11
R 227
G 211
B 205
Boulder
#7b7b7b
C0
M0
Y0
K 52
R 123
G 123
B 123
Keeping up with Tech Trends
HTML
A powerful tool that helps us display any document in a web browser.
Java Script
One of the core technologies of the World Wide Web that enables interactive web pages was crucial for this project.
SCSS
Sass is our go-to CSS extension language. We use it in every single project we do and find it irreplaceable.
Almighty Calendar
The calendar is a great and easy way to browse between months and for getting a quick overview of future events.
Sticky & always visible
In order to find the calendar, a user simply has to click on the red square sticky button which is always located on the right side, below the main navigation. On hover, button expands and shows the action text.
Modal calendar = Bingo!
Since in this phase of the project calendar is used only for showing events, we decided to make a calendar as a modal dialog. That way user stays on the same page and also has a great overview of all events in this modal calendar.
What’s on today’s program?
With very intuitive and clean calendar and event type color separations, user can easily see events and their durations.
By clicking on the day, all events for chosen day will be highlighted in the event list on the right side.
Enjoy our work
Have a sneak peek at some of our other projects and if you like what you see don’t be shy and get in touch! We would love to know more about you and your business.