A guide to our design process

If clean and maintainable code is at the heart of a great product, an intuitive and seamless user experience and user interface (UX / UI) is the soul. In order to have great UX, technical considerations must go into design. In order to express great UI, development teams must give as much attention to their front-end code as they do to their system architecting.

Our projects include everything from enterprise business logistics for utilities companies to consumer IoT coloring apps for kids like Coco Color. Below, we will summarize our internal design process.

Things to Know Beforehand:

Our design work (from wireframes to clickable prototype) is done beforedevelopment starts using user stories we collect from potential clients. The format of the stories can vary, but generally they provide us with a product summary sentence and the things users want to do (e.g. “Create an account with my mobile number”).

When we’ve captured what we think users want to do through these user stories, we design the product features and do a quick turnaround with wireframe > mockup > Atomic prototype.

Our Workflow

OURSKY Design Timeline Template
Oursky Design Timeline Template (click to access)

Our design process is typically completed within a 2–4 week time frame. All client projects are assigned a PM who will follow a project from design through development (if a client wishes to continue).

Looking at our template (our designers’ schedules with project names removed), the last two timelines are more typical for our projects. Sitemaps / user flows typically take a day or two while wireframes, mockups and prototypes may take a week. As indicated in project 1, 3 and 4, some projects require research, which may take longer.

User Flow / Sitemap

Our UX/UI design process may begin analogue because we have rooms and whiteboards that we can brainstorm with. After the initial drawings, we create a user flow. The sitemap is meant to quickly visualize how a product can serve one of the user stories. We want to make sure everyone is on the same page about the main components and pages of a website or app.

What we do:

  • Synthesize the product specs.
  • Conceptualize the user flow of major user stories for the app / website

Tools of Choice: Adobe Illustrator (US$29.99/mo) / Sketch (US$99) / Google Draw (Free)

Basic Wireframe

ui ux design wireframe
Sample app wireframe

The purpose of the wireframe is to help visualize the frontend features of a product and narrate the user flow. Our designers will take rough sketches and create a polished wireframe afterwards.

As a best practice, we start with minimal colour in order to focus on the key components in the design and navigation. Having less colour helps everyone (including the client) focus on discussing the features and navigation, which has implications on later development.

What we do:

  • Draft the sections and components in the sitemap / user flow
  • Ensure each UI screen has a clear and consistent layout
  • Figure out the navigation
  • Ensure the UX is usable and easy to understand for target users

Tools of Choice: Sketch (US$99)

Style and Art Direction

After a wireframe is approved, we will start working on the details of style and art direction. We discuss with the client what ideas they want to convey with colors (incorporating brand identity, for example) and a mood board, ensuring that they are cohesive with UI elements and branding.

What we do:

  • Work on mood board, color palettes, typography, UI components
  • Design icons, images, and other assets that suit the style previously discussed with the client

Tools of Choice: Adobe Illustrator (US$29.99/month) / “sketches on paper” / Sketch (US$99)

UI Elements and States

The devil is in the details. For inspiration, many free UI elements kits are available. They’re a great place to start, but if you want to stand out as a design team, you need to put your own stamp on the product. We are also look at other design portfolios and content for inspiration with the plugin Muz.li.

What we do:

  • Design UI components in different states
  • Design common layouts, transitions etc. in the app
  • Depending on the complexity of the elements, an animated demo can help demonstrate how certain elements change states

Tools of Choice: Sketch (US$99), Invision (starting at US$15/month)

Mockups

hong kong ui ux design agency
A UI mockup for an iOS project

With the color palettes mostly defined, we put them to the test with our mockups.

Don’t try to complete all mockups in one go without early feedback from clients or the product manager. Design iterativly by completing the major screens first and continuing with rest of the screens (like empty states) after receiving feedback. This approach will help shorten the feedback time and help clients save unnecessary expenditure on major design changes.

Our mockups are Sketch design files that are intended to be exported for
development, whether by Oursky’s team or a third-party.

What we do:

  • Design illustrations, iconography, images and UI components
  • Take the wireframe to design site mockups with the style and art direction, UI elements and states confirmed by client

Tools of Choice: Sketch (US$99), Adobe Photoshop (US$29.99/month),Adobe Illustrator (US$29.99/month)

Prototypes

We do prototypes because they significantly benefit development. High fidelity prototypes are clickable and show details such as button and navigation animations, behaving virtually like a real app for testers. Having an example of complex navigations and animations can help developers understand the details of a product and include them for the first iteration of development.

Prototypes help entrepreneurs demo products to investors, conduct usability tests, and gather feedback from target users for initial validation. Being able to click through a polished design helps potential users give concrete feedback about details that they appreciate or features they would like to have. Taking the user feedback and prototype to investors gives them a tangible example supported by initial responses to better evaluate your pitch.

Tools of choice: Atomic (US$19.99/month), InVision (starting at US$15/month), Framer.js (US$15/month)

Kickoff Development Meeting

style guide design specifications ui ux design hong kong
Our side project Sans Sugar screenshots. Design specifications and a style guide are two final deliverables.

Our side project Sans Sugar screenshots. Design specifications and a style guide are two final deliverables.

Our company offers project consulting, design, and development services, so sometimes a client may only need a design. Our goal with design is to hand off mockups (exportable Sketch files), with supporting prototypes, user flows, or style guides as appropriate to our clients. These files can be used for development, by a client’s in-house team, a third-party development team, or our Oursky’s developers.

Many clients also request that we continue with development as well. The earlier a client can confirm interest in development, the earlier we can bring in a developer to advise on the technical complexity of requested features. We design and develop with client budgets in mind and explain the implications behind features for the short and long-term.

What we do:

  • Discuss product flow and UI states
  • Resolve any outstanding items

If you find this post interesting, subscribe to our Medium newsletter to get notified about our future posts!


😻 At Oursky we’re all about helping brands and entrepreneurs make their ideas happen. Get in touch if you’re looking for a partner to help build your next digital product.

Leave a Reply