Moment Mobile

Moment Mobile

Moment Mobile

Moment Mobile

Moment Mobile

Moment Mobile enables companies and users with project based workflows to take control and manage their projects while on the go.

star
star
star
star
star

This case study was completed with two other students as a part of our bachelor thesis at Kristiania University College.

Project Context

Moment Mobile launched in 2022 by Moment Team AS as a companion app to their main product Moment Web, with an intention of simplifying time tracking and give customers a access to their projects, clients, and tasks while on the go.

Less than a year Moment identified a user need to improve Moment Mobile and allow users to create claims and expenses from their phones. This feature became a main priority as it was already offered by their competitors and posed a challenge to the sales team when marketing Moment as a product.

Client

Meet Milient

Meet Milient

Meet Milient

Meet Milient

Milient is a leading project management provider in the Nordics, offering services such as timekeeping, resource planning, quality assurance, staffing and recruiting.

Rebranding

In March 2023, Moment and Millnet merged into Milient, adopting a new name, brand identity and priorities, including a new focus on UX that revealed a need for an improved mobile app.

Our task was

Milient assigned us with a three-assignment with a goal of improving the user experience for Moment's users.

draw

Redesign the app

palette

Create a design system

travel_luggage_and_bags

Implement a new feature

empathize

Research

Research

Research

Research

We started by mapping out the target audience to understand who we were designing for and to find suitable users for interviews.

Exploring Moment

We began by exploring Milient's products and their competition, noting down our assumptions about potential usability issues which were then used to formulate questions for the user survey.

Target Audience

Next, we needed to find out who we will be design for and to do that we used common segmentation criteria to outline the target audience.

User Survey

We created and sent out a survey to Millient employees with a goal of collecting quantiative insights on user attitudes and behaviors, as well as recruit candidates for user interviews.

User Interviews

We conduct semi-structured interviews with six Milient employees to confirm or refute our assumed problem areas and gain attitudinal insights about their experiences, needs and pain points.

Research Findings

  • Due to hidden actions, users don't know how to edit or delete registered hours.

  • Login process needs to include SSO authentication and password recovery.

  • The filter function needs improvement to help users work more efficiently.

  • Some users prefer batching time entries once a week and need an easier process.

  • There are inconsistencies in time formatting between the web and mobile apps.

  • Users can’t easily scan the total of their registered hours in the timesheet.

  • Multiple users mentioned that app's user interface feels outdated.

  • Users expect to complete the entire Travel & Expense process directly in the app.

  • Registering absences from the mobile app is highly requested by users.

Ideation

From Insights to Ideas

Using gathered insights, we created a user statement to define the user's needs. Then we reframed it into a "How Might We" (solve) question.

We answered the questions through individual brainstorming sessions, later presenting it to the team and refining the idea into a concept.

Ideation

From Insights to Ideas

Define the problem

Using gathered insights, we created a user statement to define the user's needs. Then we reframed it into a "How Might We" (solve) question.

Ideate a solution

We answered the questions through individual brainstorming sessions, later presenting it to the team and refining the idea into a concept.

Sitemap

Before we could start prototyping, we created a sitemap to plan and visualize the flow and hierarchy of the system.

Sitemap

Before we could start prototyping, we created a sitemap to visualize the systems hierarchy and plan user flows.

Sitemap

Before we could start prototyping, we created a sitemap to visualize the systems hierarchy and plan user flows.

Sitemap

Before we could start prototyping, we created a sitemap to plan and visualize the flow and hierarchy of the system.

Prototyping

Realising the ideas

We created wireframes of the concept in Figma to explore different layouts and further refine our idea. Once ready, we applied presets, created components and established user flows turning it into a clickable prototype that can be used in user testing.

First Prototype

Initial Design Changes

Initial Design Changes

Initial Design Changes

Initial Design Changes

arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer

Sitemap

Before we could start prototyping, we created a sitemap to plan and visualize the flow and hierarchy of the system.

Prototyping

Realising the ideas

We created wireframes of the concept in Figma to explore different layouts and further refine our idea. Once ready, we applied presets, created components and established user flows turning it into a clickable prototype that can be used in user testing.

First Prototype

Initial Design Changes

Initial Design Changes

Initial Design Changes

Initial Design Changes

arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
arrow_forward
Dashboard
Timesheet
Timerecording
Travel & Expense
Project
Task
Customer
Iteration 1

Usability Testing

First tests were conducted with one customer and four Milient employees where we observe their performance while using the solution to identify and resolve any challenges they might face.

Learn more about user testing
add
Iteration 2

Validating the design changes

Validating the design changes

Validating the design changes

Validating the design changes

Second iteration focused on assessing the effectiveness of implemented changes at resolving previously identified problem areas and uncovering any subsequent usability issues.

Learn more about user testing
add
Iteration 3

Wrapping up the process

Wrapping up the process

Wrapping up the process

Wrapping up the process

Due to a time constraint, the third and final iteration focused on implementing the last changes and polishing the prototype to prepare it for handoff to Milient.

Design System

Design System

Design System

Design System

UI Library

Design Manual

Scalability

Milient's new identity has been integrated into the redesign through the use of logo, color and typography from the Design Manual.

UI Library

Design Manual

Scalability

Milient's new identity has been integrated into the redesign through the use of logo, color and typography from the Design Manual.

UI Library

Design Manual

Scalability

Milient's new identity has been integrated into the redesign through the use of logo, color and typography from the Design Manual.

UI Library

Design Manual

Scalability

Milient's new identity has been integrated into the redesign through the use of logo, color and typography from the Design Manual.

UI Library

Design Manual

Scalability

Milient's new identity has been integrated into the redesign through the use of logo, color and typography from the Design Manual.

Final Prototype

Delivered Solution

Moment Mobile enables companies and users with project based workflows to take control and manage their projects while on the go.

Login

Getting into the app is now easier with a revamped login process that now includes highly requested SSO and password recovery features.

Homepage

We made changes to the layout with the introduction of customizable shortcuts, widgets and pages.

Designing a one for all solution was hard, therefore the layout can be adapted to suit each users needs.

Timesheet

Users can quickly access their time entries using a montly, weekly or daily view. This change improved scannability, a common irritation amongst the users.

Timerecording

Initiating a timerecording process can now be done from different pages in the app, due to the use adaptable Floating Action Buttons.

Moreover, the users can improve their efficiency when registering hours and absences through autofill and batch-timerecording functionality.

Travel & Expense

Initially, users would use the Moment Mobile to take and upload pictures of their receipts to the web app.

This changed once we designed and implemented an optimized version of the feature that allows the user to create, edit and submit their claims and expenses.

List View

List Views were decluttered of non-essential tags and information. Additionally, changes to the search and filtering options made it easier for users to find what they were looking for.

star

Note: Project, Task, Customer and Non-Conformity pages use different variations of the List View.

Project

Information on the project page has been restructured into navigable tabs to allow users to more easily track their projects.

star

Note: Project, Task, Customer and Non-Conformity pages share a similar page structure.

Task

Besides displaying essential information about the task, users have the option to create new tasks and a shortcut for registering new time entries onto the task.

Customer

Similarly to the homepage, the customer main page is a dashboard that allows users to add, edit, replace and reorder displayed information

Non-Conformity

Due to the sensitive nature of this feature, the list view only displays cases that involve the user.

Users such as architects and engineers can submit new cases and upload new attachment, while resolving the cases remains exclusive to the web platform-

Login

Getting into the app is now easier with a revamped login process that now includes highly requested SSO and password recovery features.

Homepage

We made changes to the layout with the introduction of customizable shortcuts, widgets and pages.

Designing a one for all solution was hard, therefore the layout can be adapted to suit each users needs.

Timesheet

Users can quickly access their time entries using a montly, weekly or daily view. This change improved scannability, a common irritation amongst the users.

Timerecording

Initiating a timerecording process can now be done from different pages in the app, due to the use adaptable Floating Action Buttons.

Moreover, the users can improve their efficiency when registering hours and absences through autofill and batch-timerecording functionality.

Travel & Expense

Initially, users would use the Moment Mobile to take and upload pictures of their receipts to the web app.

This changed once we designed and implemented an optimized version of the feature that allows the user to create, edit and submit their claims and expenses.

List View

List Views were decluttered of non-essential tags and information. Additionally, changes to the search and filtering options made it easier for users to find what they were looking for.

star

Note: Project, Task, Customer and Non-Conformity pages use different variations of the List View.

Project

Information on the project page has been restructured into navigable tabs to allow users to more easily track their projects.

star

Note: Project, Task, Customer and Non-Conformity pages share a similar page structure.

Task

Besides displaying essential information about the task, users have the option to create new tasks and a shortcut for registering new time entries onto the task.

Customer

Similarly to the homepage, the customer main page is a dashboard that allows users to add, edit, replace and reorder displayed information

Non-Conformity

Due to the sensitive nature of this feature, the list view only displays cases that involve the user.

Users such as architects and engineers can submit new cases and upload new attachment, while resolving the cases remains exclusive to the web platform-

To Be Continued…

To Be Continued…

To Be Continued…

To Be Continued…

Thank you for taking your time to read this far into the case study. The remaining content is currently in the making and will be released shortly