ABMedia ─ Fintech News Site

Project Duration

1.5 weeks (2022.12)

Development Process

Agile

Company

Guanfan Technology

Role

UI/UX Designer

Responsibilities

UI design, flow discussions, responsive design, prototyping, design annotation and handoff

Tools Used

Figma, Slack

Project Overview

Background

ABMedia is a news site focused on fintech. The brand's original site ran on WordPress, which couldn't flexibly add features or let us freely design the interface — it took a pile of paid templates and plugins just to barely meet the brand's needs.

This project redesigned the interface and added new features — membership accounts, article bookmarking, likes and comments — to boost interactivity and build a more intuitive, easy-to-use site.

Project Goal

Goal

I kept the layout changes from getting too complex — partly because the tight dev timeline meant front-end shouldn't have to spend too long rebuilding screens, and partly to keep users' relearning curve low so they wouldn't get too frustrated.

Role & Output

Teamwork

I worked with a product manager and four engineers to complete this project. After discussing the UX flow with the PM, I built a design system to produce the UI, used prototyping and design annotations to convey product detail, and handed the finished visual design off to the engineers.

Key Improvements

Design Deliverables

Homepage

Article Detail Page

Search

Responsive Design

Adjusted the design across seven breakpoints — 1920, 1366, 1024, 768, 428, 414, and 360 — to ensure a good browsing experience across devices.

Design Guidelines

Design Guideline

Learnings & Reflections

Takeaways

Thinking through how data is presented and constrained speeds up communication and development

Working with engineers, I kept getting asked questions about how data should be presented — like, when an article has many comments, how many should show in the collapsed state? How should a centered image in a card be placed — set the size to Cover and nudge the position? That process taught me a lot about thinking from a development angle, and it's a reminder to consider, whenever I design a component, how the data will actually be presented and what constraints to give it — to speed up development down the line as much as possible.