Laito

Crafted for designers at the start of their careers, this app is your ultimate tool for growth and development. Conveniently accessible through your mobile device, with a website version coming soon, this app is your one-stop-shop for mastering the UX/UI design craft. So, take the first step towards a successful design career and join the ranks of our growing community of skilled designers today!

I really enjoyed being a part of the Saturn group and watching each one of us bring your unique skills and perspectives to the table. It was a pleasure to see everyone striving to be helpful and supportive throughout the process.

I am grateful for the opportunity to work with such a talented and dedicated team, and I look forward to the possible collaborations in the future. Besides work, we had nice moments when we shared non work related things which to me created a nice bond. Looking forward to meet them in person. Thank you again for your hard work and for making this experience such a memorable one.

My Role

I wanted to take a moment to reflect on the role I played in our UX/UI research project. I was involved in conducting the interviews and taking notes on the key points that emerged from those conversations. I always sought clarification from the mentors and shared what I learned with the group to ensure that we were all on the same page. My contributions to the team were not limited to research and analysis, as I brought a variety of creative ideas to the table and even created our cute group mascot.

In addition to working with the team on UX research and analysis, I also took on several individual tasks, including UI interaction and prototyping, user testing, and concept testing.

Qualitative research

To streamline the qualitative research process, our UX/UI design team took a collaborative approach. Initially, we faced a challenge as we had limited understanding of the concept. Since this was a relatively new field for us, we realized the need to gain more insight to move forward. To better understand the needs of our target users, some of the members first conducted informal conversations with experienced designers and shared the insights with the team. The answers we received provided valuable insight and helped us better understand the role of a UX designer. In our quest for efficiency, we divided the task of creating interview questions amongst the team members. We then held a meeting to craft the final set of questions for the interviews, to gather valuable insights.

One of our initial challenges was finding the right time to schedule meetings, as we all had other activities and jobs. However, we became more organized as one team member created a schedule for the interviews, where we could add the date, time, and the name of the second interviewer. This allowed us to select a suitable time based on our availability, which made the process much smoother.

Between us we conducted a total of 10 interviews and recorded the most important key points. Through this process, we gained a deeper understanding of the challenges and needs faced by designers in the early stages of their careers. This information was then organized and analyzed, leading us to the next step of the research process: affinity mapping.

Affinity map

This map categorized all the important words and insights we extracted from the interviews. This helped us gain clarity and identify key themes more easily.

Several key categories were identified, including: General Data, Mentors, Tools, Skills, Inspiration, Frustration, Wishes, Career Path, Nice Things, Advice for other UX/UI Designers, and Others. A common theme emerged from the interviews, highlighting a need for mentors and a lack of accessible online classes and communities for UX/UI designers to connect and grow their skills.

Empathy Map

Using these categories, we created an Empathy Map to gain a deeper understanding of the user's perspective, beyond just the words they shared in the interview. We focused on their emotions and feelings, which were critical in identifying their needs. From this, we identified key issues related to mentors, classes, and community. With this information, we were able to develop specific How Might We questions and felt confident in moving forward with the project.

"How Might We" questions

Working individually, we explored ways in which we could help the user. We generated possible HMW questions, and then collaboratively merged them into a cohesive list. It was evident that the entire team had gained a solid comprehension of the user's needs, which made the process of devising these questions a straightforward task. With the HMW questions established, we each began to delve into our own creative process and develop unique ideas.

HMW help designers get a mentor?

HMW bring UX/UI designers together?

HMW offer real data(statistics) in one place?

HMW provide best inspirational resources (websites etc...)?

HMW help juniors find specific answers quicker?

HMW help them acquire soft skills besides UX? (communication, presentation, interviews)

HMW facilitate workshops?

HMW keep the designer engaged?

User persona

Based on the knowledge gained up to this point I have decided to create 2 representative user personas and base my solution for this design challenge on them.

Problem statement

Frida: needs specialized classes on UX and UI, and access in a community to share ideas with others in this field.

Lewis: needs more inspiration for his designs and a mentor's guidance to grow.

At this point it was clear to me that my solution should address the need for mentorship, comprehensive classes for both UX and UI design, access to research, and concise explanations.

My vision for this project was to create a comprehensive and engaging app for UX/UI designers, with a focus on education, inspiration, and community building. I envisioned a platform where designers could enroll in classes, access short and informative videos, and leverage a research library for their case studies. Additionally, I wanted to incorporate a mentor program, where designers could connect with experienced professionals, as well as a network of peers. To keep designers motivated, I also included the opportunity for them to participate in fun and challenging activities, providing a platform for creativity and growth. Of course this can also be a great tool for experienced designers who would want to share their knowledge and meet other people.

User flow

This concept helped me to sketch the path of the application, enabled me to identify and incorporate all of the necessary features and elements for the app.

Paper design

I started the design process by creating rough sketches on paper, which served as an initial concept. I later transferred these sketches in Figma and conducted concept testing to gather feedback and make necessary changes to ensure a user-friendly navigation experience. Throughout the project, my designs evolved as I made decisions based on testing, to remove or add features, leading to a final product that differs a bit from the original concept.

Concept testing

During the testing phase I found out that there are some key areas which needed improvement. The second screen was deemed unnecessary, the lack of a navigation tool bar made the app difficult to use and also the initial incarnation of the chat feature was not functional as the full-screen format was required for optimal conversation flow. It was helpful to receive feedback, especially regarding the missing navigation bar. The fact that the same issue was mentioned multiple times made it clear that this was a priority to address before moving forward.

Low fidelity wireframes

Following the concept testing, I made the necessary modifications and developed low-fidelity wireframes for all the screens (only a sub-set of the screen is presented below).

Prototype testing

Based on my prototype testing, I discovered that the app offered seamless navigation, with engaging topics for UX/UI designers. However, the “favorites” button (star icon in the top right) proved to be unintuitive, requiring a revision to ensure its effectiveness. Based on popular app research, I decided to use a familiar "bookmark icon" and added the star inside this icon. This modification was made to ensure ease of understanding for the user, as they are already accustomed to this icon.

Minor adjustments were made to the spacing between the images to ensure consistent horizontal and vertical spacing.

The app's launch animation of the logo was well received by the interviewees. They also found the app useful for their projects, particularly for UX and UI classes, and found the challenges section attractive, expressing interest in participating. One interviewee suggested adding a "favorites" feature for challenges, which is not yet available but could be added in the future. Reviews on a mentor's profile page were helpful for users when deciding whether to book a mentor or not.

During the interview process, an insightful suggestion was made to add games to the app. This idea resonated with me and I plan to consider it for the future.

Prototype link here

Style guide

The palette which I chose contains a balance of vibrant and subtle colors which are visually appealing and easy on the eyes. The dark shades provide a professional and sophisticated look, while the light shades add a pop of color and visual interest to the design.

The typefaces used are Baumans and Montserrat. Baumans has a unique look with its geometric shapes and bold lettering, making it stand out and draw attention to headings and titles. It also has a friendly and approachable feel which work well for an educational app. Montserrat, on the other hand, is a versatile font that is easy to read so I used it on ~90% of the app.

The "star" icon represents “favorites” and provides quick access to saved items, such as classes, research, short videos, and inspiration.

The chat background design is inspired by the app's name, which means light, and symbolizes enlightenment. To reflect this, a light bulb icon was incorporated into the design.

Buttons: Purple not pressed and Aqua pressed.

I made several modifications to the navigation bar. My initial design was too vibrant and didn't align with the look and feel of other mobile applications. Thus, I decided to streamline the design and create intuitive buttons. The final navigation bar includes five key categories: UX, UI, Mentors, Challenges, and Profile, allowing users to navigate the app seamlessly and access the information they need quickly and easily.

Prototype link here

Throughout the development process of Laito, I gained a deeper understanding and appreciation for the field of UX/UI design. Since completing classes on a mobile app may prove challenging, I also envision a website component to enhance the experience. Despite the room for improvement and the addition of exciting features, such as live webinars with industry experts, a home page as a summary of all topics, my perspective on the subject has evolved which led me to create Laito app which could be a great help for early-career UX/UI designers one day.