This is a limited version of my portfolio. Please view on laptop or desktop computers for a full experience

Almir Atlic | UX/UI and Visual Designer

Introduction

Welcome to my online portfolio.

These are some of my favourite works. However, I have included some older project case studies, such as the Jaguar app and the Viva Hotel booking site. I think it is useful to see the progress I made throughout the years. Most of presented works are only outlines of a whole process. Normally, I would expand on each case study during an interview.

Contact Me

Want to talk? Please send an invite on Zoom, MS Teams or Google Meet to info@atlic.co.uk or check my LinkedIn profile.

© Copyright 2021, Almir Atlic, All Rights Reserved

Bosch Automotive | Grade X: Vehicle Diagnostic Software

Introduction

Grade X, a Bosch vehicle diagnostic tool is a browser-based software used by a technician to check the status of a vehicle and detect possible problems.

Mission

Improving technicians experience by creating easy navigate interface, pleasant and intuitive design and efficient organisation of a large a number of additional complex tools. The software should reflect Bosch’s high standards of creating tools to help technicians with their day-to-day work.

Business Objectives

During the meeting with senior stakeholders, the following business objectives were established:

  • Expanding the current market
  • Getting positive reviews by worldwide serving stations
  • Reflect the companies branding
  • Build the product to reflect Bosch high-quality standards

User Goals

We interviewed various technicians, showroom managers, stakehoders on what ideal product should reflect:

  • Easy to use
  • Easy to learn and intuitive
  • Easy for the older generation of technicians who are not computer savvy to migrate to the new platform
  • Ability to configure the application to exclude (make less visible) tools not used

Original Vehicle Diagnostic Software

Evaluation of existing software

I evaluated the original software and found a number of problems. The main issues were inconsistency, hectic and confusing layout and broken links.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

Original Software: Usability Test, Effectiveness

The first phase of the test was carried out on experienced technicians and the second on the younger generation of inexperienced technicians and newcomers. We tested if the participants can complete a particular task.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

Original Software: Usability Test, Efficiency

We also observed how quickly participants can complete tasks.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

User report: The main findings

Research conducted with me and the internal Bosch team. The in-depth report is not available. All interviewed participants were males 22 to 64-year-old.

  • The software is hard to use – a major complaint
  • The very steep learning curve for new users
  • Unintuitive interface – inconsistency in labelling and naming convention
  • Broken links
  • Younger users were far more skilled in the new digital environment
  • In general, junior staff were significantly more knowledgeable about computing than senior colleagues
  • Senior users were more efficient using existing software
  • Senior users success on specific tasks vary depending on expertise

Affinity Diagramming: Software Organisation and Flow

After the review, I organised an affinity diagramming exercise and invited 10 people (technicians, engineers and other stakeholders) to a workshop. I asked each participant to write down on sticky notes all parts of the software including diagnostic tools and to organise them into groups based on their relationships

The diagram on the right represents the outcome of the workshop.

Software flow and organisation

Information Architecture and Interaction design

The next workshop activity was to understand how various parts of the software are going to interact and to determine the most important path technician takes during the vehicle diagnosis.

Software flow and organisation

Information Architecture

After the outline of the interaction was agreed upon, a map of the the application was created and the most important journey was determined (seen as red rectangles in the diagram).

Software flow and organisation
Software flow and organisationSoftware flow and organisationSoftware flow and organisationSoftware flow and organisation
Software flow and organisationSoftware flow and organisationSoftware flow and organisationSoftware flow and organisation
Software flow and organisation
Software flow and organisation
Software flow and organisation
Software flow and organisation

Usability Test of New Redesigned Software: Effectiveness

The first phase of the test was carried out on experienced technicians and the second on the younger generation of inexperienced technicians and newcomers. We tested if the participants can complete particular task.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

Usability Test of New Redesigned Software: Effectiveness

We observed how quickly participants can complete tasks.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

User report and final outcome

Research conducted with me and the internal Bosch team. The in-depth report is not available. All interviewed participants were males 22 to 64-year-old.

  • The slight improvement was noted with experienced technicians while observing effectiveness and efficiency
  • The significant improvement was noted with unexperienced technicians
  • Older tecnicians, with a help of assistant, were able to fully adopt to new software environment after 3-4 atempts
  • Generaly very favurable reviews by all participants
  • The application was sold to various car manufacturers (while I was still in the organisation, we sold the application to Mazda, Mercedes Benz and Ford) and diagnostic service stations

Beekeper | Expanding Functionality of a Task Feature

Introduction

Typically front line employees work in teams, for example, the maintenance team for a larger production company. Tasks aim to help front line teams: managers & team members keep track of work they want to do themselves or that they have opted to delegate to others.

Problem

Beekeeper currently has a Tasks feature in their product, but are looking to expand its functionalities. There are three main problems they are looking to solve:

  1. Based on customer feedback, Managers (those that create the tasks) want to be able to break them down into a series of steps. For example, inspecting an ice machine would have several steps. Currently, those steps are added in an attachment, such as a form.
  2. Managers want to see photo evidence that certain tasks have been completed by their team members so they do not need to go and physically check if it has been completed.
  3. Frontline workers often don’t finish all tasks by the end of the shift and need to be able to reassign a task to someone else so that it gets completed

Goal

Based on the problems mentioned, we could solve them by allowing Beekeeper users, who are performing the tasks, to:

  1. See and complete all the substeps of a task
  2. Add a photo to show a task is complete
  3. Reassign a partially-completed task to someone else
Software flow and organisation Software flow and organisation Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation Software flow and organisation Software flow and organisation
Software flow and organisation Software flow and organisation

Mosaic | Example of dashboard styling

Not a usual design process but an example of creative problem solving using JavaScript.

Mosaic - Styling pages with JavaScript and making them responsive.

Cornerstone On Demand (CSOD) is the SAAS platform, a cloud-based people development software provider and learning technology company. The existing interface used to build welcome and custom pages are not flexible enough and clients usually ask to be redesigned to address business needs and branding.

Mosaic, a US-based life care provider, wanted to add a number of widgets to the page, which contains important information preview to an employee but were not happy to have a default, unresponsive page and widgets styling (see image). I wrote a script, which enable me to style the page and make totally different looking page that was responsive and far more effective to use, including on mobile phones.

Problem:

  • Existing widgets contain an important preview of data that can be used on-page, but the application of styling of the widgets are very challenging even to the experienced developer
  • The pages were not responsive, so using the page with widgets on a smaller screen was not possible
  • Designers and developers usually avoid using widgets and recommend using links to pages where users can see the information
  • Widgets have the same ID within the HTML page as some other elements so styling would produce unexpected results.
Original Vehicle Diagnostic Software

Solution:

  • Develop a JS script that dynamically creates containers on a page.
  • Add unique class names to each widget while is loading on the page (as mentioned, IDs can not be used)
  • Add facilities in the script to control in which container widgets will appear
  • Make containers responsive and control the elements, including widgets, using CSS grid
  • Delete unnecessary table elements inside widgets using JavaScript
Software flow and organisation

Shell | Customer Chemical Portal

User Experience and User Interface design

Leading design development of responsive Salesforce-based e-commerce Shell Customer Chemical Portal for the purpose of ensuring existing clients about the continuation of quality of the service and product and further expanding clients database. Responsible for creating the structure of the website, defining how users interact with functions, creating meaningful relationships between customers and product.

www.chemicals-customer-portal.shell.com (login required)

Jaguar Land Rover | Vehicle Symptom App

Introduction

Vehicle Symptom App - Improving customer experience with the aim to:

  • Give instant feedback about a vehicle
  • Diminish frustration during a vehicle problem
  • Provide instant response to a driver on what to do in case of a vehicle problem
  • minimise calls to the help centre

Mission

Improving customer experience in case of a vehicle reporting a fault and assisting drivers to easy frustration during waiting time. The app should reflect JLR high standards of a customer relationship, product aftecare and branding.

User report: The main findings

Research conducted by the internal JLR team. The in-depth report is not available. The main target users are 30-60 y/o males with a solid knowledge of computer use and are well educated.

  • Inefficient customer service
  • Anxious waiting time without feedback
  • Users reported that they wouldn’t know what to do in a case if they have concerns and are not sure if it is a fault

Value Proposition

  1. Wants
    • The least interaction to solve the problem
    • Focus on driving, rather than vehicle management
    • Maintaining a vehicle with the least effort possible
  2. Pain
    • Long wait to get contacted and long phone calls
    • Inefficient customer service
    • Customers are not sure if something is wrong with a car if they detect something unusual
  3. Gain
    • Focus on enjoying positive and important features of the vehicle such as driving, listening to music, communicating
    • Less direct interaction with customer service
    • Efficient and less unpleasant procedure for solving a vehicle problem knowing what is wrong and how long it takes to fix it, including provisional cost
Original Vehicle Diagnostic Software

Value Proposition

  1. Products & Services
    • The efficient app which communicates with a vehicle and informs a user in a subtle way about the vehicle status
    • The app suggests if a customer service should be contacted depending on the level of fault
    • The app should be able to provide a user with an answer to at least some of the concerns that customers may have. In the case of using customer service, the service should be more efficient and effective in dealing with problems
  2. Pain Relievers
    • Cut the time spent on waiting for the customer service
    • Enable customer service to become more efficient in serving a customer
    • Create an app that would diminish reliance on customer service by answering most of the questions in a quick and easy way. The app must be able to provide most of the answers a user can think of
  3. Gain Creators
    • Creating features for easy access to entertainment, communication and pleasant driving
    • Creating the experience to minimise the need for customer service
    • Efficient and less unpleasant procedure for solving a vehicle problem knowing what is wrong and how long it takes to fix it, including provisional cost
Original Vehicle Diagnostic Software

Ideation stage

A number of exercises with the internal team, product owner and other stakeholders were organized in order to generate ideas and learn about the various business needs.

I suggested changing the way information is accessed by a customer. After research and gaining some valuable information from the customer service department, I realized that the better way to access the database is not in a conventional sense, the way it was accessed usually by a technician. Normally, experienced technicians know where the fault is coming so they would look in a database where a fault’s description and the solution is belonging. I argued that the better way for the customer to access information was using natural sensors: touching, hearing, smelling and seeing.

Software flow and organisation

Field visit

In order to learn how diagnostic software works and how is used, I observed technicians in one of JLR service station. (This contextual inquiry I also used for another project aimed at designing diagnostic software for technicians).

Software flow and organisation

Information Architecture

In order to learn how diagnostic software works and how is used, I observed technicians in one of JLR service station. (This contextual inquiry I also used for another project aimed at designing diagnostic software for technicians):
  • Serious problem- vehicle must NOT be used
  • Serious problem- vehicle CAN be used
  • Not a serious problem - vehicle CAN be used
After further analysis, another two segments were added (see the next page):
  • New problem- a problem that does not exist in the database
  • Imaginary problem - a problem does not exist but it is a concern to a customer and generates unnecessary calls to customer service.
Software flow and organisation

Interaction Design and User Interface Design

The next step was to establish how a user interacts with a vehicle and app in order to solve a problem. I created various user scenarios based on segments of possible problems. Here are two examples of various scenarios created.

Original Vehicle Diagnostic SoftwareOriginal Vehicle Diagnostic Software

Information Architecture - mapping wireframes

Wireframes were laid out to understand the flow and organisation of the user interface.
Software flow and organisation

Presenting to stakeholders

In order to convince the audience about the importance of such an app to JLR customers, I have created additional comic style user scenarios for the stakeholder’s presentations.
Software flow and organisation

Visual Designs Part 1

Example of visual designs created with limited branding guidelines.
Software flow and organisation

Visual Designs Part 2

Example of visual designs created with limited branding guidelines.
Software flow and organisation

Viva Stay | Hotel booking website

Introduction

Vivastay (vivastay.com) is an independent travel operator providing worldwide accommodation with a strong focus on customer service, Their vision was to establish the company as a leading travel operator, targeting particularly young people and couples aged 20-35. Due to low budget and very limited time constraints, some UX activities were not performed.

Business Objectives

Improving the number of site visitors who contacted the company to make a booking Pleasant online experience and updating the site to be robust, flexible, international, elegant, and easy to use. Delivery of the product on time and tight budget (only a developer were assigned to work alongside me)

Usability Tests

Due to these constraints, we were forced to find out a solution with the data and tools we got. First of all, usability tests on 3 users and reviews of analytics were used to get a general idea of the website performance. Users were given a specific task to complete. Frustrations were observed and noted. Measurement was recorded of how efficient, effective and satisfied the users were during the sessions.

Original Vehicle Diagnostic Software

Test report: The main findings

The test was conducted by me with the internal team.

  • Poor conversion rate (Google analytic)
  • Overall look and feel outdated, inflexible and did not give necessary confidence to a user
  • Participants were not clear what stage they are in, during the purchasing process (only one participant completed the task)
  • The majority of users could not differentiate clickable areas from other parts of the website (”Do I click on text or image?”)
  • Photos were too small, hence problems with users choosing the wrong hotels
  • Forms unclear and confusing

Original Vehicle Diagnostic Software

Information Architecture and Content Strategy

We dedicated one day to an intense period of ideas generation. We had lots of thoughts on how to improve online conversion and we noted everybody’s ideas. We went through several activities to document these ideas, spent a lot of time sketching and surrounded ourselves with printouts of competitor sites. We focused on key user tasks for the new website.

Interaction Design

The next step was to establish the main user journey (red route) and to find out how users would interact with the product. Existing screenshots with some quick Photoshop editing were used to map the interaction and low fidelity wireframe mockups were generated to understand how the content will be organised.

Original Vehicle Diagnostic Software
Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software

Outcome

After additional findings from user tests, further improvements were made on wireframes and the final prototype was delivered. I worked with the stakeholders to understand the essence of their brand and the online presence the new site should reflect. It was important that the new design fitted seamlessly with the brand and reflected trust, value and youthful appearance. The new website was radically different from the old version, but stakeholders were very happy because it distilled the brand personality they were aiming for.

Visual design

Image on this page: Bespoke icons were designed to follow the Viva branding

Next page: Designs for mobile and desktop screens were created. After they were accepted, the development phase has begun.

Original Vehicle Diagnostic Software
Original Vehicle Diagnostic Software
Original Vehicle Diagnostic Software
Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software Original Vehicle Diagnostic Software