CHALLENGE
Design an annual product for the company specifically for signing. A signed software can assist the company in signing internally and externally.
My Role
UI Designer Brand designer Prototype Design system
Platforms
IOS
Android
Year
2021
SOLUTION
- Design the main visual design of the product.
- Design dynamic effects in products.
- Communicate with UX designers in design to make the product develop better.
Brand Design
Process
Research
When I learned that the company positioned this product as a commercial signature product, I searched the market for competing products and noticed that most commercial products on the market set the standard color to blue.
Therefore, in the brand design, in order to get rid of other competing products, I set the standard color as a color between blue and purple. As a result, you will see that it can catch user's eye compared with other products from the picture below.
Mindmap
At this stage of the mindmap, I carried out various brainstorms and extended various possibilities in this product.
Sketch
In this step, I reviewed the possibilities from Mindmap through sketches, and finally selected three as proposals.
In the end, based on the brainstorming of a large number of sketches, the No. 9 sketch logo was selected by us. I use a pen as a negative space to achieve the effect of Figure–ground Illusion.
1-5.Concept
UI
Design
In this product design part, we have the product manager confirm the product direction. I thought about the possibilities of the process, from the documents she provided.
Dynamic
In the design, I want to add some dynamic effects to make it more like looking for folders when reviewing files. Ask the engineer to achieve its effect, after I provide the AE dynamic effect. The final effect is as I thought, and most people are really impressed by this product because of this effect.
Illustrations
In order to make the overall document feel more consistent, I looked for different design textures in the empty state. I think the hand-drawn icon design is the most suitable for Dottedsign. Even in the digital age, we still will not forget the hand-painted feeling on the document.
Plateforms
Results
Reflection
That said, due to my limited experience at the time—and because Design Systems weren’t as widely discussed back then—I spent a lot of time communicating my design logic and component usage to both engineers and PMs. Looking back, I think the process could’ve been smoother if I had presented a more comprehensive wireframe to better convey my ideas and the overall structure.
Most of my responsibilities in this project were focused on visual design. In addition to UI screens, I also created the brand logo. To make sure our branding stood out, I compared the final logo with competitors' logos side by side, testing its visibility and recognizability in real-world scenarios to ensure it remained strong and distinct.
This was also a large-scale project that needed to support both iOS and Android platforms. As a result, I had to carefully consider different usage scenarios and design patterns across platforms. For me, this wasn’t just a design task—it was a learning journey that spanned everything from visual aesthetics to structural logic, from micro-interactions to cross-platform consistency.
- CHALLENGE
- SOLUTION
- Brand Design
- Process
- Research
- Mindmap
- Sketch
- 1-5.Concept
- UI
- Design
- Dynamic
- Illustrations
- Plateforms
- Results
- IOS
- Android
- Reflection
- Explore more
/w=1920,quality=90,fit=scale-down)
