Background
Before we begin, to comply with my non-disclosure agreement (NDA), I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of Joblogic.
Joblogic is a UK-based Field Service Management (FSM) company that was founded in 1998 and has developed an effective service management system. The Joblogic ecosystem includes Joblogic web landing page, Joblogic web app for back office, mobile app for Engineers and Customer portal for customers.
To meet the needs and business requirements of Budweiser as a customer of our company, we were tasked with building an independent, fully functional portal that incorporates existing information from Joblogic web app.
Because this is a high-priority project for our company, I work directly with leadership, including the PO and BA , who are the main points of contact with the customer.
Objectives
I am part of this new project. Below is a list of what our customers expect:
1. A new portal
Create a new portal that needs to meet the installation requirements of your sales representative or wholesaler. Each request must include equipment requirements (How many t-bars or front bars need to be installed). Additionally, it also facilitates installation creation and approval, allowing for tracking and progress of approved installation tasks.
2. Mobile first
Ensure seamless functionality and user experience on mobile devices (Tablet).
Role
Lead UX UI Designer
Team
Me
1 product owner
1 business analytics
3 developers
1 QC
Timeline
2020
Responsibilities
- Understanding and capturing customer ideas
- Planning and scope definition
- Build an MVP that is easy to use and addresses the user's needs.
- Build a new portal from scratch with a new UI style.
- Create and iterate on a prototype draft to gather customer feedback.
- Support team members in developing additional features in next phases.
Design Process
Research
Because for this project we received a request from the customer through the Product Requirements Document (PRD) that the PO worked directly with them and created. Additionally, because this was a specific request, we did not have any information from competitors and did not have time to conduct user research. Therefore, we apply the approach of PRD analysis, Stakeholder Interview, domain research, product research.
PRD Analysis
The initial product requirements document (PRD) provides an overview of the project goals, technical requirements and desired functionalities.
Key findings
- How can users log in? From where?
- Missing information about where the data input comes from? (Bar Name, Budget Code, Brand Badge, Tap Style, ...)
- How to Automatic Approvals?
- Build a new portal from scratch with a new UI style.
- Prioritize mobile devices (Tablet).
Stakeholder Interview
We then had a kick off session that brought together stakeholders, including POs, BAs, Devs, FEs and QCs to cover the following key points:
- Determine the product's goals
- Discuss current Joblogic products
- Understand Budweiser's requirements
- Choose a framework for the portal
- Resource allocation and product release planning.
Key findings
1. Target Audience
- Internal Users: Salesperson, Brand Approver, Sales Approver, Super User
- External Users: Wholesale
2. Main Challenge
It is necessary to create a new portal because it is not possible to add new features to the existing portal that all customers are using.
3. Design Objectives
Design a new portal with the following features.
- Request for work: A request for work is a process started when a site orders new equipment. The site will order equipment and the brands that they wish to have installed.
- Bar Update (Survey): This allows the user (usually an engineer) to record what is currently on-site at a customer site. The user can modify what is currently on-site to ensure that what is recorded in jlweb (as assets) is correct. (Will do next phase)
- MBMS (Must Buy Must Sell) Process: This process allows the user (usually an engineer) to record changes made during a visit to a site (Will do next phase)
4. Framework
Use Bootstrap 4 to build this new portal.
Domain Research
To understand the processes of setting up and operating a beer bar for Budweiser in the UK, we start from the questions:
- What is the setup process of a Budweiser beer bar in the UK?
- How does a beer system work at a bar?
- What equipment is needed for a beer system at a bar?
Key findings
- To set up a beer bar, it is necessary to consider customer requirements and Budweiser's business profits when agreeing to set up a beer sales system for customers.
- Equipment for a beer bar includes: T-bar, front bar, tap configurations, beer, beer barrels, python and refrigeration equipment.
Product Research
This is a very important step because we need to understand:
- How is the portal and JL web app currently working?
- What Input and Output information do we have for this new portal?
- How are they related to each other between products?
Key findings
- From JL web app we have the current data of a device such as T-bar or Front Bar, Tap Numbers, Tap Name, Position Tap, Refrigeration equipment.
- Inconsistent information: Site address, Fax Number
Define
User Story Mapping
Based on PRD analysis and insights gathered from Stakeholder Interview, domain research, product research. I created user story maps to map out the experience for the new portal, different solutions to solve the problems we found during research.
Ideate
At this stage, I create the information architecture and user flows.
Information Architecture (IA)
Before brainstorming ideas and sketches, we decided to visualize the Information Architecture (IA) of the project. This allows us to get a complete picture of this new portal and its main navigation mechanism. Below is the structure of the platform we agreed upon.
User Flow
I created user flows to describe the journey the user must complete between logging in, creating a new request flow and approving the request flow.
Design
Low Fidelity Wireframes
Once the user flow is approved, I start building low-fidelity wireframes that connect the key functions outlined in the user flow. Through this process, I was able to effectively tie all of the product's functionality into one cohesive user experience.
Style Guide
Before developing it into a UI design, I first decided on the color, typography, iconography and created important elements like buttons with their respective variations. The design system will continue to evolve along with the user interface design process.
Fast feedback
To ensure we are on the right track for our customers (also our users), we have created 2 Bar section interfaces to present to our customers. Finally the scroll bar version is selected. This allowed us to save time from having to redesign the user interface of every screen with a Bar section.
High Fidelity Wireframes
Here, a high fidelity I created based on previous wireframes and feedback from customers.
1. Login
2. Requests
3. Request Approvals
Prototype
At this stage, we implement already implemented ideas into a more interactive interface. This is to find out how well the product can run with the expected flow.
Test
Usability Testing
At this stage, we performed Usability Testing using a prototype with our customers (these are also the users using this product). Through previous quick feedback from customers, the evaluation results at this stage, in general, users were very excited to see and use the journey prototype application of this new portal. In addition, it just needs further improvements such as adding Site and User list sections. However, due to time constraints, improvements will be made later.
Result
We successfully launched the new portal MVP version for Budweiser on schedule and received positive feedback from customers
We successfully launched the new portal MVP version for Budweiser on schedule and received positive feedback from customers
What I learned
1. What is a bar?
I learned the process to request a bar setup in the UK and how it works.
2. Fast feedback
You're not sure which solutions are right for your customers. Send them a quick check and you'll get a quick response. This helps you save a lot of time.
3. Take it step by step
We learned how to break down complex designs into small, manageable pieces. This makes it easier to develop and handle bugs as we go.
Next steps
This new portal project is still ongoing with:
- Continuously develop new features based on planning and customer requests, as well as expand each part of the portal to meet Budweiser's increasingly complex needs.
- Post-launch optimization is the critical next step for any UX improvement or product launch. With deep and actionable insights, we can design better experiences for consumers.
Final conclusion
This is my proudest contribution at Joblogic. It wouldn't be possible without the amazing team at Joblogic! Huge kudos to our heroes in my product development team, QC team and design team.