%20no%20frame.png){kind=small}
Bug-A-Bye Baby Mobile App
Personal Project, 2020
This personal project is a continuation of the Bug-A-Bye UX Design Project. The aforementioned project was about creating an infant apparel website that facilitates a one-of-a-kind home-fitting and delivery service. However after rethinking the whole user experience, I felt that there are some shortcomings to the use of a website alone. I therefore set about designing a mobile app to complement the website.
My design journey for this project are covered in the sections below:
The User Flow
The website serves to fulfil the following steps in the main user flow - create user account / log in, product browsing (with filter and sorting options), adding items to shopping cart, check out, choosing type of delivery service (home fitting vs standard), choosing the time and date for the home fitting, providing delivery and payment details, then log out. After the home fitting session, user will retrieve the order, and select the items she / he wants to purchase, and confirm payment.
The Issue
Whilst a user can accomplish all the steps before the home fitting step through a website on a computer without affecting their shopping experience, that may not be so at the purchase confirmation step after the fitting session. As this step should be done before the delivery personnel departs, efficiency is key.
It will be time-consuming and troublesome if the customer has to go to the website (computer or mobile), log into their account, find their order before they can complete this step. This consideration is all the more important when the customers are parents of young children.
App-solutely
Having a mobile app will help overcome the above issue.
A mobile app will allow customers to quickly access information relating to their order, and provides more flexibility in the initial browsing and ordering process.
One important feature of the app is the "My Order" menu option, where the customer can retrieve their order details by simply entering their order number without the need to log into their account. The order number would have been provided to them after the initial ordering stage, and could also be obtained from the delivery personnel during the fitting session.
Wireframing
Low fidelity wireframes for the app screens were done using pencil and paper, as I find it easier to help me think through the functionalities and layouts required and make changes during the process.
My focus was to produce layouts that will allow the content on the full website to be replicated, but optimised for viewing on a mobile device. In this case, I used an iPhone X template.
Prototyping
A high fidelity prototype was created using Adobe XD, based on the wireframes shown above.
UI Design Considerations
A number of considerations have been made in the UI of the app design. I have highlighted some of those below, especially those ones that are specific to the mobile app as opposed to the full website.
1
2
1. Home Screen
-
Superimposing text on images, ensuring text legibility while maintaining visual interest.
-
Use of the (grey) sliding banner to highlight call to action messages.
2. Menu
-
The side menu is activated by tapping on the hamburger menu icon. I have chosen this menu format as there are too many menu items to be shown on the home page.
-
I have placed the more commonly accessed menu items near the top, with icons to enhance visual interest.
3
3. Sign In and New Account Sign Up
-
The screens have been simplified to show only the respective social media logos instead of full name. This enhances the visual hierarchy of the screens.
-
The New Account Sign up page is accessible through a hyperlink on the Sign In screen, which in turn is accessible through the 'SIGN IN ' hyperlink on the side menu. This simplifies the user flow.
4. Individual Product Page
-
Image occupies the entire width of the screen to maximise viewing space; user can swipe on image to view other images of the product to allow economy of space.
-
Hyperlink to size guide placed next to the size options drop down, to help user make informed choices about their size choice.
-
Collapsible sub-headings to hide respective content so users can access information they are interested in without too much scrolling.
-
A "Recommended Items" section at the bottom allows users to browse similar items, which can enhance sales.
5. Delivery Method
-
Similar to other screens after check out, a back arrow is visible allowing users to return to previous steps to amend their entries.
-
The delivery methods have been split out as a separate page to highlight the features of the two options.
-
Similar to other screens after check out, the clickable button at the bottom shows what the next step is going to be.
5
4
6
6. Delivery and Payment Details
-
These forms have been split into two screens so users do not have to scroll down to complete the forms.
-
Under Delivery Details added a 'Recipient differs from Contact Person' check box, as in most cases the two would be the same.
-
A number of 'Save For Future Use' check boxes available so it can save time for users on repeat visits.
7. Order Confirmation
-
The confirmation page provides an order number which can be used later for retrieving order details.
-
Informs users other means to retrieve the order number for future use.
-
A red exclamation icon to flag the fact that the customers will not be charged until the fitting / delivery service has been provided.
-
Button to direct customers to continue browsing products and access to the menu.
7
8
8. Post-Fitting/Delivery "My Order" Screens
-
As mentioned, after the home-fitting has been done, the customer will need to confirm the items she / he wishes to purchase before the delivery personnel departs, in order for payment to be completed.
-
The customer simply has to click on "My Order" from the side menu to access the "My Order" screen.
-
By entering the order number, which can be accessed in the customer's email or from the delivery personnel, the order status can be accessed, without the need to log in.
-
The Order Status will be flagged in red colour to highlight the fact that action is required.
-
The "Confirm Purchased Items" screen has been simplified by removing check boxes. Instead, the entire product entry is clickable.
-
Each screen has a back arrow allowing user to return to the previous screen.
-
The final Payment Complete screen has access to the menu button at the top and the "Continue Shopping" button at the bottom of the screen.
Final Prototype Demo
Please see below for a demo of the final prototype.
Reflection
The design of this mobile app was very much based on my own revaluation of the full website developed for my separate UX project. Due to time constraint, I have not had a chance to do much user testing, except for feedback from close family members. Hence with more time, I would like to perform some user testing to test the usability of the app prototype.
I encountered some issues when I viewed the prototype on my mobile, one of which is the fact that some of the typefaces did not display on my mobile and were replaced by alternative typefaces. In the end I resolved this by turning one particular typeface into images. It made me appreciate the importance of choosing web-safe fonts in the design of mobile apps.
Another issue I came across was that some of the icons I downloaded from a Windows UI kit did not display properly on my mobile. I overcame this by replacing them with similar icons found in the Material Design resources.
These issues taught me the importance of testing prototypes on multiple platforms and / or devices.