Lepius’ Official Website

About

This project details the official website for Lepius. To increase the conversion rates on the Lepius platform, I collaborated with the front-end and back-end developers, the PM, and other designers on the team.

My Role

I designed all aspects of Lepius’ official website end-to-end from the initial wireframing through to a high-fidelity interface design.

During the collaboration, I built a component library for the design systems for improved work efficiency within the Lepius team.

Visit Website >

Clients

Tesser

Team

@Lepius Team

Duration

3 months

Tool Used

Figma, Slack, Asana, Illustrator, Photoshop, After Effect

Lepius platform

About Lepius

Medical network for verified doctors only

Lepius is a medical case-sharing platform restricted to verified doctors. Doctors can write medical cases using accurate, standardized medical terminology with auto-completion features and share them anywhere with their colleagues.

Problem

User experience

Need to make it easy for potential users to understand how medical cases work on the Lepius platform in order for them to trust the platform

Design system

Need design guidelines for design system to collaborate between developers and designers

Design Solution

Main page

Visualized the platform's image through interaction design

The website visualizes communication between doctors of various specialities and their medical cases. Built in collaboration with designers and front-end developers, the scrolling interaction shows users the characteristics of the platform.

Features

Used intuitive images to provide a clear understanding of features

By navigating the simple and intuitive graphics and the concise words, the users can instantly find the key features for searching, writing medical cases, and networking with them.

Features
FAQ

UI elements considered usability

Breadcrumbs

I used breadcrumbs as a navigational aid on the FAQ page. It allows users to keep track and maintain awareness of their location. If they are not able to find the answers to their questions, they can backtrack with ease and find answers in different categories while saving their current location.

Floating Navigation Menu

I used the floating navigation menus to create a better overall experience for users where they can find what they're looking for faster. No matter where users are on the page, they’ll see the menu options along the side of the page.

Pagination

Pagination enables users to track and bookmark the answer they're looking for with ease. It provides users with a greater sense of control than Infinite scrolling, which can be frustrating if users want to find the answer they saw before.

Responsive Web Optimization

Based on the minimum and most frequently used size, we designed a responsive web-optimized design for each breakpoint of Desktop Large Horizontal Screen (1440px), Desktop Small (1024px), Tablet (768px), and Mobile (360px).

Grid
MainMain with grid

Design guidelines

Created design guidelines for collaboration

We created design guidelines so that the stakeholders within the Lepius team such as the designers and developers can collaborate to develop projects consistently in the future. We grouped frequently used components into variants within Figma and assigned the font and grid systems for each Breakpoint.

medical casesdesign guidelines

Key Takeaways

The limitations of small start-ups

Small startups typically find it difficult to hire professional UX researchers due to high costs and time constraints. As a result, designers like myself try to meet the needs of the supervisors rather than those of the users. This often clashes with the assumptions of stakeholders who develop products. I realize that the assumption that the "users will want this" faces many risks after launch.

The importance of design guidelines for collaboration

Design guidelines allow developers to save time and increase the work efficiency of designers. Above all, they allow both stakeholders to develop consistent product designs. This project enabled me to develop the habit of creating design guidelines when I start a new project.

Even small things should have logic

There should be a reason for selecting a detailed UI based on questions such as "Why did you design Pagination instead of choosing infinite vertical scrolling?" Or "How many lists will you show up to?". It was not easy for me to explain my design logically in the early stages of the project. During my collaboration with developers, I was often asked, "What happens next when I click this UI?". This experience became an opportunity for me to develop an eye for intuitive and easy-to-use UI as a designer, apart from only focusing on aesthetic design.

Next

comaba thumbnail

Comaba: An Intuitive Workout Record

UX/UI DesignUser Research
potluck thumbnail

Potluck: International Student Gatherings

UX/UI DesignUser Research
finana thumbnail

Fintech Equity Product - Citi Ventures x SVA

UX/UI DesignUser Research

2021 Ted Taehyun Lee. All rights reserved.