ICHCS Audit Log Platform | A UX UI Case Study
Project Overview
Background
The ICCIA are the representative of the private sector in the
OIC 57 countries striving to develop the Halal market and
respond to Muslim Consumers demands. To this end, the ICCIA
created the ICHCS to act as it’s certification arm within its
mandate to advocate Halal and develop the Halal Market. ICHCS
mission is to perform thorough verification of food Halalness
and provide trusted Certificates qualitatively and
quantitatively.
The new ICHCS audit log platform is a tablet/web app to help
auditors complete audit requirements and follow the required
standers, then report to the ICHCS committee. The report
includes forms, pictures, and documents. Based on all the
information sent by the auditor, the committee will decide on
issuing certification. It is planned as long-term product
development and breakdown into different releases.
Project Objectives
The objectives of the audit log platform are:
• To improve administrative and management
process efficiency
• To streamline the Certification Processes
• To facilitate submission and approval of
Certificate requests from Suppliers / Slaughters and
distribution of reports electronically
• To gather data for analysis and planning
• To provide authentication service in a
secured environment
The benefits envisaged are:
• Efficient delivery of services
• Reducing paper circulation
• Improving analysis of available data
• Developing an efficient Food tracking
platform
• Developing a platform for online training
(Slaughters, Auditors)
• Enabling consumers to authenticate products
My Role
My role was to lead the product design and UX research. My
responsibility is across user research, experience design, and
visual design including:
• Ideation and brainstorming.
• Defined the problem, goal, and scope
with the team.
• Created user flows and
low-fidelity wireframes to communicate with various stakeholders
• Created InVision interactive
prototypes to do user testing
• Explored
UI stylings options
• Created the
high-fidelity mockups in Sketch
•
Defined design systems to communicate with developers
• Reviewed the visual user acceptance
testing, before launching the products
Product Development Process
New product development (NPD) is the process of bringing an original product idea to market.
1-Ideation
Identifying the problem and explore ideas to solve these problems
Problems
• The project is a new platform with many challenges from business complex requirements
to user needs.
• The required function in multiple screens contains a lot of database in the
backend. As a result, the design took so many stages to be as simple as possible due to screen loading
time and heavy technical works in the backend.
• The user needs a very simple and easy to use interface to simplify the
complexity of the audit process.
• Some screens such as Dashboard contains many elements
• The app contains multiple menus and complex lists
Goals
Design a simple layout and work parallel with the programing team to manage and solve technical work.
2- Product Definition
Core functionalities required in the first phase (MVP):
• Log Autosaving (start, location, datetime)
• Login
• Registration through website
• reset password
Accept Audit request.
View Audit list
View audit details
Add attendees
Receive Audit Notification
View Audit Speech
View & Download Doc. Review
Select Audit Result & View No. of NCs
Print Audit Rep, Client Rep, Doc. Review
Complete Audit
Open Meeting (OM)
Add attendees (OM)
Submit Open meeting
Add notes (OM)
Close Meeting (CM)
Write Conclusion, Observation, Recommendation
If NCs > Add corrective action plan
Send action plan to email (client)
Submit Close Meeting
Select checklist and subcat
Add attendees to subcat
View Questions & write comments
Capture photo evidence
Change Question (Q) status
Submit (Q)
Change attendees per (Q)
User journey / Sitemap
3- Sketches and Wireframes
First sketches suggested by client
Wirefarmes
Creating wireframes and user flows to confirm functionalities with the product manager and developers.
Design Patterns
Using basic navigation and behavior helped the developers apply the same patterns in
the early developing stage.
Example of navigation patterns and page layout
4- Testing and Validation (User testing)
This stage was the longest; we had many meeting with the client adding and changing buttons and orders of
many of the functions.
The aim of this testing was to test the navigation and information hierarchy of the platform. We were
consistently testing the app to see if the users can always know where they are and what they can do on each
screen.
An InVision Prototype to test navigation structure (early stage)
5- High-fidelity visual design mockups in Sketch
To avoid any misunderstandings between design, product and development teams, I
organized our design files based on different user flows.
Audits
Earning
Standards / Chat / Profile
Calendar
Design review
Through the design process, the development team was working on the ERP.
In most cases what developers create won’t 100% follow your final design, that’s why design review is necessary before launching the product.
There are some main points I focus on when doing the design review:
• Make sure that padding, spacing, color, image sizes follow the design.
• Accessibility guidelines such as the font-size are correct and readable. Color contrast pass accessibility for the user groups.
• Functions: button direct to the right direction.
• User flow: making sure each click takes me to the right screen.
Reflection
In this project I have achieved many things:
• Designed a new product from end to end.
• Learnt different ways of communication with the team specially that the project was done remotely.
• Designed different types of screens with completely different content and being able to put them in the same theme.
• Solved complex design problems and added different contents and features in one screen, also keeping the design simple and user friendly.
• Validated and set up the platform navigation structure and information hierarchy.
