This Resume Builder Took Users 2 Minutes to Preview Each Change, I Made It Instant

To abide by a non-disclosure agreement, company, client, and product identities have been obscured in this case study.

Jump to My Process Live Preview in Figma

Slide to view the before (left) and after (right).

Lucid Icon Figma Icon
draw UI

Vision Over Details

Wireframing first lets me iterate fast on feedback and take a step back to focus first on layout, use cases, and other foundational concepts.

View the Wireframe
mockup

Enhanced hierarchy, readability, and findability

Multiple equal columns confuse, but a "two-thirds, one-third" layout gives the user a focus. The Interaction Design Foundation calls it choosing what's "center stage."

office content 1 office content 2

Low scope and minimalist by design

A PDF embed, an accordion list, and some text. The UI is minimalist and not doing anything complicated or unconventional. I live by Steve Krug's “Don’t Make Me Think” mentality.

content gallery 1

Immediate, automated, live feedback cuts unnecessary contact shifting

When users wanted to see their progress they'd, generate and download a PDF. Today, it updates live as they change it.

Original Webpage
2+ min
to generate and download the PDF
Original Webpage
11 sec
to open the PDF document
stat_0
Today
~1 sec
and zero contact shifting
office content 1 office content 2

Closed accordions allow for progressive disclosure, thwarting information overload

Now, the user can take the process one step at a time.

Modernizing more than just aesthetics

I didn't have the resources to dig into UX research, but this project proves that UX/UI and visual design best practices can go a long way on an experience that needs some love. Stakeholders immediately wanted to turn this layout into a template for all their custom document buildning needs.

Check out more of my work