UOB Retail Website Redesign

UOB Design Challenge

Untitled Writer
Jul 30, 2017 · 4 min read

Design Challenge

Redesign UOB Retail website for customers, aim is to make it highly usable, engaging and easy to maneuver by;

• Organizing and catergorizing information into a structured manner

• Applying hierarchy to content

• Create a navigation paradigm that will be intuitive to use Making contextual content, engaging and exciting

Design a responsive solution on the website that will allow customers to quickly navigate and find the information they need.

*Design Challenge was conducted with limited information and understanding about UOB business, in so the web revamp design challenge will focus mainly on fulfilling user ease of accessing information while using the website using existing content. Methodologies used during this challenge is Heuristic Evaluation, Information Architecture (Hierarchy of Information, Competitor Analysis), Wireframe.


Discover (Understanding)

Ideal process of UOB website redesign would be conducting a ideation workshop engaging stakeholders involved to finesse and understand what they are seeking to achieve from the website revamp along understand the Proto Persona they are thinking of along ensure all stakeholders are of the agreement in the results they are looking to achieve.

Afterwhich conducting user interviews and contextual inquiries, we are better able to observe along understand how the user behave, interact the pain points, behaviours, pleasure and context in relation to the situation or environment leading up to the various decisions or experience they have while finding information about UOB offerings and products.

From the findings and data gathered a Persona could be created using affinity mapping process a distillation of information observed during contextual inquiry along user interviews that leads up to the creation of the Persona that provides better context to why the website revamp should be done along the design solution.


A Competitor analysis (DBS and OCBC) two main well known competitors in the market providing similar service as UOB, discovering their current site flow and hierarchy of information how it is being relay to users discovering it’s position in the market;

Along Information Architecture of the current website and relevant pages assist in further informing the current state of the website sitemap. Opening opportunities in uncovering insights that could lead to a better robust revamp Information Architecture. Such as the hierarchy of information priority along the importance of certain products that will affect the overall user flow of the website.


A Heuristic Evaluation of the current website was conducted to find potential issues users face could face while using the website.

Heuristic Evaluation of current UOB Retail website.

Define (Insights)

Base on the findings of the methodology uncovered using Heuristic Evaluation and Information Architecture (methodologies available and usable for design challenge due to the lack of resource and time limitation), insights uncovered was there is inconsistency in the website design style, such as certain pages the typeface used by the global navigation would be different, the website is not mobile responsive nor adaptive for user to view on mobile or not providing enough affordance to the user in knowing what each links or feature represents.

With a flat hierarchy of information resulting in information overload for the users, as their experience is not curated, resulting in the UOB website becoming just a informative website providing vast information at the glance which at times may not be what the user is looking for.


Design + Develop (Ideate + Prototype)

With the various insights uncovered, it‘s easier to focus on the potential opportunities on h0w the website could be redesign and backing as to why it is redesign in such manner.

Propose redesign of the homepage would be less cluttered, with the sticky side menu removed and replaced with a sticky floating global navigation. The need to scroll longer is now reduced in desktop.

Better affordance is implemented assisting user in knowing the page they are at, and while selecting various mega menu items secondary hover state will assist in informing users what they have selected.

“Login To” has been shifted to become part of the global navigation bar, but has been given a red background to assist user to quickly notice the function. Along a search function is introduced to the website, allowing users to custom search specific product features in mind.


Conclusion

With the redesign UOB retail website, it would potentially speed up transaction between user and website as there is better affordance in navigating the website compared to prior due to various features and elements being incorporated into the website improving site flow.

Untitled Writer

Written by

A designer learning to design again

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade