Logo
Loading

myGC App Revamp

Product, UI, UX, Visual

Background

The myGC web app has been around since the beginning of 2017. It was built for patients to bridge the gap between them and their doctors. The app was built by the company that also built the doctors’ software. It allowed them to book appointments electronically directly into the doctor’s diary, keep track of their medical history, plus a multitude other functions.

I worked on the visual style of this web application at the onset, as well as the social media marketing campaign and other relevant marketing material (logo, brand, etc.). Due to increased project access complexity and other more time-consuming projects, I had to stop working on the project altogether. The app development, design choices and UX got taken over by one developer and was severely neglected (in my opinion).

Another problematic aspect of this app was the fact that it did not cost anything for the users to use. Thus, any development done on this app didn’t bring in any profit and was viewed more as a “expense” and a “waste of time” than an “investment”.

 

The Problem

The initial myGC app was built for quick release into the market and bugs were fixed quickly without real UX thought. It was not scalable, and due to the rapid growth of the userbase, it was on the brink of collapsing in March 2020. The user interface and process flows of the functions were critically outdated and problems were just patched, not properly redesigned and tested with real users.

A big new feature had to be added, but could not be added due to the fragility of the app and had to be redeveloped from scratch. It was here that management decided to assign a small team to start with the revamp project.

Other than the obvious software weakness and outdated interface, it had abysmal usability due to the lack of a proper product/UI/UX designer, project manager and dedicated team working on the app.

 

Old app: Dashboard (mobile)

 

Old app: My Profile – Main Member (mobile)

 

Old app: My Doctor – make a booking (mobile)

 

Old app: Dashboard (desktop)

Old app: Dashboard (desktop)

 

My Role(s) & Tools Used

I was the lead (and mostly sole) visual, product, UI and UX designer. I worked with the project manager, the business owner, the head of development manager, the development’s team lead, the documentation/marketing team, as well as developers (2 at the start of the project, which grew to the full development team once the production started).

  • Adobe Illustrator (logo redesign, illustrations)
  • Adobe XD (UI design)
  • Zeplin.io (for sharing UI designs in detail with team/developers)
  • Various other online collaboration tools (excalidraw.com, Google Docs)
  • Extensive research for inspiration on dribbble.com and style guidance on https://material.io

The Process

I started off redesigning the logo and using colours from the mother company’s brand (colours specifically used when talking about the “patient portal”).

Logo redesign (moodboard)

Logo redesign (moodboard)

Then I made a list of all the various sections, functions and processes of the current app and revised a better and more intuitive information architecture for the new app.

 

Improved information architecture

Improved information architecture (excalidraw.com collaboration)

I also researched about who our current users are – people who have used, or are still using, the app. These numbers I got from the myGC website’s Google Analytics over the past year (which was when it really boomed). From this solid baseline, I created three personas to guide our processes and design decisions.

Persona #1

Persona #1 (of 3)

After all the groundwork was laid (functions, personas & app flow), the hard work started. We worked in iterations: I created some wireframes, we had a meeting about these and talked through the process flow, and then I went and applied the changes to high-fidelity screen designs (view all 200+ screen designs here). Then we’d have a few more discussions about each of the more complicated function processes to iron-out wrinkles and make sure everyone were on the same page.

 

Initial wireframes

Initial wireframes

 

When most of the UI designs were done, the development team started full time on the development (production phase).

The project is still in the production phase but will soon go into the testing phase.

 

Design Rationale

For me, the base design rationale was this: anything would be an improvement. So while improving it, make it really count.

It was decided before the onset of the revamp, that we were going to use the Material Design system. Since the developers would use the Material Angular framework (and components), I aimed to visually (and functionally) stick as close as possible to both the Material Design style and components, as well as the Angular components. This I did while all the while focusing on creating a unique and clean visual style.

 

Logged out: Search Results

Logged out: Search Results

 

Logged out: Search Results

Dashboard

 

My Account

My Account

 

Logged out: Search Results

Logged out: Search Results

 

Dashboard (desktop)

Dashboard (desktop)

 

Challenges

  1. It was quite difficult working with some management members. Due to the perfect time in the current market, as well as the instability of the live app, they wanted to get the app revamp out as soon as possible. They are developers themselves and do not believe in the value of a good (and visually appealing) interface, or the value of prototyping and user testing before starting serious development. It was a constant struggle trying to incorporate the Design Thinking principles and lobbying for the actual user, and not just the business goals they had in mind.
  2. Extremely tight development deadlines were set (and missed) due to the severe scope of the project. Because of this, proper UX processes could not always be followed and UI screen designs were pumped out at a high rate. Crucial steps, like prototyping and user testing, was neglected. The aim is currently to do some “side” user testing before the launch of the revamped app to at least test the design decisions. It’s a bit after the fact, but due to management’s impatience, I had no other choice.
  3. I was (and still am) solely responsible for the UI style. Creating 200+ screen designs were quite laborious. I also created an app launch campaign strategy (social media, email, etc.) as well as the visual material for these.

 

Lessons Learnt

Real-life projects do not always go according to a nice UX process, especially if the client does not really value your design perspective.

Keep fighting for the user and always see the app from their perspective – even if you could not really do any real user testing due to time constraints.

 

The Outcome

The app is still in the production phase so there is no actual outcome as of yet. Please also note that this app’s intellectual property is under strict copyright.

This site is web cookie free and GDPR/POPIA compliant. Now go enjoy a real-life cookie!