ui framework - julie sun - product & ux...
TRANSCRIPT
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