Based on the quantitive data, users frequently bounced out on the 1st or 2nd page (sign up & purchase processes), which caused high jump-out rate (near 76%).

‍

Goal

Encourage users to complete the registration and purchase process. Provide an intuitive and easy-to-use experience to let users move forward through all the steps. This ultimately increases the company’s business and revenue.

‍

Review of previous design

‍

‍

‍

Pain Points Takeaway

Users were easily distracted and had difficulties completing the actions they should make in the process.

Final Iteration on Hi-fidelity UI &Interaction Design

When I designed the visual system and layouts, the wireframe was also iterated with more new ideas along the way.

UI Flow and Design Spec for developer

‍

1. Get started

1. Only remains BlueMeg’s icon and login icon on the Nav bar to make users take more focus on the page. Further, when users click the BlueMeg's icon for checking the trust points, it shall open by a new page to make sure their filings would not disappear and make users get back to accomplish the sign-up process.
2. The abstract banner with vibrant blue and green-blue makes the screen of forms become vivid, attractive and comfortable. At the meantime, it also makes users can get more focus on the page and more willing to fill the forms.
3. The white words of BlugMeg with slight shadows for background makes users be influenced by the brand unconsciously and also make the screen noble and professional.
4. The progress bar lets users clearly recognize the whole process and their current stage and know it would not take them too much time for signup.
5. The ‘trust points’ setting on the top of the page directly indecates what can users gain after the process to make users have more motivation to conduct. Instead of using icon or graphics, I chose graphic labels to highlight the benefits, since it shall not overceed the importance of the selection session.
6. Use icons and straght languages for ‘call to action’ to let users easily recognize what’s the page for and what should they do in this page.
7. The select part of users' company type is the first priority for this page, so I use icons with gradual colors to catch their eyes and different symbols of the icon can let them recognize the meaning of the item easier. When users arrow hovered the item, the shadow would be darker and deeper to imply they can click on it and choose it directly.
8. The part of the multiple payment methods shows on the landing page to make users have no worry on payment and get more willing to continue the process.
9. The claim of rights and Terms & Conditions usually set on the footer, since the importance is less relevant than other elements. The chatbot would pop-up when the user clicks it.

‍

2. Select Country

10. The top of the select form appears back button to make the users can modify or check their previous fillings. As for the progress bar, when the page accomplished, it would indicate an arrow icon to let the users know the page has been done.
11. For user’s better understanding and attracting, I enhance the selecting jurisdiction part with high-quality pictures, flags, and icons to make them get more desire to choose the one they need.
12. When the users' preferable jurisdiction is not on the list, they can simply click the 'ADD' icon or the sentence to provide feedback. When clicking, the chatbot would pop-up or the typing column would show right on the page.

‍

3. Order Form

14. Prioritizing the company name section to remind users their business can be quick start with filling the name on the website. Also, the name checking function of Singapore's form can be highlighted in the first section. Further, for letting each stage can be separated, I clarify the layout with numeral labels and gradient icons to make people simply understand what should they do.
15. It displays 'have chosen' for the required products with darker blue icons to let users clearly know they are must-include items. The gradient icons make each section be divided and get users’ attraction.
16. Since the company secretary is the most important section of this page, I designed a simple and clear comparable layout for the different packages. Also, I highlight the free including with accent colors and thoughtful typography.
17. If users want to know more about the packages of the company secretary, they can easily press the icon to a new page for detail information.
18. The part of the optional items, the background of the card becomes light green with a dark shadow when users select the item. At the meantime, the icon becomes energetic blue to make users comprehend their chosen product. As for the items included drop-down list, it directly shows on the card would be better for users recognition.
19. When users are requested to provide their personal information, they usually worried about security. Therefore, I add guarantees to gain their trusts.
20. If the ordered items could be summarized, it will be useful and beneficial for users. The floating card for order summary assists users to check their order. It simply indicates the functions of changing user-type, nation and entering the coupon number. Also, it marks the prices of the one-time fee, annual fee, and total cost with a clear layout.

‍

4. Checkout

21. As users are asked for checkout, they want to make sure the exact products of their order. Accordingly, a detailed order summary should provide with the payment on the same page.
22. The payment methods display in a clear way of selecting with graphics for users' convenience. The payment details also indicate with a physical payment graphic design to make users ensure their payment method and fill with correct information.