website maker

Bupa UK 

Function: User interface designer      Platform: Web   Visit site: Bupa UK home

The project 

The existing solution at the time, was under performing. Analytical data showed a high bounce rate and feedback from the call center staff was that customers often complained about not being able to locate information on the site. There were inconsistencies as some pages within health assessment and care services subsections were mobile friendly while others were not. Overall, this could have a detrimental effect on brand reputation so the digital team was charged with the task of proposition a new design solution (based on Microsoft SharePoint Server 2016 platform used across the business). 

Research and user engagement

Extensive user research was performed by the user experience teams, Deliverables were shared in numerous meeting as progress was being made. They include quantitative and qualitative data from passive observation of users, user interviews, analytical statistics review and flows and scenario tests, etc.  We eventually had an accord regarding the list of requirements. The project was going to go beyond fixing known issue. It will be an overhaul to reposition the brand as a reputable health provider online to do business with. The comprehensive list of (functional and non-functional) requirements included these items below.

User Requirements

- Users need to be reassured that they have arrived at a credible and professional site that they can trust

- Users require a sensible intuitive navigation that can take them directly where the need to go.

- Users require a way to get in contact if they wish, and should find this information easily available.

- Users with an account need to be identifiable upon returning to the site and given service based on history of their activity.   

Business requirements

- The website should make a great first impression (reliability, speciality, trust worthy)

- Make it easy for users to find information and complete tasks.

- Support the business model on the site.

Members should enjoy personalised experience (also provide targeted contents to logged in users)

- Provide the users ways to support us in their network.

- Standardize a smooth experience across all services that will encourage users to return.

The design process

The business had its own digital design policies which were based on best practice. As the Visual/UI designer I strictly adhered to this and ensured the teams compliance too, I was heavily involved in concept design phase and played an important role in bringing the concepts to life on a web page.  I ensured a consistent visual hierarchy in the pages with my simplistic flow of colour based on the style guide. As they navigate through the pages, users would be made to feel at ease with a sense of trust reliability. I worked with the experience designers to implement a well laid-out navigation that is tucked away when not required by the user. I used a combination of text and backgrounds colours that will contrast very well for visibility with call to action buttons that used bold texts and thick borders for clarity.

based on previous analytics data, the website received over 20,000 hits daily. With such a large community of users, and being a healthcare provider, it’s a fact that there will be need additional assistance with the interface. Hence I ensured that the web pages provided instant feedback as to what’s going on in an intuitive manner. using animated buttons and hover effects. (This may be regarded as basic or common sense but is absolutely crucial for accessibility) The business had a well-established brand name as a top healthcare provider and this needed to reflect in the quality of its website. and i ensured that it did.   

Bringing it all together with code

After user acceptance testing was completed and signed off, development commenced. I was required to assist the development team. (mainly consisting of Microsoft certified SharePoint developers) My responsibility was to help with preparing responsive HTML5 and CSS code for the page contents. My script was then inserted into SharePoint page layouts (which are basically templates). A single page layout was used for the homepage, while top categories like healthcare, intermediaries and business pages shared a separate template, and nearest-Bupa-facility pages shared another template, etc. This was very good experience for me to brush-up my scripting skills as i didn't frequently get tasked with writing code. I was thrilled with the opportunity. I followed best practice approach ensuring compliance both with the business coding policy as well as common best practice approach. Although i shared this task with another colleague, I worked independently on my own initiative and completed the pages efficiently. It was beneficial because I had been involved in designing the look and feel. This meant I could take even greater ownership of my work, which is now shared with the developers. I implemented Bootstrap4. Its 12 column grid approach ensured the page's wrap correctly for mobile and tablet, I also used media queries to allow content rendering to adapt to conditions such as screen resolution. I collaborated with the developers through-out and together we prepared an efficient user friendly solution ready for testing and release to our production server.


I Enjoyed collaborating and sharing knowledge within a multi-discipline team. Where I was able to scope down visual ideas into a workable concept that resulted in a solution that works for the user.