Code Ninja's UI/UX Process

As product makers, Code Ninja's top function is to ensure customer satisfaction. Our customers do not only include our stakeholders and business partners, but also those who patronize our applications—the general web audience.

Providing the customers an ease of experience in navigating within a website or app is perhaps the most important goal of web designing. Code Ninja’s web designers share their 5-step User Interface and User Experience design workflow.

1. Asking the right questions

Photo by Oli Dale / Unsplash

Collaboration between the web designers and stakeholders is of utmost importance in this first step. Among the right questions to ask are:

• Who is the project's target market?
• What are the business goals?
• What are the user's goals in using the product?
• Who are the biggest competitors?
• What are the pain points and user frustrations in using the current application?

The answers to these questions are highly variable at the beginning of the design process. As the process progresses, responses to these questions will most likely change. Continuous communication and collaboration are important.

2. Wireframing

Photo by Med Badr Chemmaoui / Unsplash
Let's first define what a wireframe is. The wireframe is the sketch design or skeletal frame of the product or application. It is similar to how a blueprint works for the construction of a home or building. Our ninjas make use of two types of wireframes: Low-fidelity (or sometimes termed as LO-FI) wireframe and high-fidelity (also known as HI-FI) wireframe.

The low fidelity wireframe is created during the brainstorming process of the designers, normally with the stakeholders, and this would generally consist of blocks and shapes to represent the ideas. In essence, this type of wireframe is a less-detailed sketch design of the app.

Tool used: Balsamiq or pen and paper

Meanwhile, after much planning and input of specifications, the high fidelity wireframe is then created. This can be done by the web designer independently or with a team. It is when the buttons represented by blocks and shapes in the LO-FI wireframe have their corresponding labels. In the process, portions of the page design are more detailed. It usually takes 1 to 2 days to complete a high fidelity wireframe.

3. Creating mock-ups

Photo by rawpixel / Unsplash
This step is the final layer of the UI/UX design. Mock-ups are outputs where color, fonts, and design elements to the product are applied. Our designers use the Atomic Design methodology; it makes the workflow more systematic and modularized.

Tool used: Sketch

Using the Atomic Design methodology allows the creation of individual elements first and then combining them to create larger models (e.g. creating individual sections and buttons, and later on combining them to create pages). One advantage of using the Atomic Design methodology is that it is systematic and reusable. For instance, elements created for a single page can then be combined for use in succeeding pages. It can take as fast as three days and as long as two weeks to complete the mock-ups.

4. Prototyping

Photo by Igor Miske / Unsplash
Prototyping is the process where designers create a preliminary model of the application without the use of a code. The major advantage of going through this process is that the designer gets the chance to experience how the design works, without the risk of spending time developing or coding it. The designers have to make sure that the product will work successfully when presented to the users. Since prototypes are more detailed than mock-ups, the designer gets to observe the interaction between the user and the application.

Tool used: Invisionapp

Processing of the prototypes takes about a week.

5. Turnover

Photo by rawpixel / Unsplash
Once the design is approved, the designers can now upload the design mock-ups to Zeplin. Zeplin is a collaborative application for designers and developers. The final design is uploaded for viewing and development, comments and feedback can be placed in the platform for the designers' use as well.

Zeplin files are made available for the front end developers as a guide in the development of the application.

Now that you have the basics of UI/UX, it's time to build your portfolio! If you have what it takes to join our Design and Engineering team, check out our careers page for more information.