Banner 2.png

Google

Marker

002

Marker is a digital experience for students and the facility management to simplify the reporting, filing and management process of damages on a campus

Time: 05 / 2020

Work: Product Design & Strategy

Project Type: Challenge

Challenge & Intro

"Design an experience that allows students to report building or equipment issues on campus. Consider the process of those filing the report and of those receiving and taking action on the issues. (Timeline: 6 Days)"

Marker is a digital experience for students and the facility management to simplify the reporting, filing and management process of damages and equipment issues on the campus through an inclusive cross-platform system.

Collage.png

The Product

The report receiving experience will be an internal system displayed on a tablet device for easy access to organize incoming requests and create a communicative environment to enhance the

problem-solving process in an inclusive approach. All reports from students are accessible through the second system dedicated to the facility management.

Product.png

Sketches

To start the design process I spent a good amout of time sketching rough ideas and concepts. This creative process enables me to come up with different layouts and design ideas. 

During my initial sketches, I already tried to map out possible user flows. Placing screens in a logical order helped me to get a clear vision of how the user could interact with the final product.

Wireframes.png

Wireframes

In this step, I refined my early concepts and added basic information to get a better understanding of each screen and its features. For me wireframing is a vital communication tool especially in collaboration

with other teams. At this stage, I laid out content while taking user needs and journeys into account. With a clear foundation and scope of functionalities, I created wireframes for every screen and section of the product.

Sketches.png

Userflow

Mapping out the user flow helped me to layout the whole structure of the final product. During this step breaking

down the product to a 2D layer helped me to find potential bottlenecks and sort out flaws in the flow. 

Userflows.png

Components

During the design process a component library with all assets, buttons, color styles and UI elements was critical to keep the design consistent. With the design system it was critical to match the feel, style and 

experience of a google product. Throughout the system Google colors, typography as well as Google's icon library was used to build a product that could fit in an existing ecosystem.

Components.png

Marker

Google Marker enables students to Log In with their student email and password. With this filter the student accounts as well as the reports are connected upfront the correct way. 

The Google Marker logo incorporates the companies core colors as well as trying to visualize the name "Marker" with a simple "M" letter Brand Logo.

Group 325.png

Categories

Users can switch between two sections, the report section, and the notifications. The position of the icons are logically aligned with the different stages a
user is experiencing.

Filing a report and moving on into the notifications is representing the next stage through the navigation.
A user can quickly scan the categories using the search bar at the top to save time.

Group 326.png

Notifications

Different kinds of notifications provide the user with a feeling of control by giving valuable information about whether the report got accepted, a worker is approaching the location, or if there is more 

information needed. The different notifications are aligned by icons supporting the understanding between the user and the result of the request.

Group 327.png

Filing a report

The process of filing a report consists of 4 screens in which the user has to insert the information. The header holds a that indicates the filing stages a user has to go through to complete a filing report.

In the first screen, the essential information consists of the building name, floor level, and the room number. To enhance communication with facility management, users can provide their contact information.

Report.png

Sketches

To proceed with the second system, for the management department, the first phase consisted of sketches to iterate ideation and design concepts. Sketching on a sheet in landscape format was very

supportive by providing me a good understanding of the new layout. Sketches helped me to get a feel for the new layout and allocate features based on previous research.

Dash_Sekteches.png

Wireframes

Taking in formation architecture into account , designing a product for a facility management department was a challenging task. Wire frames helped me to create clarity and structure ensuring an

delightful and easy to use product. Based on the research I was able to layout the in formation in a
logical and clear system.

Wireframes-1.png

Final Design

After building a clear strategy 
around the layout and information architecture I was able to move on from the wireframes to the next stage: The final design of 
the interface.

-

delightful and easy to use product. Based on the research I was able to layout the in formation in a
logical and clear system.

Collage-1.png

Reports

Within the "Reports" section of the application, the user can find recent and unprocessed reports of students. The interface consists of a menu on the left to browse between the different sections of the

system. The interface is divided into a scrollable timeline on the left and a Geographic-view on the right. The unprocessed reports on the left include basic information to categorize the problem.

Reports.png

Get Insight

Users get a quick overview of the building name, the floor level as well as the room number. For further information a description, as well as a picture of the incident, are available.

The report receiving experience will be an internal system displayed on a tablet device for easy access to organize incoming requests and create a communicative environment with the students.

Detail Report.png

Overview

The overview section offers the user a clear insight of all accepted tasks. The status of every entry showcases the current report stage, pending or completed. The top right corner of each report displays

the duration since the report got accepted so the management can act accordingly. Each report has a reference number as well as the category and all the basic information mentioned earlier.

Open tickets.png

Staff

On the campus staff section, users can have a quick review of all available staff members, their category, responsibilities as well as their location. For every worker, a status shows their current availability.

Above the entries, users can filter through categories as well as locations to quickly get access to the right staff member. For each staff member, a “Give Task” CTA on the right enables the user to arrange duties.

Staff.png

Next 

Project

CoinZoom, with customers in 185 countries, is the next generation digital asset exchange that is providing superb trade quality, customer-focused tools, and technology that help customers become successful traders.

003 - Product Design & UX Research

CoinZoom

Coinzoom.png