On Sunday, May 5th, 2019 our COO and Creative Director, Zaki Fitria, mentored the participants of a UI/UX design workshop held by HelloCode in collaboration with Hubton Indonesia.
UX Fundamentals
For the seventeen people attending, Wikal began the workshop with two insightful discussions. His first discussion aimed at making sure everyone were on the same page with their basic understanding of UX design. What follows are the main ideas of this discussion.
- The difference between user interface and user experience
- An overview of UI/UX design stages
- Best practices in UX design
- All about user and user testing
- The significance of user testing
Throughout the discussion, plenty of helpful case studies were provided to make it easier for the participants to fully grasp the ideas, starting from scientific research to actual products, and psychological theories and experiment. Additionally, he closed his first discussion by highlighting the current UX trend—Mobile First.
Wikal from HelloCode leading the discussionConsidering how the majority UI//UX design currently starts with a mobile website/application, the second discussion focused more on the mobile context of UX design. In this discussion, the participants got to know the characteristics of mobile devices and what it entails. With this in mind, some of the most important things to be implemented in mobile UX design were highlighted.
Following this, there was a discussion that focused on mobile websites and mobile apps. Then, he shared his two cents (backed up by facts, of course) on how to improve your mobile experience from the point of view of a UX designer. Above all, there were many practical and elaborate case studies as well.
Before closing his session, Wikal invited the participants to try and have a little practice. The instruction was to develop a simple concept of a mobile website or application for an ice cream shop where you can place a customized order. Then, after a few minutes, some participants volunteered to present their ideas followed by some feedback.
Mobile UI/UX Design
For the main session of the workshop, Zaki took the stage and begin with an introduction to get to know everyone in the room. Then, as a warm-up activity, he discussed the evolution of GUI design and what it takes to be a UI/UX designer.
To proceed, his session was divided into two parts that focus on two stages of mobile UI/UX design; Exploration and Design. Here, the participants get to dive more into the world of UI/UX design in the first part and experience a hands-on practice in the second part.
Zaki from Hubton leading the discussion
Exploration: sketching and wireframing
The first part of his session lay out the objectives of UI/UX design. With experience-based explanation and presentation of case studies, he also pointed out some principles of mobile UI/UX design, which include:
- Familiarity
- Hierarchy
- User-guiding/directing
- Consistency
- Readability
- Visibility
- Finger-friendliness
Furthermore, there were some technical principles necessary for a UI/UX design. They include the understanding of briefs, the development of a visual plan, the pixel-perfect principle, and the developer-friendly principle. Additionally, it’s very important to have a deep understanding of UI/UX principles and be very open because this field has a lot to do with many other different fields.
Zaki answering questions from the participants
Design: style guide and mockup
After the illuminating discussion, it was time to put the knowledge into action in the second part of the session. First, the participants read a brief that mimics a client’s brief, which might not be the clearest. From this brief, they had to come up with a task list as the initial process of UI/UX design. During the process, useful feedback was provided for each of the participants and encouraged them to ask questions.
Upon getting feedback, the participants then had to create ideation. Here, they were expected to create a wireframe from the task list that had been made and improved. The same process of guidance and discussion also took place during the ideation activity.
Finally, the participants put their ideation into a UI design. However, since everyone had a different background and experience, the expected outcome was more flexible. In this activity, Zaki guided everyone according to where they are at designing, using applications most familiar to each individual.
As follow-up measures, the participants had to finish their design at home and submit it to the committee. There will be a prize for the best one!
One-on-one consultation
Collaborative feedbackBefore closing, some participants were curious about some things. First, one participant was wondering if it is OK to skip the wireframing process. The answer to this question was that there are some cases where wireframing might not serve any benefit, in which skipping this step should not be a problem. For example, when an experienced designer is working on a small project, it might be better and more time-efficient for them to just go ahead and create the design.
The second and last question of the day addressed the issue of front-end development skill for UI/UX designers, and well, front-end development skill is very beneficial UI/UX designers. However, it’s very challenging and requires not only intelligence but also experience.
The speakers, participants, and committee wishing you a blessed Ramadan