Background
Animetics was another project that I worked on at System Plus.
Animetics is a service-providing company that specializes in Avian DNA sexing and Avian disease testing for pet birds.
The target audience of this project is pet bird owners, particularly in Australia.
My Role
I revamped their existing web app and admin panel.
Responsibilities
- High-fidelity mockups
- High-fidelity prototyping
- Iterating on designs
Problem
As the app's users were mostly elderly people and quite comfortable with the existing system, they might be reluctant to switch to and learn a new system.
Goal
Modify the existing app and admin panel to improve the overall UX of the system.
Framework Used
The framework used for this project was lean UX.
Research
The existing system had poor and confusing UX.
User Requirements
Simplify the order placing process and admin panel work flows.
Web App
The web app consisted of three main flows; registration, placing an order and ordering kits only.
Registration Flow
The registration flow was improved by adding visuals and some information about the platform on the login screen. Users could also signup easily via their google accounts now.
BEFORE
AFTER
Place an Order
In the old system, the process of placing an order was very messy. There was no proper architecture and the UI elements such as buttons, pagination was poorly placed.
Later, the design had a cleaner look and there was a proper hierarchy and placement of the UI elements.
BEFORE
AFTER
Order Collection Kits
In the previous flow, the users didn't know that they could buy kits separately until they reached the later steps in the process. That is because there was no button for only buying kits in the beginning.
Later, this option was added to the navigation bar making it prominent. This way users could know that they can order the kits separately.
BEFORE
AFTER
Design Mockups
After signing in, the user would be taken to ‘My Orders’. It had two different views
- Orders list view (contains all the orders placed by the user)
- Samples list view (contains all the samples within the orders placed by the user)
While placing an order, the user had the option of adding the DNA collection kits which are sold separately too.
And instead of adding one sample at a time, the user could simply upload a file containing all the samples with their details. This function is called bulk upload.
Admin Panel
Dashbaord
The purpose of the admin panel was to have a setup where the admin could manage everything easily. On the admin dashboard, there were all the important figures and an orange icon along those that needed the admin’s attention.
Client’s Management
The admin can see all the users with their information and order details under the client management.
Products Requested
Products referred to the DNA collection kits and printed certificates (of a sample) requested by the user. The admin could see products that needed to be sent out under the pending filter. After sending them out, the admin would change the status of those products to posted by clicking on the ‘mark as posted’ button.
Sample Summary
This contained the details about all the samples within the orders from all the users. The admin could see which samples need to be processed by applying the filter ‘to process’.
Once the results are ready, the admin would upload them using the ‘upload results’ functionality.
Order Summary
This has the details of all the orders placed on the web app. When the submitted filter is applied, the admin could change the status of an order to received by clicking on the ‘mark as received’ button.
By applying the received filter, the admin sees a ‘mark as finalized’ button which changes the status of the order from received to finalized.
Manual Orders
For the users still submitting their orders manually, the admin had the option of entering their order (with details) in the system through this option.
The first step is uploading the client’s details and the rest of the process is the same as placing the order in the web app. The admin also had the option of bulk uploading the order details in step 2.
Transactions
Admin can see the details of all the transactions here.
Impact
Animetics currently has over 500 active users locally and globally who use the platform to test bird DNA for disease and sexing.
+
Users
+
samples collected
+
satisfied clients
What I learned?
During this project, I learned that give the users what they want. Also, it is good to follow the conventions to design a UX that will get the job done.
