Velos, Inc.
WYSIWOW PROJECT
UI Standards and Style Guide Development
OVERVIEW
When I first arrived at Velos—a nearly 20-year-old developer of medical practice management applications—in 2013, Velos had yet to establish a UI style guide. No doubt the establishment of a UI style guide was high-priority for Velos to ensure consistency and user-friendliness in all of its products. Thus, during my position as a UX design intern there, I and a newly created team were chiefly tasked with creating Velos’s UI style guide.
This project was dubbed “WYSIWOW,” short for “What You See Is What yOu Want,” embodying the idea that a product’s UI should reflect the wants and satisfy the needs of each individual client.
Role/Skills Competitive Research, Concept Development, Wireframing, Workflows, GUI Design
Keywords Web Application UX/UI, Information Design, Design Style Guide
CHALLENGE
By 2013, Velos had a variety of web application products that were being developed or revamped. Velos, however, lacked a common set of UI standards to guide the design and development of these products. Moreover, many of the company’s products had been worked on by different teams, each with a different take on how a product should ultimately look. As a result, at the time, each web application developed by Velos incorporated different UI practices, making it difficult for the user of one Velos web application to use another Velos web application.
With the creation of a UI style guide was the resolve to achieve four goals: (i) facilitate the development of a product for both the design and development teams; (ii) ensure that these teams use the best and most up-to-date UI practices; (iii) unite the UI of all existing and future applications; and (iv) create a design identity and brand for Velos.
UI
UI
UI
UI
UI
UI
United UI
Better UX
PROJECT PLAN
Project Initiation Sketch
1. OBJECTIVES
WYSIWOW’s objective was to establish standards and guidelines for the following user interface categories: (i) canvas, (ii) grid, (iii) search, (iv) banner, (v) table, (vi) fields, and (vii) display. This objective was to be achieved by first defining the uppermost parameters and then fixing principles down to the detail of fonts and buttons.
2. GENERAL WYSIWOW PRINCIPLES
I and the team agreed on several design principles to guide us throughout the project. Borrowing from the manufacturing terminology used by Toyota Motor Corporation, we determined that the design of Velos’s applications should be rid of muri, mura, and muda. In the WYSIWOW context, muda referred to everything that was unnecessary to the applications and distracted the user. Mura referred to the applications’ inconsistencies and anomalies that took away from the user’s experience. Muri referred to everything that made the user’s interaction with the applications uselessly difficult, thereby overburdening the user. Overall, we decided that the applications’ design should exude minimalism and be responsive to the user’s needs.
3. PROJECT PROCESS
The first step we took after we had decided the project’s general design principles was to research the UI standards and style guides of other companies. We then proceeded to work on establishing the UI standards and guidelines for the above identified user interface categories one by one.
1. WEEKLY MEETINGS
The other team members and I met weekly to update each other on the progress of each member’s assigned tasks and frequently expressed any new ideas on the white board. During the weekly meetings, we provided feedback on each other’s work. I usually prepared rapid prototypes of my assigned tasks for these meetings. More specifically, my role in the project involved defining the scope of each identified user interface category, idea sketching, wireframing, creating mockups and workflows, and putting the first version of the UI style guide together.
Ideation
Balsamiq Wireframe
Paper Prototypes
Feedback
Weekly Status Meeting
Sketch
Wireframe/Mockup
Prototype/Workflow
Documentation
ACTIONS
2. PUBLIC UI STANDARD RESEARCH
As mentioned above, the first step in the design process for WYSIWOW was research. Through research, I was able to stay on top of current UI design practices. I also learned that UI style guides should not only communicate UI styles in a precise manner, but also be visually easily comprehensible.
We narrowed down the scope of the canvas of Velos’s applications to the area where the user could interact with an application and fill in information, such as the information of a patient.
Basic Canvas Layout
Canvas Objectives
Single Record
Data Entry
ensure quick/efficient way
to complete a form
Data View
present/display in a way
to easily search, scan and
read a form
Data Edit
ensure quick/efficient way
to search, scan and modify
multiple data fields
Canvas Design Principles
utilize smart defaults,
inline validation,
forgiving inputs, etc.
Minimize the pain
show progress,
remove unnecessary input, provide clear path, etc.
Illuminate a path
to completion
proper messaging,
grammar and display for errors, help, and success
Ensure consistent communication
Consider the context
familiar data vs. foreign data, frequently used canvas vs. rarely used canvas, etc.
3. CANVAS
Multi Record
Data Entry
ensure quick/efficient way
to upload and verify data
Data View
present/display in a way
to easily compare data
and examine data trends
Data Edit
ensure quick/efficient way
to select and modify multiple
data fields
1. Tic-Tac-Toe
2. 2+n Records and 1+n Attributes
4. CANVAS UI CONTROL CATALOG
We identified the UI elements to go in our narrowed down canvas. For each identified element, we created a page of information on the “Appearance” (how the element should look), “Behavior” (how the user interacts with the element), and “Guidelines” (how to design the element). Here, I focused on making sure each page visually represented each UI element in the most simple and attractive way. We later put the pages of each element together into one UI control catalog.
5. WIREFRAME
With some sketching and next Balsamiq, I developed the UI standard for the canvas layout of Velos’s applications.
6. INITIAL MOCKUP
I created a web application mockup to serve as basis for all future Velos web applications.
7. WORKFLOW
Using the mockup above, I created a workflow to show how an application would interact with a user. I designed the workflow such that engineers and project managers alike could easily understand them. The image below shows the top level of the workflow.
Top Level
Form Banner
Selectable Form Banner
Data Entry Sign Record
Select Form
8. HIGH-FIDELITY MOCKUP
I created a high-fidelity web application mockup using the core pages of the initial mockup.
Inline Editing to Bulk Editing
The user can easily change back and forth between an inline edit mode and a bulk edit mode. The user can also simply select the form the user wants to edit with the editable token field on the banner.
Inline Edit
Bulk Edit Hover
Banner Search
Inline Edit
9. DOCUMENTATION
Velos Style Guide Preview
Banner Preview
