CRGH Web Design

Rebranding and Web Design for the prestigious fertility clinic in London
visit site

Client

Centre for Reproductive and Genetic Health

Role

Lead UI and Brand Designer

Tools

Figma, Wordpress

WIDER Team

Alex Curtis (Lead PM), Dornu Lee (PM), Will Samuel (Dev)

DISCOVERY PHASE

The Brief

Mortgage Brain is a leading software provider in the Mortgage Sector. They were keen to improve their website performance and overall user experience by redesigning their outdated website.

The idea was to help them stand out from their competitors in the SaaS industry and also make the brand relevant to its more technologically progressive audiences.

DEFINING PHASE

UX Research and User Flow

A key aspect made clear from user research was the need to reorganise the website’s structure and user flow from the ground up to cater to their different user personas: Intermediaries, Lenders, Partners. This led to a meticulous sitemap refinement and a dedicated focus on facilitating seamless navigation from the homepage to specialised software for each key persona.

After this process it became evident that the homepage needed to serve as a primary segmentation hub, efficiently guiding users to personalised content. The business wanted to make sure it was clear to the user they knew exactly who they were speaking to, so this led to the additional segmentation module strategically incorporated into the Hero section.

DEVELOPING PHASE

Fresh Digital Identity

During meetings with the client, I led all the design work and coordinated with their internal branding team to revamp their digital identity. I created animations and fresh components so that their digital identity could be seamlessly integrated with their existing brand presence.

The ultimate goal was to make them stand out from their competitors in terms of offerings and know-how.

DISCOVERY PHASE

The Brief

Whybrow provides expert consultancy for commercial properties to local and national companies. I worked on the redesign of their website as well as a refreshing brand identity that would better align with their ambitious growth plan and forward thinking efforts.

DEFINING PHASE

A fresh logo for a new approach

The initial directive for the new logo started as a simple redesign but evolved into a complete rebrand of their identity with a more bold presence and vibrant look.

I started from the core concepts of trustworthiness and professionalism, to expand the colour palette and include these values. Additionally, another main aspect of the redesign focused on infusing meaning into the symbol, which now represents the diverse sets of "properties" they work with.

DEVELOPING PHASE

User persona and UI prototypes

An initial and key aspect of the UX was to redesign the homepage to cater for their main 6 personas and to facilitate the users navigability through more effective user flows.

In addition it was crucial for their website to include a functional property search. so I completely redesigned the existing search function to include filters and sorting options as well as property details.

A lot of details were translated from the brand identity to the digital platform to create a comprehensive brand identity.

Conclusion

The result was a complete refresh that transformed the Brand’s digital presence to make them relevant, in line with their recent acquisition as part of the wider group Beresfords.

DISCOVERY PHASE

The Brief

CRGH is one of the most famous and successful fertility clinics in London and internationally. The company needed a complete redesign of its website and its digital identity to make it more relevant in the competitive world of healthcare. The brand and website needed to reflect the high-quality fertility treatments provided at CRGH.

A lot of work has been done during the Discovery Phase to considerably improve the existing website user journey, which was above all else a clear weakness.

We researched different target personas to create a more personalised user flow and experience. At the end of the process, we identified three main categories: Heterosexual Couples, Single Patients, and Same-Sex Couples.

DELIVERY PHASE

Cohesive Brand Identity

Refreshing CRGH's brand identity was a journey of evolution rather than revolution. I retained the clinic's established trust factors while infusing a contemporary and digital flair. The new brand identity symbolised both the clinic's rich history and its commitment to progressive, patient-centered care.

The rebranding included social assets, wayfinding, and internal documents. As the lead designer, I had meetings with the stakeholders to understand their needs and I worked on the design of their exhibition stalls and clinic wayfinding. I also worked alongside our internal marketing team to create social media assets for A/B testing as well as preparing presentations and internal documents for the whole company at CRGH.

DISCOVERY and delivery PHASE

Inclusive UI Design

During this project, I was responsible for the whole digital design process, beginning with the creation of low-fidelity wireframes and user flows. This initial phase laid the foundation for a meticulously crafted user experience. Subsequently, I progressed to the high-fidelity prototypes, ensuring that each design element was not only aesthetically refined but also aligned with the new aesthetic, creating a cohesive brand.

Beyond the design, my role extended to the oversight of the development handover, ensuring seamless communication between the design and the development team. This supervisory function encompassed a thorough design quality assurance (QA) evaluation of the staging site.

Outstanding results

Thanks to the work done on strengthening the company’s digital and brand presence, CRGH has already seen a dramatic increase in website traffic and booked appointments.

The personalised user journeys have proven to be an instrumental catalyst in the creation of precisely targeted marketing campaigns, amplifying CRGH's ability to strategically promote its services tailored to each specific user persona.

DISCOVERY PHASE

The Brief

Action Aid approached us with the idea of creating a dynamic online community where donors could become members for a small monthly fee. This community would be filled with inspiring content from women worldwide, sharing stories, videos, and webinars directly from the field.

This is an innovative idea with the goal of generating consistent revenue, with the money raised then distributed to 767 women’s collectives around the world by Action Aid.

The scope was to build an MVP to help test this idea as a proof of concept and build a case for developing the product in the next year.

DEFINING PHASE

UX Research and User Flow

The team started to work on research materials gathered through the Head of Innovation at ActionAid during initial qualitative user interviews in two countries. Following are some key insights on the user research:

  • 70% of interviewed were likely to sign up for consistent donations
  • The most popular form of subscription was Monthly
  • Donators wanted to be part of an online community
  • Digital content like webinars and impactful stories were enough to keep the user interested in the product
  • There was no evidence of a difference between men and women
  • The target age group spanned 18-29, and 30-40

DEVELOPING PHASE

UI Design to inspire a community of amazing people

We gathered all our findings from the discovery phase and I led a quick “Look and Feel” session with the group and the main stakeholder. The session was based on the assumption of the user persona and had the primary goal of giving us direction on some of the main design elements. For example the use of Typography, Imagery, Colours.

We also took into consideration the design relationship between this product and Action Aid Design System.

Ongoing User Interviews

Following the completion of high-fidelity designs, the subsequent phase involved content creation and translation into four distinct languages—Spanish, English (USA), Portuguese (Brazil), and Swedish. This multi-language approach facilitated the execution of user interviews across different test countries.

Presently, the project has advanced to the Interview phase, focusing on the validation of the conceptual framework. This evaluation aims to determine the project's potential for progression into design iterations, development stages, financial model refinement, and eventual implementation.

DISCOVERY PHASE

The Brief

INVICII is an investment consultancy company that helps streamline the sale and purchase of properties. It makes it easier for users to build their own portfolio by using their clever calculators that helps them to make more informative decisions on their investments.

The website was at a very initial stage and the brief was straightforward, we needed to improve the user flow of potential investors and navigability. Focusing on getting the users more easily to the mortgage calculators as well as create a personalised Account section.

DISCOVERY PHASE

User Interview Highlights

After our user interviews to people at different stages of buying their properties, we easily gathered all the data and analysed the main pain points. The investment process can be very complicated and daunting, above all for novice investors or first time buyers, most of the tools are difficult to understand and makes it even more confusing.

Moreover there was a big opportunity missed on the website, that was to create a dashboard and be able to save the properties that interest you so that you could compare them to other investments.

It was clear after the interviews that the ideal user persona of the app and calculators was a novice buy-to-let investor. Someone that would have done some investments before (for example their pension) but would be the first time trying to invest in properties. We focused on:
- Improving the quality of and access to the information the user needs when buying-to-let

- Minimisingthe amount of data which is required to make the calculation process quicker, more accessible and useful

- Creating an end to the disjointed user flow, hence the option to add the Dashboard and Account section

DISCOVERY and delivery PHASE

Wireframing and Prototyping

Filter Users

We simplified the home page flow to focus on the easiest way to reach the calculators and signup plans. Some easy questions filter the users according to different paths based on the level of investment skills.

Different Calculators

We differentiated the information shown on each calculator depending on the persona type:
- the First Time buyers have a clearer visual, charts and less variables,
- the more Experience investors instead have the Complete calculator with results panel pinned to the side of the users screen. We created a more compact layout so that the user could see the results change in real time and in accordance with the variables.

Access to results

The additional Dashboard and Favourites section was created to encourage users to sign up and subscribe to the plans. This also allows them to save, print and share the results with potential agencies or advisors. It's possible to save your researches and add information like location, price, number of bedrooms.

It also allows to compare the Return Of Investment of potential properties and empower the user to make more informed decisions.

Usability Testings

We were able to test on a small group of users to receive initial feedbacks. In general they found the experience easy and straightforward. They didn't get stuck when asked to perform the task of using the Buy-to-Let calculator and save their favourites for emailing to an agent.

They found pretty useful the initial filtering section with questions that was guiding them to the intended tool they wanted to use.

DISCOVER

Brief

My team and I were tasked to build a dashboard for businesses of a brand new Booking App. Their Unique Selling Point is to integrate group bookings and social media as part of the user experience. The main goal is to help visibility of small businesses and to help schools make use of their unused facilities.
The client approached our team with a loose brief and allowed us quite a lot of freedom in deciding the layout and flow of the whole dashboard.
They implemented a basic MVP that was used on some test users and we had access to initial feedbacks.

User Interviews Highlights

In addition to the feedbacks provided by the client, we decided to interview potential users from different businesses, small local leisure centres, beauty salon and dental practices as well as various local schools to understand their needs and pain points in regards of booking.

This quickly made us realise the differences in their approach and needs in terms of documentation required, but at the same time we found that all businesses had a common goal; make managing their booking easier, improve a direct communication between the business and their customers and make payment efficient for both groups or individuals.

DEFINE

Persona and Experience Mapping

Local School - Elementary School Admin

"I need to fill the school facilities with extracurricular activities"
NEEDSSimple and easy to use interface that will allow them to track all their bookings and reach out directly to customers about info and documents needed before attending.
GOALSBe able to promote their availability online and to make managing all of their booking easier

PAIN POINTSAs a state school they find it difficult to communicate with customers and get the right documents/insurance.
Internally it's also difficult to organise supervisors when a facility is booked

Small Business - Owner of Beauty & Dental Practice

"I need to reach my customer on a more personal level"
NEEDSEasy to use dashboard with information about their bookings
Be able to fill in all the available slots
Easy record of their booking rates and feedbacks
GOALS
Be able to connect directly with their customers
To make managing group sessions easier

PAIN POINTS
As a small company they had issue promoting on Social Media and directly connect with customers.
They are using lots of platform to organise their bookings and communication with customers.

User Flow

Our research expanded in a deep analysis of the actual MVP used by some of the customers.
It was soon clear what were the main pain points as well as the opportunities that we could implement.

The flow felt confusing and disconnected. The naming of buttons and call to action was repeated with different meaning. It wasn't clear how a user could book an activity, change an activity date or time and see the status of the booking.

We tackled all the pain points focusing on three different flows: Onboarding and adding facilities, add or change bookings and overview or dashboard flow.

CALENDAR

Improve the design for an easier way of adding and changing bookings.
Keep everything in one place and add easy call to actions.
Add a list view and icons to see and easily search by the status of the booking

FACILITY

We separated the adding new facility flow to the booking flow with the idea in mind that this app will be used by users with different roles and permissions in the business

DASHBOARD

More control and visibility on booking rates and availabilities.
Added feedbacks section

DEVELOP

Wireframing and Prototyping

I devised the wireframes to get some quick feedback on the organisation and the flow from the client. Then I started adding the brand identity colour and implemented a basic Design System to ease the collaboration with my teammate.
I focused on developing the Calendar flow and the chat section, below a break down of each element.

We decided to prioritise a website format design, because all of the users (100%) would use primarily a computer to look and edit their bookings. Only 20% of users said that it would also be beneficial having a mobile app, but as an additional feature and when looking at bookings on the fly.

Calendar Flow

Our main focus was the Calendar monthly view, we decided to make it the primary screen you would see when accessing the platform. The main flow we wanted to make as easy as possible was adding a manual booking, so we created a clear call to action that would always be present in the Side Menu.
The flow at this point was very disconnected and in order to improve clarity of all bookings and their status, we added a list on the side that appears as soon as you click on the date. From here you would then be able to edit the booking.

This was devised with the user in mind and understanding of what is their main tasks and needs when using the app.

Onboarding Flow

The onboarding flow is an integral part of the business app, so we spent time to devise a system that could include the personas we defined. From our initial research we understood that small businesses and schools have different priorities and requirements in regards of bookings, so we thought it was important to give the users as much flexibility as possible. A filter would take you to different sections that will have slightly different questions and information to fill out.

Dashboard

In the MVP this section included essentially just an overview of the revenue and earnings through the app. We thought it was important to expand it and reveal here all the highlights related to each facility as well. It shows the up and coming bookings for today's date and the related chat's mentions. We also added a feedback system that would be important to monitor the customer satisfaction and keep an eye on what needs to be improved.

Working Prototype

Results and takeaways

We are still working with the client to develop further the whole system. At the moment we are undergoing some user testings of this first prototype with the existing users.
The next step would be to start the process for the Social Media aspect of the App, from research to ideation, iteration and prototype . The client confirmed that this process has been confirmed and we would be able to test it on more users that have recently signed up and are going to use the MVP in the future.

Back to top

Discover
Define
Develop

Other Projects