Thumbnail
Hide
Subtitle
2018 Design Internship
slug
face++
My Role
- Solving company problems from the perspective of design.
- Designing and iterating on visuals and UIs for a variety of products.
- Collaborating and communicating with the team, PMs, and engineers.
Outcomes
- Designed and iterated on the visual and UI design with the team.
- Contributed to the live face recognition product and web experience.
- A complete icon set with more than 40 icons
- Visual design guidelines of the product’s web banners
- Marketing materials for the company’s business function
Project 1: Icons
The first project I got when I joined the team was redesigning the official site's icon set. My role is to explore a new visual language icon system to adapt to the existing interface.
Existing problem
As we can see from the upon image (old design), these strokes are thick, but the second image’s icons’ stroke is much thinner and subtle. These icons’ styles are inconsistent with each other, which results in a bad user experience for the users and eliminates our brand voice.
Face++ is a young scientific company, and the icons are expected to look more lively and high-tech. But the old set is over-detailed and realism-looking. It lacks a way to reveal the sense of sci-fi. So, my focus is to redesign the style to make it look more abstract and show a sci-fi sense, which can fit well in our user interface.
Firstly, to make the color system more diverse and alive, I combined the line shape and the light blue shadow as overlapping. And added a ”+” symbol per icon to enhance the consistency and work in concert with our brand — Face++
People always picture the future stuff in blue style. That’s why I picked three blue types to make it look Future-ish and test if they work well in UI. Also, instead of showing a plain line, the gradient dot with ”+” helps to add dynamic.
Works in dark background!
Project 2: Banners
Face++ has many product banners covering each selling product's contents, but some terms are ambiguous, especially for un-tech savvy users. That's why we need to visualize the story to help users understand each content's general information. So My role is to establish the visual design guidelines of the product's web banners.
During the explorations, I worked iteratively with content, brand, and marketing teams to create an extensible visual system that works well with our company. Here are parts of the banner design launched on the web and mobile devices - all intending to elevate the product's digital presence.
Project 3: UX & UI
Live Face Recognition Setup
While traditional face recognition could suffer from faked faces and result in insecurities, Live Face Recognition is increasingly important in AI and being critical for government departments like public security and vulnerable corporations such as banks.
This project is to provide a setup process to our clients using this service to present to their users. It needs to take photos of users’ ID cards and to record videos containing users’ biological data for future verification. I worked upon my mentors existing user flows and wireframes. My duty is to help designing a UI that feels reliable yet approachable to the wide variety of user bases of the project.
Making UIs reliable is relatively straightforward. I made it looks formal and official, provided a clean user path, and added our company logo as endorsement. However, how to make it more intuitive for more users? A picture is worth a thousand words! I decided to create a bunch of friendly illustrations added to the UI as a visual guidance throughout the whole setup process. Here are them!
Project 4: Mobile Web Redesign
To make mobile web interaction and visuals more intuitive, I redesigned and optimized a part of it. Combining some AI-style illustrations to make it works better on the mobile.
After that, I learned more constraints of UI design for mobile webs, such as keeping visuals clean to put much information and data in a limited space and making the interface look formal and official.
Our Company
Megvii is developing competing facial recognition platforms powered by artificial intelligence. Its main product is Face++, a platform that can detect faces and confirm people’s identities with a high degree of accuracy.
Thanks to all of my colleagues’ guidance and help make me collaborate with our team smoothly:)
