Fast Sign

An online tool for secure, digital document signing with ease and speed.

UIUX Designer

It was the 2nd week's theme of the The F2E Fourth Frontend & UI Mastery Event organized by HexSchool. The event features collaborative relay between UIUX and front-end engineer. Each week, a different challenge is presented, where front-end engineers can use the UIUX designers' drafts to produce a complete work together.

2022 Oct - Nov

User Story

I can add and save my own signature list offline.
I can upload an image or PDF to sign, and the webpage will show a real-time preview.
I can choose a signature from my saved list and drag it to the desired location.
I can drag, resize, and adjust the signature on the document as needed.
I can see a progress bar that shows the signing steps:
1. Upload the document
2. Sign the document
3. Signing complete (download)

Design approach

Scenario & Persona Provided by competition organizer

User A

A senior executive is currently in a taxi. "I must sign an online contract within 10 minutes; otherwise, I will be in breach of contract!"

I'm in the car, and I only have a hard copy of the contract, and there's no time for the taxi to deliver it to the collaborating vendor.

User B

An employee at the office is preparing to sign, but the printer is broken. "The collaborating vendor provided a PDF document via email and asked me to sign and return it.

Since the printer is broken, I can't print it out, sign it, and scan it back to send.

Wireframe Provided by competition organizer

Research

I reference 3 online products. Use their product and record the flow.
I chose these products because they showcase professional and intuitive design approaches, which I aim to reflect in my product.

Task Flow

Wireframe Re-build

Hi-Fi Mockup
Hand off

Figma file

Result

Appreciation

Thanks to these engineers for choosing my design in development. Appreciate all their hard work! Everyone's feedback helped me to improve, and I see there’s still much for growth.

Howard

The Winner of F2E!

Work Link Personal Link

威爾Work Link Personal Link

intWork Link Personal Link

Erin HuangWork Link Personal Link

Joe ChangWork Link Personal Link

Award

Thanks to the judges, this week’s theme received an honorable mention!

Reflection

During this project, I encountered several issues while communicating with the engineers. I noted them down as reminders for improvement in the future!

Missing Font Characters
When using signature files, I designed three fonts for users. One handwritten font was pointed out by the engineer for missing characters, so I replaced it with another one.
Understanding File Formats
The IMG file mentioned in the project was misunderstood as a new kind of scanned image. Later, the engineer explained that IMG is just a general term for formats like JPG and PNG.
Accuracy in Wording
After getting feedback, I reviewed the project and found that I mistakenly wrote "MB" as "Mb" in the file instructions. After researching, I confirmed that MB and Mb are different units.