A 2-in-1 style guide and coded UI components

created to help both designers and developers

to not only save time but work together better

and more efficiently.

UI Framework

ROLE: DELIVERABLES:

Product and UX Design UI Framework

Responsive Web

Design Styleguide in Sketch

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

• Create a consistent and flexible UI across all company projects

• Speed up design and front end development process

• How to easily adopt, manage and maintain consistent UI across all

company projects

• Styleguides are often non uniform, nor complete for developers to

properly implement them.

• How to get projects onboard and made aware the benefits and

importance of standardized UI

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

GOAL

One month

Product & UX Designer (Myself)

UI Developer

TIME FRAME

TEAM

CHALLENGE

UI Framework

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

PROCESS

UI Framework

1. Uncovering the need/problem

2. Diving into the deeper issue

3. Uncovering a solution while enhancing product value

Many project teams have inconsistent UI and guidelines that are becoming hard to manage and update. We

needed to create a styleguide that is flexible and will be used to bring consistency across all company projects.

After researching various styleguide approaches and talking with UI and frontend developers and designers,

I uncovered a deeper problem with styleguides in general: They're not useful if not implemented problem

It dawned on me that what we needed more was a styleguide that can be easily integrated into code

and help developers to implement them with ease. The result was to create a UI framework that

caters to both designers and developers and also allows for the simple and streamlined process from

design to development all the while maintaining consistent and flexible visual guidelines.

STYLEGUIDE

FRAMEWORK

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

PROCESS

UI Framework

4. A collaborative effort

5. Education

In order to create a UI framework that benefit both designers and developers I need to a UI developer to work

with me directly on this project. Together we created a styleguide website based on the framework we

developed, with a downloadable styleguide template for designers and code for developers. During this

process we’d talk with designers and developers cross multiple teams to get early feedback.

Once we finished the first release of the UI Framework, we knew it wasn’t over. We

needed all the project teams on board and excited about it’s benefits and value. Thus

during our monthly company wide townhall meeting, I presented the UI Framework to all

the project teams and offered workshops with the UI developer for project teams to easily

adopt and benefit from using the framework.

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

PROCESS

UI Framework

6. Iterative process

To ensure the continuous improvement of the UI framework, we needed it grow and adapt as projects change,

along with technology. Lucky for us we’re able to work very closely with other project teams which allows us

to get instant feedback.

• Consistent and flexible UI framework adopted across most company projects

• Ease of use and streamlined process helped designers and developers to work better together while

saving development time

• Using the same framework allowed devs to easily transition between projects across different teams

• More understanding and appreciation of standardized UI and design and development handoff process

RESULTS

DESIGN CASE STUDIES UNDER NDA. PLEASE DO NOT SHARE.

JULIE SUN DESIGN

DELIVERED

UI Framework

Responsive web using UI Framework Styleguide in Sketch for designers Framework for development via GIT