The design process starts by scoping out what the problem is. What do we want to accomplish? How has the problem been solved this far? What is wrong with that approach? How engaged are our users with that approach? What is good that we want to keep? What are the technical limitations? What is the content and how do we want to present it? And of course, are we asking the right questions in the first place?
I research what is out there that is great and works and that can we learn from. I usually collect a lot of material, visual examples, inspirational examples but also bad examples that need to be avoided, and any recent thinking on the matter. I list the good things, process them, and then make sure I start from a clean slate, building on top of learnings instead of imitating. Good design is always progress forwards, not copying.
Sketching and wireframing are tools for thought. I start with pen and paper. I draw different versions and when there’s enough exploration, the process moves on to wireframes, first mockups and test examples (with Illustrator, InDesign or Photoshop, whatever is the most relevant for that project). If there is action the user needs to take, the wireframe often needs to be animated or the prototype needs to be clickable.
Involving all the stakeholders from the beginning of the process is key. Developers and product owners must feel they are part of the process and welcome to suggest ideas and solutions. Usually the team is the first one to test the design early in the process, but moving to UX testing with non-users and potential stakeholders is an important milestone I aim for in the process.
I research what is out there that is great and works and that can we learn from. I usually collect a lot of material, visual examples, inspirational examples but also bad examples that need to be avoided, and any recent thinking on the matter. I list the good things, process them, and then make sure I start from a clean slate, building on top of learnings instead of imitating. Good design is always progress forwards, not copying.
Sketching and wireframing are tools for thought. I start with pen and paper. I draw different versions and when there’s enough exploration, the process moves on to wireframes, first mockups and test examples (with Illustrator, InDesign or Photoshop, whatever is the most relevant for that project). If there is action the user needs to take, the wireframe often needs to be animated or the prototype needs to be clickable.
Involving all the stakeholders from the beginning of the process is key. Developers and product owners must feel they are part of the process and welcome to suggest ideas and solutions. Usually the team is the first one to test the design early in the process, but moving to UX testing with non-users and potential stakeholders is an important milestone I aim for in the process.
Case Study: Mercari
Mercari is a Japanese merchandise platform. Users can list the items they want to sell or buy items from other users. Mercari is entering the US market, and they needed a redesign concept for the mobile and tablet experiences.
On the home screen the goal was to help the user to see what’s available to buy and quickly browse categories.
On the home screen the goal was to help the user to see what’s available to buy and quickly browse categories.
I started from writing down the goals and challenges and researching different merchandise apps to better understand the structures and navigations for shopping experiences. I focused on the question how to make it easy to browse the Categories. I sketched many versions to see what could work for this specific case. From those I found a version that I continued to sketch further.
60%–70% of Mercari's users are women. They are not necessarily tech savvy, but might be very familiar with social mobile apps like Pinterest and Facebook. I took this into consideration to help me to decide what kind of navigation and structure to use.
The next step was to make more detailed sketches and also think about flows and interactions.
Since I was creating an iOS app, I also read carefully the Apple's Human Interface Guidelines to make sure my designs reflected the platform's conventions and hence be fast to implement.
After sketching enough material for each screen, I created a wireframe with Illustrator to better understand how the screen works in the real size and with the right elements. At this point I keep the visual style very minimal so that it is easier to focus on the interactions and the overall functionality.
Before creating the layout in Photoshop I decided to change the Category tabs to a table view, since it was difficult to browse through them. This style was also more in line with the iOS guidelines.
For the final version I designed a more prominent Search on the main view which makes it fast to find what you are looking for.
Other Prototyping Examples
I use a wide array of tools and approaches depending on the project needs. Sketching, model building and paper wireframes are three examples.
