Goal
Optimize web page consistency and focus on minimalist design and web structure to help users find information easily.
A smoother and more consistent investing experience for younger invest
Needs to consider many category requests and find the best UI solution to suit over 300 page.
✦ Optimizing consistency and page structure, it increased the critical business metrics and the user engagement.
Product Designer - UI. Prototype
MasterLink Securities is a Top 5 financial investment firm in Taiwan, younger market is one of the high priority markets as the company strategy.
However, MasterLink Securities needs to redesign their official site. And following the trend that the mobile user increase a lot, it's should be considered to add the mobile version to this project. Another thing is It hasn't been optimized for the official site in terms of UI and UX since it has built.
Based on a youth-focused strategy, the style of the website should be closer to them. Making investment info easier to find and quickly open investment account.
We found that various components or buttons are actually the same function. Different departments maintain the entire website. So the site hierarchy are different, and another thing is everyone has their own function naming and even design styles.
We decide to put the open account button under the header, In order to increase new accounts. Near the button is a trading area including online and Mobile users to link to investment page.
There are 300 more pages on this website, and we found many components with the same function. So using the same style for the same function is the primary goal at first.
We redesigned the tab visual to make it more neat and easily select, we created a clearer shape and more spaces to differentiate selection. Also, we consider the text length and number of the tab, new design will increase more flexibility.
We redesigned the table visual to make it more readable, not only created a suit text size for the title and contents, and more spaces between every lines.
As mentioned earlier, the consistency of components is very helpful for useable. However, we decide to make all existing components more visible and intuitive. We will start with desktop version but also consider RWD work on the various screen.
After we've finished redesigning the components, it's time to put them on the page. Besides ensuring style, and also harmony of the whole page.
In this example, it's a Q&A page. We can see the current page first section of right side had reduced 3 tasks to 1, user only needs to type keywords in the box to do the search.
They can also search in another way. Choose the question category on the left list, and then select second layer topic with round buttons on the right side second section. We also simplify the Q&A list info to help users focus on the main title.
In this example, it's a investment info chart which is automatically displayed by the system. We not only add accesskey but also make distinct calls to action and minimal and clear user interfa ce (UI).
Hence to help the ones with low vision, hearing impairments, or any other impairment. Accessibility allows all people to interact and use interfaces.
.png)
In this example, it's an accessible interface design page. We not only add accesskey but also make distinct calls to action and minimal and clear user interface (UI).
Hence to help the ones with low vision, hearing impairments, or any other impairment. Accessibility allows all people to interact and use interfaces.
In this example, the original first title has revised because of the new sitemap.
Another thing is second content section have more optimize which includes add number before every step to guide visual flow, rearrange the letter spacing, change the button location. Overall, the purpose is to help user easy to read and do the call to action.
Coming soon!!!
Coming soon!!!
© Emily Lin 2022
