project request

project:

MasMas

Design of an intra-corporate application intended for creative employees to collect and exchange knowledge and inspiration. My main task was the UI project, which was based on UX sketches provided by the client. In addition to the graphic design of the interface, my task was also to organize and improve the information architecture, user paths and other UX elements.

client:
BrandAide
roles:
PaweĊ‚ Olszak:
UI/UX design
Olga Gutierrez de la Roza:
UX design
2022

The main challenge in the UI project was to find a balance between the formal, professional character and attractiveness of the content provided, and to maintain a sense of inspiration and encouragement to creativity. After analyzing a few initial concepts with the client, I chose the direction of designing an interface in the style of an electronic notebook, which users will reach while working. For this purpose, I chose a color palette built of a few subtle but mature shades (as accents indicating the type of content) and the background in the color of the paper. The typography design is based on a mild sans-serif Lato font in paragraphs and smaller texts, and on distinctive headlines with an editorial, journalistic-style font - Cabinet Grotesk.
The compositions of individual screens are based on an order built by an appropriate arrangement of elements, an appropriate amount of the white space and a hierarchy of shades of inscriptions, icons, lines and fillings - from beige gray to slightly weakened black.

main tab

The main tab of the app is an article feed that can be filtered by categories from the list at the top. The covers of the articles come in different sizes and have status bars with the date and the number of likes, which indicate the subject category with their color.

The most important task was to ensure the appropriate convenience of reading and distinguishing types of content, as well as to encourage to make an interaction, such as sharing, commenting or searching for similar content.

article

The delivered UX design put emphasis on the exchange of information between users. There is therefore a comment section and an open forum at the end of each article. I solved the combination of these two functionalities by dividing the sections into two tabs - questions and comments.

discussion

It includes access to the user's personal elements, such as notifications, settings, followed accounts, and above all to own and shared libraries.

user tab

This is where users save content from elsewhere in the app as bookmarks and inspiration. You can also add your own files, notes, folders to the library. The job for me was to organize so many types of content. I divided it into tabs in the form of a carousel. I introduced sorting by collapsible sections with dates and most of all distinguished graphically the types of elements - in a delicate way to keep their language consistent and not to introduce chaos.

library

The next tab contains group chats between employees. I distinguished the rooms with color accents and icons. I designed the process of creating a new group to be short and legible and designed the look of the chat in the form of chronological vertical axes, taking care of readability and distinguishing between the types of messages and attachments.

groups

In the main screen of this tab, I have introduced sections with popular questions and categories in addition to the links to other topics. Each topic is divided into two tabs - with problems solved and unresolved. The button that allows you to add your own question to the topic is always visible.

open forums

The functionality of the delivered UX project was very extensive. This project shows how important the application UI layer is, which properly designed can organize the information architecture and present it to the user in a clear and attractive way.

learn more

more detailed case study on Behance

MasMas on Behance

keep exploring