backgroundwires.png

UI/UX Design

My UI/UX Design from concept to launch! (and post-launch)

Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein

UI stands for User Interface and UX stands for User Experience. UI and UX go hand in hand when designing multimedia experiences. The following is my UI/UX Design process after a decade of working as a designer.

ic_datacollection.png

1. Data collection & Research

This part is crucial to the design process. Designers can’t start without first understanding the client, their goals & objectives and the users who will be using the final product.

I like to kick things off with a questionnaire for the client. This helps me understand their vision. Here is a sample of the questionnaire in question.

User & Competitive Research

Before I get inspired I like to do a good competitive review and user research. I usually choose at least 3 competitors to review. The user research and feedback can be provided by the client/company (e.g. forums, blogs, app stores etc), conducting user interviews & when those aren’t available I research user feedback on similar products.

ic_planning.png

2. Planning

This is the phase where business requirements, user stories and timelines are defined. 

Business Requirements

Business requirements are a collection of the client/business needs. User stories will be driven by those. Business requirements don't need to be final before the design can start.  In fact, as they’re being developed it’s beneficial to quickly work through potential approaches with whiteboard or paper sketching. This allows teams to collectively envision the end product and potentially move away from overly directive or poor decisions. 

User Stories

User stories describe activities the user performs to reach their goals. This helps design user flows & use cases that Developers & Quality Assurance folks can follow easily. This phase can be developed and updated throughout the entire project. 

Timeline

Once we have a good understanding of the business and user needs, a design timeline can be created which would include: wireframes, user testing, wireframes iterations, validating iterations with more user testing, final visual design & style guides. These can vary depending on the project.

ic_design.png

3. Design

And now the real fun starts! 

Brainstorming & Sketching

Brainstorming and sketching let us quickly generate and gather feedback on a lot of design ideas. Sketches are hand-drawn designs that help decide which ideas to pursue in higher fidelity designs. They can be done on a whiteboard, on paper or even on a napkin.

Wireframes

Taken from any previous hand-drawn sketching, wireframes are static diagrams that represent the framework of a product or service. They explore content, navigation and interactions without putting any emphasis on the colors and final images. Many iterations may happen at this stage before the designs are ready to be tested.

Example of wireframes created with Sketch.

Example of wireframes created with Sketch.

User testing

The users are the experts! After landing on a concept or 2, the best way to find out if the designs are usable is by having users test them. Usability testing lets the designer identify problems before they are coded. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participants satisfaction with the product or service.

The best way perform usability testing is to build a functional prototype from a wireframe or visual design. This way the user can have a feel for the real thing - or as close as possible. During the user testing phase, you will:

  • Learn if users are able to complete specified tasks successfully

  • Identify how long it takes to complete specified tasks

  • Find out how satisfied participants are with your product or service

  • Identify changes required to improve user performance and satisfaction

  • Analyze the performance to see if it meets usability objectives

Visual Design

After collecting and analyzing data from the user testing sessions, changes will most likely be made to the designs and from there the final visual designs can be created. 

Visual Design created in Photoshop.

Visual Design created in Photoshop.

Once the designs are approved, style guides and assets are created and handed over to the Developers so that they can start building/coding the website or mobile application. After everything has been handed over, I continue to work closely with the Developers & Quality Assurance to ensure consistency between my designs and what they code.

Example of a style guide created in Illustrator.

Example of a style guide created in Illustrator.

ic_graph.png

4. Post Launch

My work doesn't end once the project has launched. Post launch strategy is essential to the continued success of the website or mobile application and to reaching its goals. Many elements that can be used:  data analytics, tracking, direct user feedback (forums & review sites), undergoing more user testing and A/B testing (testing out different versions of a design), just to name a few.