3 minute read
Boat Helper App Boat owners Use cases design
Boat Helper is a mobile application that help Boat owners to find the right craftsmen for their boat related tasks. With this application owners could easily assign tasks to craftsmen and get quoted.
Requirement
Head of UX has conducted a round of discovery session with users. He has made the findings and collected all the requirements together. He has created total 16 use cases to be included in boat owners app. He was asked to create the prototypes and mockups for all the 16 uses cases. Here I'm attaching all the use cases and related screenshots
Use Case and Designs
Usecase-1 - Manage and Add Boats
Profile Page
Manage and Add Boats
Add Boat
Added Details
Add Photos
Added Pictures
Add more Images
Camera
Image View
Added Boat
After adding all the details and images of the boat, now user can see the added boat on top of the boat list. Now user can view boat info and edit the details inside the boat.
Add more Images
Camera
Image View
Processing Insights
With gathered insights, we have to improve the existing results screens to make the executives to be able to simply compared the results with Planogram. But also it has to align with business goals, so the business teams have requested to provide multiple user journey ideations which could help them signup new clients.
Ideation 1:
Providing a Planogram image layover with an on and off button.
Ideation 2:
Position tap in SKU Product Lists. This will open a pop-up corresponding to the position on the real image captured. It will show the captured position SKU compared with Planogram.
Ideation3:
A seperate Planogram tab to see the position by position SKUs of each position. With this user can shuffle between planogram and SKU tabs for comparison.
All the above ideas have been brought to the design discussion table which includes stakeholders and PMs
Idea 1
Pros: It actually shows one to one comparison directly to the user and they can directly understands to differences.
Cons: Though it shows the matching SKUs, it does not provide product information like full name and UPC which could lead to wrong suggestions. Even the details are added for Image and planogram seperately, the user journey is too difficult for a user to compare the planogram.
Result: Ruled Out
Idea 2
Pros: This provides the one on one comparison of SKUs as users simply taps each of the position details. Bringing a new pop-up on the image would directly show the comparison as well.
Cons: User does not have any planogram information unless he taps on the position. There is no clear seperation between what is matched, un matched and missing. Also there is a chance of users skipping empty spaces.
Result: Using elements of this idea
Idea 3
Pros: User can now be able to see planogram and the SKU details from the same results, which brings more value to the IR Results. Showing a position by position comparison with SKU tab will help the user.
Cons: User still cant differentiate matching, missing and misplaced products.
Result: Using elements of this idea
After several rounds of User journey presentations with teams and users, we have to conclude with the following User flow.
Wireframes
With the finalised flow from the above we have created wireframes to understand the flow and test with users.
Realogram:
Planogram:
We have conducted usability test with users. Users actually felt this more useful and improved their ability to compare both planogram and realogram. As there are sections for compliant and non-compliant, users can now concentrate directly on non-compliant SKUs and provide clear insights about the merchandizing. It took lesser time for the users to let merchandisers know the improvement of the arrangement of SKUs.
But there are still few challenges faced by users when it comes to opening a pop-up and able to see the products for smaller devices.
We have ran through couple of iterations and finalized mockups based on user feedback.
Final Designs
When user taps on next correct position user can now see 2 arrows to move both sides of next positions.
When user taps on next Invalid position user can now see 2 arrows to move both sides of next positions.
Get Aways
3
New Client Onboards
75%
Reduction of Time Taken for Sales insights
80%
Increase in planogram compliance
Conclusion
With inclusion of planogram and realogram tabs in IR Results now provides more accessibility to the user for comparing the merchandized asset with prescribed planogram. Users can clearly compare the results and supports merchandiser to increase the sales of SKU. As the tabs are completely separate from existing tabs, it is easy configure for clients to enable or disable planogram compliance.