mySugr Website UI/UX

As the UI/UX designer, I took on the challenge of creating a new mySugr website—a significant milestone for the company's online presence.

In this case study, I'll walk you through the design process, user persona development, design and testing methods, outcomes, and the localisation challenge for mySugr affiliate countries. I'll also cover the use of a headless CMS architecture, the integration of the Storybook component library, and the innovative utilisation of the paper campaign content for the website launch. Let's delve into this exciting project!

Project Breakdown

  • The primary challenge was to create a persuasive and scalable website that effectively showcased the mySugr app as a paperless diabetes logbook, while accommodating localisation requirements. Design factors such as bold colours in the UI and clean yet friendly typography were employed to create an engaging visual aesthetic. Best UX practices, including intuitive navigation, clear information hierarchy, and consistent visual cues, were implemented to enhance usability and user satisfaction across different countries.

  • To tailor the website design to specific user needs, three distinct user personas were created:

    New Users: Individuals newly diagnosed with diabetes seeking comprehensive information and guidance on diabetes management, blood glucose monitoring, and the benefits of the mySugr app. The design prioritised clear and concise content presentation, ensuring localisation capabilities for seamless adoption in various affiliate countries.

    Job Seekers: Professionals interested in career opportunities with mySugr, seeking information on the company's mission, culture, and available positions. The design emphasised an inviting and informative Careers page, accommodating localisation needs to engage job seekers across different regions.

    Media: Journalists, bloggers, and influencers interested in covering mySugr and its innovative approach to diabetes management. The design featured a dedicated Media section with press releases, media assets, and a streamlined localisation process for effective communication with media professionals worldwide.

  • To tackle the challenge of creating a scalable and localised solution, we adopted a design approach that focused on creating a decoupled website. This architectural choice allowed us to effectively separate the front-end and back-end functionalities, paving the way for seamless scalability and localisation.

    This approach meant that updates and modifications could be implemented without disrupting the entire system.

    To maintain consistency and streamline the design process across various localised versions of the website, we integrated the Storybook component library. This provided a centralised repository for UI components, ensuring their uniformity and reusability.

  • The mySugr website launch successfully presented the app as a persuasive selling tool for diabetes management, while addressing localisation challenges. The integration of immersive digital assets, such as The Paper World campaign, created a visually appealing and engaging experience for users across affiliate countries. The decoupled architecture facilitated efficient content updates and enabled seamless localisation, while the Storybook component library ensured a cohesive and scalable design across localised versions.

  • The utilisation of decoupled modular design and immersive digital assets in the mySugr website launch has proven to be an effective approach to address scalability and localisation challenges. The decoupling of the front-end and back-end functionalities provided flexibility for rapid iterations and customisation across different regions. The integration of the Storybook component library contributed to a streamlined design process, resulting in consistent and user-friendly UI components across localised versions. The incorporation of The Paper World campaign as content enhanced user engagement, reinforcing the mySugr brand message globally.

Homepage

The following components serve as point of launch deeper into the website.

Hero component: The UX goal for the Hero Section is to immediately capture the attention of users and communicate the core value proposition of the mySugr app. The content convey’s the simplicity and convenience of mySugr and the CTA button prompts users to download the app, creating a clear call to action.

Blog component: The Blog Page component is used to engage users with valuable content and encourage them to explore the blog. The headline and body copy should emphasise the wealth of resources available on the blog and the CTA should invites users to explore the blog.

Download component: This component prompt users to take action and download the mySugr app.

About page component: This section is to build trust and provide information about mySugr's mission and features. The content showcases the wide user base, establishing credibility and trust. The CTA invites users to learn more, encouraging them to explore further.

By aligning the design elements, including the headlines, body copy, and CTA buttons, with the specific goals of each section, the UX strategy ensures a coherent and engaging user experience throughout the website.

Navigation

The mySugr website aimed to ensure users could reach their desired destination within three clicks. This included new users, job seekers, and media professionals. The design focused on clear content presentation and accommodating localisation needs. We followed a user-centred design approach:

Streamlined Main Navigation: Clear labels and primary sections for diabetes management, careers, and media ensured easy access.

Clear Information Architecture: Organised content hierarchy allowed intuitive navigation.

Targeted Landing Pages: Tailored pages guided users and quickly provided relevant information.

Localisation Considerations: Language selectors and region-specific content enabled seamless adoption across countries.

Supporting Media

For the launch of the website, I art directed and create the paper campaign as part of the website launch strategy. Utilising posters, flyers, and on-line and offline ads, the campaign aimed to expand reach, drive traffic, and enhance engagement. By integrating various touchpoints, a cohesive brand experience was created, maximising the impact of the website launch and empowering individuals in their diabetes management journey.

Disciplines: UI/UX Web & Campaign Design

Client
mySugr

Role
Lead UI/UX Design

Previous
Previous

Balance in every bite

Next
Next

Studio Yum Yum E-commerce