a cover page of ablink on desktop and ipad

Background

AbleAnalytics (AA) is a healthcare-focused subsidiary of Greencross, a leading biopharmaceutical company in Korea. The company provides cutting-edge services in healthcare using AI, Big data, and IT. As part of the AA team, I was responsible for creating a developer's guide that ensured seamless integration of our API services into clients' infrastructure.

In this role, I contributed to the development of Ablink, a product that provides API services to businesses. Working with LG, we focused on improving the well-being of their employees by adding a feature to the LG employee healthcare app that enabled users to easily monitor their Body Mass Index (BMI) and other health metrics.

Challenge

Currently, developers lack a clear and comprehensive guide for integrating our services into their workflow.

Soultion

Design and develop a website that is optimized for seamless and responsive testing of code by LG developers. Create a comprehensive guide for engineers to effortlessly integrate our API services into their workflow.
View prototype

Project details

Timeline: 4 weeks
Role: UI Design
Tools: Figma and Figjam
Team: PM (20%p), Engineering team(40%), and me (40%)

1. Discover

Northstar

Design and develop a comprehensive and practical developer's guide that enables clients to seamlessly integrate our API service into their infrastructure while managing API key in 2.5 months including testing

Interview

I engaged closely with our engineering team. This collaboration allowed me to gain a thorough understanding of their experience using developer's guides, including pain points and areas of success. Through targeted questioning, such as "What frustrations have you encountered while using developer guides?" I was able to gain valuable insights into how to structure our guide. (interview questions)

2. Define

Frustrations

  • Limited guide which doesn't demonstrate how to integrate API
  • Not intuitive — some pages are overloaded
  • Not practical— no way to see if the code snippets will work unless it’s pasted on the server

User flow

To enhance the user experience of our product, I conducted a thorough UX user flow analysis to gain valuable insights into our users' behavior and interaction patterns. Through close collaboration with the engineering team, we identified the most optimal screen layouts and user flows to improve the overall usability of the product. By incorporating this information into the design process, I was able to create a more intuitive and seamless user experience, ultimately leading to increased user engagement and satisfaction.

3. Design

Sketches

To enhance the user experience of our product, I conducted a thorough UX user flow analysis to gain valuable insights into our users' behavior and interaction patterns. Through close collaboration with the engineering team, we identified the most optimal screen layouts and user flows to improve the overall usability of the product. By incorporating this information into the design process, I was able to create a more intuitive and seamless user experience, ultimately leading to increased user engagement and satisfaction.

Wireframe

To display what information should be reorganised and how the website should be laid out for a better user experience, I created wireframes.

4. Test

We recently launched the website and are waiting for the feedback.

Reflection

During the course of the project, I faced several challenges, including time constraints that limited my ability to conduct in-depth research and a lack of clarity regarding my role and responsibilities in the initial stages of the project. These hurdles hindered my ability to prioritize functions and distinguish between critical must-have and desirable nice-to-have elements. However, I was able to overcome these challenges by effectively incorporating feedback from stakeholders and refining the information hierarchy.

Moreover, I gained valuable insights into the dynamics of working with front-end engineers, which is essential for successful product development. I drew an analogy between the relationship between front-end engineers and UX designers and that of builders and architects. Just as architects design the overall structure, flow, and aesthetics of a house, UX designers create the design and user flow, while front-end engineers use their technical expertise to build the framework of the product and add other functional features. I also learned that handing off my design was a nuanced process, involving an additional step of publishing the designs before engineers could start coding.