.png)
.png)
Trip Planner App for Company
From McMaster Design League UI/UX Designathon 2022
Time
May-August，2022
Client
Role
UXR, UX/UID, Team Leader
Key words
Mobile App Design
Design Challenge Prompt
With a younger workforce pushing for better work/life balance, many organizations are transitioning to fully remote working opportunities. While remote working is great, it’s still important to have face-to-face time to help build strong relationships. Organizations are bridging this gap by hosting onsite get-togethers in locations around the world. However, the process of organizing these trips is challenging, and time consuming. Develop an app that helps organizations plan these trips. Ensure you consider Budgets, organizational values, travel restrictions, team member restrictions (ie. visas), food, accommodations, workshop spaces, team adventures, etc.. Is it possible to enter information and have options presented to you?
MVP During Designathon
User Interview
I interviewed four people...
Interviewee 1: HR from New Clues Film
Interviewee 2: HR from UpMarket Finance Company
Interviewee 3: Employee from Google
Interviewee 4: Employee from Apple
Interviewee 2: HR from UpMarket Finance Company
Interviewee 3: Employee from Google
Interviewee 4: Employee from Apple
.png)
Key Insights from them
HR
The biggest pain point is to figure out the time and location that everyone’s satisfied with. Once time and location is decided, everything else should work smoothly.
Employee
They enjoy get-together trips a lot. Although there’re no specific pain points, they look forward for a tool to encourage higher engagements and make the trip more memorable.
User Persona
.png)
Platform Choices
Organizer
Web App
They will be spending a long time period sitting in their office planning for the trips.
Young Employee
Mobile App
They want to quickly submit their preferences with minimal effort. Also want to use the app during the trip.
Senior Employee
Mobile App+Assistance
They may not be familiar with using mobile app, so they need additional help. For example, organizers input their info manually into the system.
.png)
User Flow
For Desktop Dashboard
For Mobile App
Key Feature of MVP Version
Web App
Organizers could
1. create survey about trip destination and dates.
2. send survey to employees ask them answer it
3. collect survey and analysis result.
1. create survey about trip destination and dates.
2. send survey to employees ask them answer it
3. collect survey and analysis result.
Mobile App
Employees could
1. answer survey
2. record beautiful moments during the trip.
1. answer survey
2. record beautiful moments during the trip.
Sketching/Wireframe
/Low-fi
Hi-fi Prototype
Feature 1：Create new trip
Organizers enter preliminary requirements including trip genre, approximate budget and timeframe.
Homepage (Organizer Landing page)
Create a new trip
Explore
Save potential destinations to favorite
Feature 2：Create survey for employees
After there's a group of potential destinations, organizers create a survey to collect employee preferences. Organizers
can view automated survey result in real-time.
can view automated survey result in real-time.
.png)
.png){kind=small}
Feature 1：Receive and answer trip survey
Employees receive a new trip survey where they can indicate
their preferred date and destination using the app.
their preferred date and destination using the app.
Feature 2：Capture and share the wonderful moments during the trip.
Employees have the option to post trip photos with their colleagues
and mention them (@) to share these wonderful and enjoyable memories.
and mention them (@) to share these wonderful and enjoyable memories.
Feedback from judges
Good Point
1. While mobile apps aren’t the only solution to every problem, integrating mobile with desktop is a great approach.
2. Outlining a relatively complete user flow in such a short time is impressive.
Need to improve
1. Some colors need to be adjusted to meet accessibility standards.
Back
Redesign Park Payment mobile App
ParkMobile is a popular parking app used by millions across North America. It helps users find, reserve, and pay for parking spots on their smartphones. Our team, as regular ParkMobile users, saw areas where the user experience could be better. So, we decided to redesign it to fix these issues and make it easier to use.
Link to website：
https://parkmobile.io/Problem Statement
How can we improve the experience to increase satisfaction among ParkMobile’s existing customers?
SECONDARY RESEARCH
Collected online reviews from existing users
.png)
REDESIGN SCOPE
Activity
Park
Settings
Design Principles and Constraints
Before starting design, there's an important consideration: parking payment apps like ParkMobile face numerous design constraints imposed by parking lot owners. Why? This ties directly to their business model.
Insignts form online review
Findings About Park
Findings About Activity
Findings About Settings
Pain points from current users
Park payment user flow
By analyzing the current park payment user flow, we discovered that users must return to the previous page and repeat the process if they want to adjust their parking duration or add a new vehicle during the payment process. This leads to inefficiencies, particularly when users reach the limit of five saved vehicles or two saved cards, which requires them to remove one before adding a new one. This repetitive process is time-consuming and affects the overall user experience.
New Design of Park
The new version streamlines the parking payment process into 4 steps, allowing users to adjust details at each stage and review all information in a final confirmation step. This design removes the need for users to backtrack, providing a smoother and more efficient experience.
New UI of Activity
How the New UI Addresses User Feedback
1. Parking End Time: Add this info and highlight it in red.
2. Set Alert Feature: Visually emphasized to encourage timely reminders.
3. Favorite Zones: Simplified marking process for quicker access.
5. Session Reminders: Card design pattern alerts users to multiple active sessions.
Settings
Rename "Settings" to "Profile" to enhance the personal feel and increase user engagement with ParkMobile. Within "Profile," restructure the information architecture and use UI design to clearly differentiate sections.
Before
After
Takeaways & Measurement
Redesigning the ParkMobile app provided valuable insights into improving user satisfaction within a constrained design environment. Key takeaways include:
1.User-Centric Design: Prioritizing real user feedback helped create a more intuitive experience tailored to user needs.
2. Efficiency Matters: Streamlining repetitive steps minimized frustration, enhancing usability and user satisfaction.
3. Design Under Constraints: An important consideration was the need to navigate design constraints imposed by parking lot owners, which influenced feature flexibility and UI decisions.
To measure the success of the redesigned ParkMobile app, we could track key metrics such as:
1. Reduction in Negative Reviews: Decrease in the number of online complaints and negative ratings post-redesign.
2. Task Completion Time: Reduction in time spent on key tasks like reserving and paying for parking, indicating improved efficiency.
3. Feature Engagement: Higher engagement rates with newly added or highlighted features (e.g., 'Set Alert' or 'Favorite Zone').
4. Customer Support Inquiries: Fewer support requests related to usability issues, showing better self-sufficiency with the app.
5. User Satisfaction Scores: Increase in user satisfaction metrics from in-app surveys or NPS scores.
These takeaways and metrics will help ensure that the redesign not only enhances user experience but also meets business objectives effectively.
Back
Checking info of containers in transit via the TMS dashboard
DrayEasy specializes in short-distance container transportation. A notable characteristic of this industry is the need to manage large amounts of data once containers begin shipping. This project focuses on tracking the status of containers in transit. Its goal is to present high-priority information through a combination of maps and tables, by helping users save time and quickly address the most urgent and valuable container-related issues.
Time
Client
Role
Key words
May-August，2022
UXR, UX/UID, Team Leader
Mobile App Design
Challenges & Solutions
From DrayEasy users:
The DrayEasy dashboard presents an overwhelming amount of information, making it challenging for users to quickly find the details they need about containers in transit. On average, users reported spending over 15 minutes searching an information, which often led them to contact customer service for assistance.
From DrayEasy support team:
Users frequently turn to customer service when they can't efficiently locate necessary information, which results in the support team feeling overwhelmed. On average, the customer service department receives about 40 calls per day related to container issues, significantly straining their workload.
Clarified what users are most concerned about—containers in transit.
To emphasize this information, we introduced a dedicated "Container" tab to streamline the checking process. This tab focuses specifically on displaying containers in transit, enabling users to quickly access all essential details and take necessary actions, thereby reducing their reliance on customer service support.
Methods
Research and Benchmarking
Product Critique
Reviewed the existing website to identify inconsistencies, redundant components, and usability pain points.
Competitor Analysis
Benchmarked eight TMS drayage transportation companies to understand industry best practices.
User Interviews
Understand what specific information users are struggling to find or access quickly in the DrayEasy dashboard.
Stakeholder Collaboration
Collaborated with the customer service team to align use cases and prioritize content.
Insights
1. Users typically need to check or find information frequently once a container begins shipping（container in transit）, as the shipping process involves multiple steps and can easily encounter special situations. For example, customs inspection issues might require additional documentation, or severe weather conditions could cause port closures and delays. This information needs to be updated promptly so that users can stay informed and relay updates to their stakeholders.
2. DrayEasy’s users are mostly international trade professionals who are used to dealing with large amounts of data. Presenting data in a tabular format fits their work habits well.
3. Container and order are two different concepts.
4. Using a map to visualize data is more effective.
Design Process
Interview with users
We analyzed the original website of Drayeasy and found the cons and weaknesses we need to import of the website.
Details
Insights
1. The UI system of DrayEasy should be improved, such as the Message layout, Buttons, and Icons in each pages.
2. DrayEasy has much information for users to edit, but there are not enough guidelines or support.
3. DrayEasy does not have many interaction clickable buttons or filters to show more shipping process informations to users.
4. To rely on the manual service. Operators like Sending Emails and Calls for confirmation.
Competitor Analysis
We analyzed the other companies, flexport, Cargomatic, and NEXT, which also have similar businesses in transportation management services. Discovered their Pros and Cons.
Details
Insights
1. Most other transportation management services have multiple categories to customize their costumer's shipping information.
2. Map is an important part of showing shipping status.
Solution 1
Container Tab for Checking Containers in Transit
Containers in one order may have different shipment schedule
An order may include multiple containers, but these containers are not necessarily shipped on the same vessel, which can result in different tracking statuses for different containers within the same order.
Not all containers need tracking
Through user interviews, we found that not all containers need to be tracked. Users only care about tracking status once a container starts shipping.
They worry about potential issues, such as whether customs inspections will go smoothly upon arrival, whether additional documents need to be submitted, or if the container can be delivered to the warehouse on the same day after leaving the port. These concerns can affect the progress of the shipment and may lead to additional costs.
Focus Tracking on Containers in Transit
We recognized that "order" and "container" are two distinct concepts, and users primarily need tracking once containers are in transit. To meet this need, we introduced a dedicated "Container" tab that specifically displays containers in transit and track them at the container level for clearer management.
Solution 2
Super Table for Checking Containers in Transit
1. A super table is set as the default view with a map, but the table can be expanded to full screen to better accommodate users' habit of reading tabular data.
2. The keywords in the search bar can function like filters to sort IR, and a drop-down menu allows users to view only the containers that require action.
3. 8 table headers are based on user feedback, highlighting the most important dates and statuses. Containers can be filtered by status, while other dates can be sorted by date size.
Solution 3
Highlight important info
Take Actions
The top CNTR# information has the details and reminds the users if they need to take action on their shipment:
1. Add additional Container documents
2. Enter the pickup number
Industrial News
Users can see the reasons for shipment delays based on industrial news, and they can also view the weather effects on the map.
Solution 4
Data Visualization on the map
Containers in different IR
Users can see how many containers and orders they have in the different specific IRs on the map.
Containers details process on the map
Users can see the delivery path to the warehouse when their containers have already been delivered and picked up in the IR.
Results
Through user interviews and observations, it became evident that the DrayEasy dashboard’s design presents an overwhelming amount of information, making it difficult for users to quickly locate critical details about containers in transit.
To address these challenges, a dedicated "Container" tab was introduced to streamline the checking process. This tab focuses specifically on containers in transit, displaying tracking statuses, delivery schedules, and any additional costs or document requirements. By centralizing this critical information,
users can quickly access the information they need and take necessary actions.The average time spent finding information decreased from 15 minutes to just 5 minutes with the introduction of the "Container" tab.
As a result, the customer service team now receives approximately 25 calls daily, a reduction of 37.5% in support requests.
Problem & Painpoint
Based on the interview
1. Users find it difficult to quickly identify the most important or urgent information from a large amount of data.
2. International trading users are accustomed to viewing data in table format due to their professional habits.
3. For users, the website is just used to fill out the Google form required to create an account.
How Might We
1. Increase the retention rate of new clients.
2. Provide more useful shipment status for clients directly on the website.
*Add a connection between different shipping information and status on the map.
*Add a connection between different shipping information and status on the map.
3. Reduce the cost of costumer service.
*Provide a customized filter option for users based on their delivery status requirements.
*Encourage users to use the website for their fundamental requirements, such as tracking shipments and making orders.
*Provide a customized filter option for users based on their delivery status requirements.
*Encourage users to use the website for their fundamental requirements, such as tracking shipments and making orders.
Design Homepage
The team split me up to redesign the Drayeasy web homepage. Despite the fact that the majority of people interviewed were not accustomed to viewing information immediately from a map.Next, we separated the homepage's sections for the Map, Shipment Status, Container, and Industrial News, but they were still connected, so users could choose which information to display on the divider.
Back
AI-powered property inventory inspection app
Inspecti (formerly known as Easylist) is an AI-powered property inspection product developed by ilisting AI, specifically designed for the UK rental market. By leveraging AI technology, Inspecti automatically identifies items, quantities, and damages from photos taken by inspectors. This drastically reduces the time and labor required to complete an inspection report, cutting the cost from £150 to just £15.
Link to website：
https://ilistingai.com/
How can we use AI to help inventory inspectors reduce workload and streamline workflows?
Context
When you rent an apartment in the UK, it typically comes furnished. Because of this, UK law requires an inventory inspection to be conducted, along with an inspection report, for the rental contract to be considered legal. Additionally, when you decide to move out, a final inventory inspection must take place, accompanied by a report, to successfully terminate the contract.
The inspection report can be provided by the landlord, agent, or tenant. On average, an inspection report contains around 200 pictures. Inspectors typically need to manually capture these 200 photos during the inventory checks and then write notes based on the pictures to describe the condition of the items, ultimately generating the report.
Time
Client
Role
Key words
May-August，2022
UXR, UX/UID, Team Leader
Mobile App Design
.png)
target USERS
Property Inventory Inspetors
BUSINESS GOAL
Acquire market with competitive prices
Inspecti leverages AI technology to reduce labor costs and shorten the time needed for inventory inspections, ultimately lowering the report price from the traditional £150 to £10.
inspectors' needs and pain points
Require an efficient way to complete the inventory inspection process and generate a report.
I interviewed inspector, property agent to elucidate three pivotal insights.
THE SOLUTION
Use AI to automatically identify content from the photos instead of relying on manual input.
Step 1:
Use the Inspecti mobile app to capture inventory photos and sync the data to the web app.
Step 2: Use the Inspecti web app to manage photo data and generate an inspection report by utilizing AI to automatically identify content from the photos.
DESIGN Problem
How can we use AI to help inventory inspectors reduce workload and streamline workflows?
Solving Data Transfer Hassles
Story behind platform selection
One of the key pain points for inspectors is "Data Transfer Hassles." While competitors typically provide desktop tools for manual report generation, we aimed to take a different approach. Our goal was to create a product where inspectors could capture photos and seamlessly generate reports in one platform, all powered by AI technology.
During the POC phase, our tech team tested whether AI-powered image recognition could achieve this. However, the test results showed that the report generation process was too time-consuming. To address this, we decided to combine a mobile app for capturing photos with a desktop dashboard for report generation, and thus, Inspecti was created.
Context
The UK property rental market presents a unique challenge - fully furnished properties requiring meticulous inventory checks.
In the past, whether you're an agent, a tenant, or a landlord, you needed to manually capture hundreds of photos for inventory checks during each move-in or move-out which is cumbersome and time-consuming.
Problem & Painpoint
Based on the interview
1. Property agents think the pricing of inspection report is expensive.
2. Property agents say managing and annotating hundreds of inventory photos is their biggest challenge during inspections.
3. Most inspection products are desktop apps. Inspectors use their own devices to take inventory photos.
How Might We
1. Use AI tech to decrease inspectors work load.
*Use image automatic recognition tech to replace
manual annotations.
*Use image automatic recognition tech to replace
manual annotations.
2. Make the inspection workflow smoother.
*Innovate with a mobile app to complete the whole inspection workflow -take inventory photos and
generate report.
*Innovate with a mobile app to complete the whole inspection workflow -take inventory photos and
generate report.
3. Decrease the pricing of inspection report.
*Decrease inspection costs by using AI technology to reduce manual workload and employing a mobile app approach to shorten inspection time.
*Decrease inspection costs by using AI technology to reduce manual workload and employing a mobile app approach to shorten inspection time.
Low-Phi of Inspection feature
Draft design with Galileo AI get some ideas
Test data：
AI generates image recognition for 200+ images in about 20 minutes
Response time is lengthy, impacting user experience.
Adjust Product Strategy
Mobile app for image data acquisition
+
Desktop dashboard for AI generation
Problem & Painpoint
Based on the interview
1. Property agents think the pricing of inspection report is expensive.
2. Property agents say managing and annotating hundreds of inventory photos is their biggest challenge during inspections.
3. Most inspection products are desktop apps. Inspectors use their own devices to take inventory photos.
How Might We
1. Use AI tech to decrease inspectors work load.
*Use image automatic recognition tech to replace
manual annotations.
*Use image automatic recognition tech to replace
manual annotations.
2. Make the inspection workflow smoother.
*Innovate with a mobile app to complete the whole inspection workflow -take inventory photos and
generate report.
*Innovate with a mobile app to complete the whole inspection workflow -take inventory photos and
generate report.
3. Decrease the pricing of inspection report.
*Decrease inspection costs by using AI technology to reduce manual workload and employing a mobile app approach to shorten inspection time.
*Decrease inspection costs by using AI technology to reduce manual workload and employing a mobile app approach to shorten inspection time.
POC Prototype
Test if AI-powered image recognition tech
suits the Inspecti mobile app.
Unfortunately, we found...
suits the Inspecti mobile app.
Unfortunately, we found...
Basic features on MVP
Feature 1: Multi-hierarchy information management
In the MVP phase, our team prioritized two core features for both the mobile and desktop versions of the product:1. Multi-hierarchy Information Management:Manage properties, reports, and item photos with a structured, tiered system.2. AI-Powered Item Recognition:Automatically identify items from photos using AI technology.
Brainstorm
Inspecti contains five levels of information: property, report, room, item, and item pic. Should the units be based on property or report?
Based on property
Pros
1. Agents use this app to take inventory photos and manage hundreds of them. Managing information based on properties makes it easier for users to handle, search, and trace item photos.
2. Users currently manage information based on properties.
Cons
1. Users need to go through more steps to complete an action, but the extra time is acceptable.
Based on repert
Pros
1. Users complete actions with fewer steps when the app manages information based on reports.
Cons
1. Does not align with the user's current habits.
2. When managing dozens or hundreds of properties, using reports as the unit of management can be a bit unwieldy.
Conclusion：
Hierarchical info based on properties.
Property → Report ( Inspection ) → Room → Item → Item Pic
Property → Report ( Inspection ) → Room → Item → Item Pic
Information Architecture
Sketching
Mobile app
Desktop dashboard
Wireframe
Mid-fi design
High-fi design
Basic features on MVP
Feature 2: AI item recognition from photos.
In the product, items' photos taken by the mobile app are the input data. The higher the resolution, the better the AI can identify items from the images.Therefore, our design aims to help users take high-quality photos.
Input data
In the product, items' photos taken by the mobile app are the input data. The higher the resolution, the better the AI can identify items from the images.
Therefore, our design aims to help users take high-quality photos.Let's enhance data input quality by design！
Easily reduce inaccurate data
1. Place the delete button to the right of the photo button for quick removal of unsatisfactory photos.
2. Multiple access for deleting photos.
Improve data quality
1. Flashlight icon in upper right for easy access.
2. App checks light condition and prompts flashlight use if it's dark.
Encourage to use multiple photos
1. The text on the button encourages users to take multiple photos.
2. The numbered thumbnail encourages users to take multiple photos.
Output data
In Inspecti, the output data is an inspection report generated by AI technology.
We highlight this feature through design and encourage users feedback on accuracy. Due to thetechnical limitations of AI report generation, a certain waiting time is required.
Therefore, we managed user expectations through design .
1. Encourage users to try the AI-generated report feature through multiple access points.
2. Use a loading page to set clear expectations for AI response times
3. Collect users feedback
Results
To address user pain points, we redesigned the Inspecti app from the ground up, resulting in...
Inspection Time
Cut by 50%
A reduction in inspection process time by over 50%, from 2 hours to under 1 hour.
Costs Reduced
by 10x
A significant decrease in report costs by 10 times, from £150 to £15 per report.
What's next
In the POC phase, our vision for this product was to create an app where users could take photos and generate inspection reports entirely on their mobile device, which is different from other products on the market.
However, due to limitations in AI technology, we split the functions: photo-taking is done on the mobile app, and report generation happens on the desktop.
As AI technology advances, we believe that it will soon be possible to handle the entire inventory inspection process on a mobile device. This would allow users to take photos and generate reports directly on their phone with Inspecti, creating a more seamless and complete experience.
