Health Care Platform

B2C, Redesign, Mobile, Guidelines

CLIENT

WeBookCare

PRODUCT

Freelancer

PROJECT TYPE

Mobile App Redesign

ROLE

Product Designer

DURATION

Figma, Photoshop

TOOLS

3 months

About

WBC is a Healthcare SaaS platform that connects care seekers with healthcare workers, managing job searches, hiring processes, daily activities, and payroll.

Goal

Redesign the WBC mobile app by updating the UI and design system to align with the new branding. Improve the app flows based on user and market research insights.

Challenges

Understanding vendor integration to design components accurately.

It is essential to adhere strictly to branding guidelines and maintain the original concept.

Discovery

Understanding project scope, variables and opportunities

Through company research, industry, and competitor analysis, we defined the goals, problem statement, and timeline for this project.

Problem Statement

The app UI and flows are outdated, with inconsistent visual elements, font styles, and colors that do not match the new company branding.

Success Criteria

Deliver a completely redesigned mobile app based on current data, incorporating the new branding and improved flows, such as profile creation, scheduling, screening, and payroll integration. The design system, handoff, and follow-ups should be considered in the implementation phase.

Design system, handoff and follow ups should be considered in the implementation phase.

Constraints

– Restricted to using only one font family, Poppins.
– All branding colors should be used in their original versions along the app.
– Personas' names and artwork have already been defined and must be used.

Ideation

Defining a clear, user-centric solution

Heuristic Evaluation

Method to reveal unclear navigation, issues and potential opportunities to resuse or improve some component.

Competitor analysis

Was studied each feature in deep to understrand the context, usability and best practices and how we could reuse or redesign them.

Benchmark

Popular apps, competitors, and mobile trends were researched to identify the most suitable navigation styles, components and flows to create a consistent experience aligned with the best practices and native mobile guidelines.

For instance, the screening process was entirely redesigned to be clearer and more straightforward for Care Seekers and Caregivers.

Solution

Meeting requirements, improving user experience, interface, and more!

Color conception

The brand’s colors are based on the sunset, representing the change of phases, warm colors represent youth, and the dusk blue represents maturity.

Using warm colors could be challenging when they are similar to semantic colors. The first step was to break the colors in 5 scales, light to dark, and then explore the palette properly.

Initially the red color was tested on some elements and buttons, once it is the most prominent color in the palette. However, that color represents destruction, negation, or danger, and the use of it would confuse the user since it requires more attention.

I also tested small elements using yellow, orange and red, but the use of many colors only brought confusion without a real UX purpose.

The best approach was the reduction of all colors and the use of only the dusk blue to represent touch points, which will guide the user along all screens. Gradient and Red colors were used only on the initial screens.

IA and Sitemap

Once the features were defined, was explored the App from different perspectives, for those who are offering health care services (CareWorker), those who need HealthCare (CareSeeker). and then organize define the App information architecture from a users experience. Thought the Sitemap visualization was possible to understand the big picture navigation then was discussed and improved the user navigation.

Landing Page

Meeting requirements, improving user experience, interface, and more!

Mobile App

Meeting requirements, improving user experience, interface, and more!

Onboarding

Clear presentation of the target audience, health care workers and people who need health care services. Users recognize their needs since the first screen and procceed to the profile creation step by step.

Dashboard

I bring the daily tasks to the home screen to boost the user performance and reducing thetime spend in the app. Users can easily manage schedules, jobs, tasks, and check their account progress.

Custom components

Complex flows required more attention and a totally customizable approach, for instance, job applications, screening process, and time shifts. To create them, I researched trends, mobile standards and benchmark to design the best user centred solution.

Handoff and follow up

I had a close communication with developers aiming the perfect mathing app and design. Despite the guides created on figma and the presentation of each flow, I also revised weekly all test releases.

Screens

Some design artefacts of this project.

No items found.