hn.djng UX/UI Portfolio by hn-djng

UX/UI Designer

DINH HONG NHUNG (hn.djng)

Curriculum vitae I - UX Projects (3 products) II - Conceptual UI Showcase (4 Shots)

Name: Dinh Hong Nhung

Tel: 0888 626 396

Dribbble: hndjng

DOB: 24 July

Gmail: hn.djng@gmail.com

Instagram: hndjng__

hn:djng

UX/UI DESIGNER

KEY PROJECTS COCCOC SEARCH - Search Engine Usability Testing, User Survey, User Interview, Design system COINWHALENEWS.COM - Blockchain news website User Interface, User interview, Personas COIN SIGNAL MARKET - Blockchain news application Personas, Wireframe, User Interface MTSMART - Smart home Application User empathy, User story, Wireframe, UX writting, User Interface MTX PLATFORM - SaaS Website & CMS User flow & Wireframe, UI & Design System

EDUCATION

MTBIT.COM - Trade ecosystem: exchange, academy site,.. User flow & Wireframe, UI

ACADEMY OF FINANCE Barchelors Degree

SKILL & EXPERTISE

FPT MULTIMEDIA ARENA A-Dim Degree

Collaboration & Communication Wireframing and Prototyping

SOFTWARES

Design System

Confluence, Jira Trello

User research

Figma / Sketch Illustration, Photoshop

Coaching

Zeplin InVision

CONTENTS

CURRICULUM VITAE

THE ACTUAL GO-LIVE

UX PROJECTS i. Coc Coc Search Engine (4 min read) Usablility Testing Multivariate A/B Testing ii. MTX platform - SaaS (5 min read) The User’s needs Function Design Experience Optimization MTX Design system iii. MTSmart Application (6 min read) Empathize Acceptance Criteria User Flows Experience Optimization

6 6 6 10 10 10 10 13 16 17 17 19 19

CONCEPTUAL UI SHOTS iv. MTX Dashboard

v. Event Booking Conceptual App Design

vi. Ai Barista - Coffee Maker App

vii. MTBIT.com Website

GLANCE

https://hoctap.coccoc.com/ This site is a powerful tool for many students in Vietnam with ~20.000 daily active users. They can learn, search the guide for their assignments and have fun.

https://coccoc.com/search Coc Coc is not only the strongest browser but also the significant search engine for 25 million Vietnamese. The search engine brings a bundle of snippets that make it become a tough competitor for Google in this small country. These lovable and useful snippets can be found in the bento menu icon in the top-right of the screen as below.

CỐC CỐC Coc Coc Search - is integrated on the Coc Coc Browser, optimizing search results for the Vietnamese language, helping users find more accurate information conveniently. Up to now, Coc Coc search is available in desktop and mobile, with 1.65 millions daily active users.

THE TASK AT HAND : As a designer who belong to a 6-member UX/UI team, i dedicate time for enhancing Coc Coc Search and developing sub-products of Coc Coc Search such as: Coc Coc Edu, Coc Coc Video and so on. • Usability testing

• Micro interaction

• Design system

• Multivariate A/B test

• Feedback system

• UX writing

USA-BILITY TESTING

Coc Coc motto is “User first”. Along with that philosophy, our company has been conducting usability testing as a primary technique to ensure a good, user-centered design. With a limited budget, we only conduct the usability testing with three users to reveal 80% of the problems. That is an ideal number. Often, the researcher can make some mistakes that lead to critical defects from where recovering the application can be costly and time-consuming. One of them is testing with incorrect participants. In some early usability testing what I joined in, we saw that our team got a lack of insight because the recruit hired unsuitable participants. Trace to the recruiting step, I fought out that the researcher acquired candidates base on just 2 or 3 common criteria hence choosing randomly 3 persons from the list. That way the results often were questionable and of limited value. So in the next usability testing, I requested to develop a screening questionnaire before finalizing a participant list. The questionnaire below was written by me for the test of Cinema Snippet on Coc Coc Search. The

questions focus on behaviors, not demographics. I repeated some questions in other forms and shuffled them to detect someone attending just for the compensation. Some question does not make answers obvious, so I developed an answer sheet separately that provides the replies that qualify a potential participant. The questions also can clarify that respondents are target segment or they just were online movie lovers.

After this test, the advantages of the screening questionnaire impressed my team significantly. We quickly recognized the behavior pattern among users, defined crucial issues. In my opinion, a screening questionnaire is an effective way to acquire correct participants. Using questionnaire also avoid wasting time, money, and effort that leading to actionable results.

MULTIVARIATE A/B TESTING

Before running the usability testings as the effectively user-centered approach, Coc Coc has been using A/B Testing or Multivariate Testing as the most powerful way of refining a working design and finding out what attracts our users or helps them complete the processes on products. We have large quantities of users, a strong BI team to set the metric and analyze

the statistic. So running an A/B test might look easy for us, but if we do not carefully plan the test, we can get the ambiguous result. This problem happens when Coc Coc Search runs multivariate testing for the Video sub-page.

The initial requirements were a user interface improvement and some feature additions to the Video page. My product manager wanted to imitate the Video page’s UI of other search engines such as Bing, Yandex, Google, and DuckduckGo. I saw some problem here: • This requirement has no specific goal. We test the layout, the new features, the level of information simultaneously. • This test has too many variations, and the difference between variations isn’t significant. These things will make us cannot decide why one version worked better, which modification had a better impact. After discussion, the product manager agreed that we should structure a plan for these goals. This time, we focused on varifying the best layout for our user to answer some questions: Video thumbnail or content should be more attractive than others? Our user’s scan information by the thumbnail or title of a search result? The feature improvement and the

level of information were validated sequentially in the next steps, one step at a time. It spends more effort but gets more concrete proof to reveal user frustration. She also accepted that we should reduce variation, leading to a statistically significant difference between the winner and the runner-up.

OVERALL

Although the value of UX and its associated methodologies are becoming more realized, we learn enough to get by but continue to struggle with the fundamentals of creating a great user experience. However, I do believe the best way to do it is by spending time with users.

MTX With the explosive growth of the cryptocurrency market, the need for cryptocurrency exchanges becomes extremely huge. As an expert in the financial market, the MTX founding team brings MTX Platform as a Service solution to life to help these new entrants to the market, with high standard of stability and usability.

THE TASK AT HAND : As the only UX/UI designer in a four-member product team I was on my own, with a lot of wholehearted support from my colleagues. • Information architecture • User flows & wireframe • User Interface & Design system

THE USER’S NEEDS

• To control and maintain their crypto currency with a compact workforce without IT specialists. • Easy to assign managing duties and simultaneously limit access for each broker. • A system affords to compile and render comprehensive reports which can be understood at a glance. • Easy to produce marketing campaigns quickly by a few actions. • An effective tool which specializes in managing user, refferal system, wallet and so on. • New modern visual that looks fresh with delightful experience.

FUNCTION DESIGN

After assessing all need and pain points, we wanted to summarize our learnings about the information architecture in an easy-to-understand, visual manner. We began to built the information architecture in three steps: • Translating needs into actual functionalities. • Identifying the underlying organization structure that defines the relationships between functionalities and role-based access control. • Map out the navigation.

MTX Platform structure

To determine the structure of the platform, we use the card-sorting technique to find out what organization system would be the most successful for our users.

Participants were given a set which included 36 items that present the main content of the platform.

Hand sketch wireframe of Email Template Page

EXPE-RIENCE OPTIMI-ZATION

After having use case requirments on hand, which were built sufficiently bases on the final structure’s categories and links, I started crafting user flows and drawing wireframes. Considerably, the data tables which are important constructions of this product, could be useless without the ability to visualize and act on it. So my challenge was designing a table template that is easy to scan, analyze, compare, filter, sort, and manipulate information to derive results along to users’ particular purposes.

Admin Dashboard Page

User Account Management Page

As the project manager of the out-sourcing MTX’s brand identity development, I understood its’ guideline with the carefulness. Besides, our platform is data-heavy, web-based product hence simplicity and readability are all paramount. Consequently, the system is predominantly light blue, green is the other one,which is used for primary actions. The choice of fonts for the UI is also was another object of thorough selection and analysis as the screens are loaded with different information and demanded the high level of readability.

MTX DESIGN SYSTEM

Following the delivery of the main function’s user interface to the front-end developers, there was a lot of iteration and re-evaluation of UI elements for the next phase. There was also some inconsistency among the elements/components of all screens of the whole platform. Therefore I had to get serious with our UI elements and convince the front-end team as well as the product owner about the great significance of using the design system. Base on the Atomic Design methodology with the limit of resource and time, I just applied into product selectively after defining goals to pursue along design system process: • Consistence for userbility • Ready to scale • Clean and clear to be suitable with data-heavy characteristic.

Sidebar Implementation Guide

Last but not least, documenting Implementation Guideline also is pretty important. It is not easy to ensuring that developers would code exactly the user interface which visualized through high definition wireframes. This business needs to be define on a detailed guideline officially to facilitate communication among designers and between designers and developers.

OVERALL

The product team had grand plans for MTX. We were trying our best in developing the system, and rolling it out into CMS products that have not enough space to show here. I learned a lot in each stage of the process, the way to collaborate with my colleagues and accepted that building a product is an ongoing process.

MTSMART MTSmart is an application for all things home automation, allowing you to easily control and monitor them from your phone. On other hand, you don’t have to run simultinously several apps to control different subsystems in your house.

MEET THE TEAM : At the beginning my current PO told me that i would assigned an UI design job for a smart-home application. The dramatic surprise was that I only

received’ 6 mock-up screens, not including an incomplete user flow file and documentation about devices and technology.

THE TASK AT HAND : The information was not enough to conduce an output that meets user needs and wants. Consequently, my task is much more than UI design. • Empathy map • Acceptance Criteria & User Flow • Wireframe & User Interface • UX writting

EMPATH-IZE

Although i could not assemble too many researches about smart-home but some reliable reports from www.statista.com showed me the great potential of this tecnology in the future. Moreover, the information that i collected from smart-home groups and forums, helped me get some parttern of user’s insight. Fortunately, I also know 2 persons who are using smart-home so I set up interviews with both. Gathering all data that i acquired, i crafted empathy maps for 3 user segments with deeper insight: single, married and apartment host.

ACCEPT-ANCE CRITERIA (AC)

In the first place, use cases were not documented on paper hence user flows were drafted incompletely. They are even worse without any Acceptance Criteria. All of those lead to a serious situation that team members can’t understand clear requirements. So that, in the next step, i collaborated with all of the teammembers to finish user story documentation more quickly. This below user story is a good case in my point, it was initially recorded in one sentence: “The users want to recover the password.” But after tieing together, we defined it as following:

User story: As an user, I want to recover the password so that I will be able to access my account when I forget my password. AC 1

________________________________________________

Given: The email is valid When: The user clicked “recover” option Then: The system sent the passcode to the entered mail Given: The user has navigated to the passcode confirmation page And:

The user received the passcode via the email

When: The user entered the passcode And:

The passcode was valid

Then: The system enables the user to set a new password AC 2

________________________________________________

Given: The email is valid When: The user clicked “recover” option Then: The system sent the passcode to the entered mail Given: The user has navigated to the passcode confirmation page And:

The user didn’t receive the passcode via the email

When: User selected “Resend passcode” option Then: The system resends the passcode to the entered mail And:

Ensure the resend email confirmation is displayed

AC 3

________________________________________________

Given: The email is invalid When: The user clicked “recover” option Then: Ensure the rejection message is displayed

In some cases, we wrote AC in rule-oriented format or custom format, no matter what, the vital purpose of this activity is to avoidunexpected results in the end of the development stage.

USER FLOW

There have been a lot of incompletly user flows due to issues above. Some of user flows were created by BAs bias hence the solution did not solve the problem from user’s point of view. So with the empathy maps, i tried to put BAs to user’s shoes and considered more scenarios that they skipped. This before and after user flow below depict my words.

EXPE-RIENCE OPTIMI-ZATION

Collaboration activity is not easy to effectively execute, especially when our PO was very busy. He just had time to join the hand after seeing the UI flow draft so that i try reach him from low fidelity wireframe steps to confirm final decisions. This has a dramatic effect in saving time because he is meticulous about detecting tiny issues in our product. It was a great learning experience when i work with him. With a creative writing background from high school, I recognited the tone and voice of screen demo is not consistently from the beginning. So

I try to create a holistic experience with words (content) and design since the first acceptance criterion was written. My job is to help teams choose the right words that will be understood by the most people. I make sure that copy helped clear the path toward a more concise design and, in turn, a better user experience. In this product, it just need to be simple, direct, and get right to the point.

The UI Design Following our initial client kickoff meeting and refining the information from online research, I created a list of key points to keep in mind during the app design: • Keep layout clean & simple, and easy to understand for new users • Design app with the interface for ability to be customized easily by business clients First of all, i defined the visual language elements: • Icons:

Simple lines , playful, rounded corners

• Colors:

Blue – bright and inviting color, safe and innovative feeling

• Buttons: Rounded corners for consistency, bright colors • Typeface: SFU Stone Sans for clear legibility, simple but friendly … and presented some example screens in term of visual design to my PO and invester in order to determine his aesthetic preferences which give me a better idea for the visual design direction.

OVERALL

This project was very valuable to myself. I was able to effectively adapt to the situations or roadblocks that I experienced in a timely and collaborative manner. All in all, I grew and learned from this as I worked through the project.

MTX

With the explosive growth of the

MTX Platform bringed as a Service

cryptocurrency market, the need for

solution to life to help these new entrants

exchanges becomes extremely huge,

to the market. The user interface is

along with that, the birth of many new

designed for a quick glance about changes

cryptocurrency exchanges.

of indices.

EVENT BOOKING

Here are some pages from the conceptual ticket-booking app for an art centre which has a perpetual calendar with many individual event. An artistic look is created by combining classic elegant typefacess and colors with a minimalist layout for a diversiform character of these event types.

AI BARISTA

These screens offer the full range of categories and actions to choose and modify a coffee recipe. If a user want to try a new recipe, AI Barista always has a suggestion based on the analysis of that user’s previous orders.

CONCEPTUAL

This application provides an easy ordering experience with a simple, user-friendly and stylish look.

MTBIT.COM

MTBIT provides a trading platform which is easy to use and filled by a positive green palette and modern, technological style.

Feel free to explore the link:

https://mtbit.com/