top of page
Mike Tsai UX Design
APP SUBMISSION PORTAL
UX/UI Design
Introduction
Business Goal : App Submission Portal site allows external developers and 3rd pay companies around the world to join KaiOS app store ecosystem.
Team
Product Manager x 1
Back-end Engineers x 2
UX Designers x 2
My Role
Led a senior product designer to design the portal UX and UI.
Support the UX spec production.
Note : The purpose of this use case is to showcase how the UX/UI were developed as an experience reference.
Project Scope and Feature Requirement
-
Understanding product scope, feature list, and target schedule with Product Manager, and Engineering team.
-
High level discussion on possible solutions and feasibility evaluation then starts the design process.
Note : The following sections demonstrates how the wireframe spec was managed and what are the methods and steps
were taken to produce a good UX specification. The UI design is also available in the latter section. For below topics,
only selected screens will be sued to make it concise.
System Architecture
System architecture is the backbone of the design. It is the foundation of the app submission portal.
Architecture
User Roles Definition
Because there are 3 types of users, Developer, Company and Admin. It is important to define clearly their roles, responsibilities, and behavior from the very beginning.
General Behavior
General behaviors are defined and shown in the former part of UX spec so developers can have a good idea of what behaviors will be used. General behaviors include form, picker, stepper, pagination, feedback, etc.
Log In
-
The feature function flow starts with the top item in the architecture, Log In.
-
In Log In spec, there are Sign In, Sign Up, and Forget/Reset Password flow. Below uses Sign In part as an example.
Main Screen
Main screen is where all user journeys start. All the items and features are clearly indicated in an organized way.
Below is example of few examples of how we use different ways to express the design and the functions.
Upload App
By pressing "+ New App" in main page, upload process starts. Upload app is the key function of this portal. A side stepper is used to clearly users clear understand where they are during the process. It is very useful for this type of function.
App Detail
By selecting an app in the main page app list, it opens App Detail view. This view shows all the information related to the app as well as the owner information.
Account Management
Account management is only accessible by Admin from Main page. It allows Admin to do account, category, and company management.
Last But Not Least for UX Spec
-
Error handling is very important for the system. UX works closely with engineering team to include all the cases.
-
UX should use diverse methods such as matrix to simplify a complex situation.
-
Always make sure users get feedback after an action.
-
Try to visualize data or instant simulation to make data/status or change easily understood.
UI Design
Result
-
The UX wireframe spec was done in 6 weeks and the UI was done in 4 weeks time.
-
The welcoming and friendly design with branding touch fit a corporate portal site roll well..
bottom of page