### Our first meeting with Emir (Kommunity CEO) started with a design consultancy appointment he got from my Superpeer profile.

### Our collaboration started by talking about how we can improve Kommunity's current design language and UX, piece by piece, without designing from scratch.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2Ff98ffb3a-c6e9-432a-a78d-63507754cb51.jpg?alt=media&token=c961514f-6050-4e53-9619-7b47a4f01df2","id":"f98ffb3a-c6e9-432a-a78d-63507754cb51","width":2960,"height":1600,"filename":"Kommunity-Cover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Social Activity Feed Feature**

**The Challenge**

We decided to start improving the visual language and existing UX by taking it flow-by-stream. Although an inconsistent appearance will occur at the beginning, by handling (redesigning) the components without touching the general appearance, we planned that we can close this gap and move to a consistent appearance in a short time.

The first feature we started working with Kommunity in line with this plan was the Social Activity feature. We were both building a new feature and taking the first steps of the redesign process.

**Problem**

We wanted to enable users to share and socialize within the communities they are members of. In particular, we aimed to ensure that the photos taken at the events are shared by users in one place.

**User Research**

While trying to understand the needs and expectations of our users, we worked with our community manager and customer support team to understand their expectations from the social activity feature.

One of the markets Kommunity planned to grow was the Ukraine region. For this reason, we examined the social media platforms that our users there commonly use and observed that Facebook is the most common social platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2Fd5303c88-ba53-455a-b507-ec962e5f22c5.jpg?alt=media&token=fb355911-94d8-4bf4-bcd1-00544f154da3","id":"d5303c88-ba53-455a-b507-ec962e5f22c5","width":2960,"height":1600,"filename":"User-Rate.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**Redesign Components First**

As I mentioned above, Kommunity has an existing page skeleton, ux pattern, and we wanted to design it with as little impact as possible on the page skeleton. When we started to design this feature, we started by designing our components considering the current layout.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2F11227784-a83f-40bb-b898-1760c940354e.jpg?alt=media&token=f5a9aa60-fc0e-46fe-a81a-cb2790dcc059","id":"11227784-a83f-40bb-b898-1760c940354e","width":3200,"height":2400,"filename":"Feed Components 2.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2F519e5f67-c3cd-4154-8d68-597b8cceefe2.jpg?alt=media&token=d8d41cb0-6ab9-4827-b331-e7defe551769","id":"519e5f67-c3cd-4154-8d68-597b8cceefe2","width":3200,"height":2400,"filename":"Feed Components.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Kommunity Profile Page Rework**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2F461634d0-877f-46fc-aaf5-f5ad6a3c2383.jpg?alt=media&token=ae53c159-77f9-4859-ac82-69ae375f1cc5","id":"461634d0-877f-46fc-aaf5-f5ad6a3c2383","width":2880,"height":3634,"filename":"About.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2Fae21e99f-8781-4a5e-9fbc-330211754980.jpg?alt=media&token=53e84128-8b03-4ce7-a1d7-44cb277738b3","id":"ae21e99f-8781-4a5e-9fbc-330211754980","width":2880,"height":4502,"filename":"Wall.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2F4760c885-9b4b-4783-971a-73e44a910934.jpg?alt=media&token=8828051a-bed7-4055-8e56-9434dd3e30f1","id":"4760c885-9b4b-4783-971a-73e44a910934","width":2880,"height":4502,"filename":"Wall - No Event.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2Fc482cf7a-e4e7-4759-93e5-e2b29c74822a.jpg?alt=media&token=8009bb22-d710-4ea4-b250-bd131655720d","id":"c482cf7a-e4e7-4759-93e5-e2b29c74822a","width":2880,"height":4502,"filename":"Members.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Event Detail Page Rework**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2F5DgtNHlWZgELWFjM66we%2F03ada1e2-a728-418d-9fc0-62edc5572cf4.jpg?alt=media&token=e6ce6f87-97c9-4560-945c-a143f036642b","id":"03ada1e2-a728-418d-9fc0-62edc5572cf4","width":2880,"height":3634,"filename":"Pre-Register.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Redesigning Product Process

### Designed to enable users to build a completely isolated replica of infrastructure.

The HyperQube Cyber Range is a no-code, drag and drops solution where you can build risk-free, on-demand live infrastructure. With no reliance on engineering, no data center, and no hardware investment you can create exact replicas of your connected and configured network in as little as 30 seconds that feel and operate like your production network.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Fa28be91c-3004-4c68-875e-29a440b9665f.jpg?alt=media&token=552f411d-937a-48fd-8a14-6c38ed5ff438","id":"a28be91c-3004-4c68-875e-29a440b9665f","width":2960,"height":1600,"filename":"616826174e651f26d3c755d0_HyperQube-Cover.jpg","type":"image/jpeg","caption":"HyperQube-Cover-Image","border":false}]}
```

### `The future of HyperQube re-establishes it among its competitors, retains its innovative edge while reflecting its mission, and personifies its distinguished character.`

**The Challenge**

HyperQube does the heavy lifting by enabling your team to build a replica of your network. With a click of a button, they can create unlimited custom private clouds, testing, and/or training environments. HyperQube already had a live product that was designed by their engineers and they wanted the redesign the visual and experience of the tool. Although the user flows were good, the lack of UI designs and the incomprehensibility of the components made the UX quite difficult.

‍

Too iconic structure of the platform and lack of information also made it difficult for users who are not familiar with the platform to learn about the product. This has increased our focus on icon selections, tooltips and other informative components in the new design process. Regarding new designs, they were also wanted to build new features such as collaborate working, cursor following, play and stop in the canvas instead of sending user to external link, etc.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2F2819ae92-06fd-4cfb-8acb-e748aff22b67.jpg?alt=media&token=d7a04cd0-83f8-4ac5-be41-7bb30423a70b","id":"2819ae92-06fd-4cfb-8acb-e748aff22b67","width":2960,"height":1600,"filename":"616827948e6c99f46188b3a1_HyperQube-ChallengeCover.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**Approach**

When starting the design process of a product that I have never had to use before, I try to increase my level of knowledge by conducting question-and-answer interviews with potential users or people who have command of the project on the customer's side, in order to learn about the types of use.

HyperQube is not a type of project with a wide variety of usage types. A small SAAS product developed for a specific need and a specific user group. Therefore, it was not very difficult for me to grasp the product.

Collaboration was one of the new features we wanted to develop while redesigning the project. Collaboration, which has features similar to many of the tools used by us designers, has been the part we focused on the most on the product side.

‍

**Research**

On the basis of my research process, I divided it into 2 different categories. In general, I have greatly benefited from competitor analysis to increase my level of knowledge on a product basis. The competitors I examined during this process were "Anvilogic, XM Cyber, Automotive Cybellum, and Orchestra".

On the other hand, I first examined how many tools I use for a flawless collaboration experience. I had the opportunity to be inspired in many areas such as a minimap, cursor follow, invite & share flow, and general UI.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Ff6e1846e-bd7b-4c49-bead-1833d4532d63.jpg?alt=media&token=4119d838-e895-4079-ac08-3dce0cd9c47f","id":"f6e1846e-bd7b-4c49-bead-1833d4532d63","width":2960,"height":1600,"filename":"6169ec51ed740eb87c12a636_HyperQube-Typography.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Fc641ca55-21d7-4c54-95db-cead19153761.jpg?alt=media&token=6a199c94-af80-4d37-8cc6-98121b964ed4","id":"c641ca55-21d7-4c54-95db-cead19153761","width":2960,"height":1600,"filename":"6169ec65054e9d9eeeecabff_HyperQube-Colors.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2F287dda6c-a4bf-4074-9d33-6a7885528473.jpg?alt=media&token=e3684038-93b9-444a-aa19-bb70f1048d35","id":"287dda6c-a4bf-4074-9d33-6a7885528473","width":2960,"height":1600,"filename":"6169ec710075ecc0d72245ab_HyperQube-Components.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**Design Language**

In the current state of HyperQube, the interface style was very old-fashioned and far from fun, although the branding had vibrant colors and a potential fun design language infrastructure.

In the new design language, we preferred more vivid colors of branding. We created a palette of warm colors.

For typography, we preferred Manrope, which provides a clear look in both small and large texts with high readability, in order to support the warm atmosphere we created in colors.

In component designs, we designed components with high border-radius in order to maintain this warm structure in the same way. We have created a corner understanding that is far from a circle structure, but also away from sharp lines.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Fffcd4acf-835e-4dfb-813b-aea164d2487a.jpg?alt=media&token=0a02cba2-815e-4fd2-8069-584edbe9f673","id":"ffcd4acf-835e-4dfb-813b-aea164d2487a","width":2960,"height":1600,"filename":"6169fa7f530195b9f6fe1f18_Hyperqube-Screen-1.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Fd7ff9db4-cd8d-44e0-a883-e3ee83d17942.jpg?alt=media&token=0c2be319-42f4-425e-8510-b2d3658d2035","id":"d7ff9db4-cd8d-44e0-a883-e3ee83d17942","width":2960,"height":1600,"filename":"6169fa8a856b085021523fde_Hyperqube-Screen-2.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2Fbc62e665-3627-4393-9dc9-e1ec736aafa5.jpg?alt=media&token=335207e4-388d-4351-98b4-e062e4b69e39","id":"bc62e665-3627-4393-9dc9-e1ec736aafa5","width":2960,"height":1600,"filename":"6169fa9d55855d0425d68f2e_Hyperqube-Screen-3.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2F96a5052c-190e-4eac-98dc-fbd8cade5927.jpg?alt=media&token=48b9295c-10df-4891-b532-c57c73219c2a","id":"96a5052c-190e-4eac-98dc-fbd8cade5927","width":2960,"height":1600,"filename":"6169faaca35cb33973e714ac_Hyperqube-Screen-4.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FJU45OBPjjzZ6Yi2uqrCyR7BDc9v1%2FmKVUdnKsnuWnfEvyy4qj%2F84913ec1-4916-4704-b464-1eaf9d1d510e.jpg?alt=media&token=a71a516b-221f-45c7-9519-753e999dcadd","id":"84913ec1-4916-4704-b464-1eaf9d1d510e","width":2960,"height":1600,"filename":"6169fab789da1e7959bae692_Hyperqube-Screen-5.jpg","type":"image/jpeg","caption":"","border":false}]}
```

> It was a great process the have Batuhan in our team while we building a new era of HyperQube within a month.
>
> **Kevin Chapman, CTO**

HyperQube

Product Design

Working as a Designer at SAAS Product: Remote Work

I would like to share a design process with you by combining with my previous experiences under the title of being a designer in SAAS product.

To Adapt to the COVID-19 Process as a Product Designer in the Event Industry Company

As we all know, the world is fighting the covid-19 virus. During this period, many sectors were negatively affected. Some experiences we have in social life have been replaced by online experiences. In the company where I work as a product designer, we develop digital products for event organizers and I can easily say that the industry we are in is one of the most affected industries. In this article, I will try to explain how we adapted our products to the online experience and how I managed this process as a designer.

From Unit to Whole Design: About Processes

In this article, I will convey most of the things by giving examples of the design processes of a project while the project’s formation process in Atolye15.

Design Process Management in Product Development

When developing a digital product, regardless of which team you are involved in, you will see that when you manage your workflow process in the right way, the results will be higher quality and less tiring. In this article, I will convey how we built up our design process and how we manage it.

Product Designer

Designer

Goodsted, is a startup based London,UK that helps you support local charities, non-profits and impact startups. Donate your time and talent, volunteer your skills, and create meaningful social and environmental impact.

We're working remotely and collaborating with product managers, engineers to build new features or improve existing ones.

UI/UX Designer

Helping organisations manage their antigen testing rollout

Designed to enable users to build a completely isolated replica of infrastructure.

Socio is the all-in-one event platform that powers continuous engagement to drive better results for virtual, in-person, and hybrid events.

Web and Mobile Products

Talkcast is an independent podcast channel where topics from different fields are discussed and ideas and experiences are shared.

Hoster

Focus Talks is a series of events where people who think, talk and work on the topic they focus on come together.

You can be someone in the world of Interface and User Experience Design, or someone preparing to be a part of it.

What is taken into consideration in user experience and interface design within the scope of Focus Talks UI&UX event? What working methods are followed? What is the process going through? We will listen to them.

At the same time, we will have plenty of time to communicate with each other through the networks we will give while making presentations and lectures.

We would love to see you among us!

Organizer

End-to-End product design for the crypto ecosystem

Senior Product Designer

I worked at SOCIO as a senior product designer. SOCIO is a company based in the United States that has digital products in Event Tech. that has B2B customers who event organizers and also B2C users who attendees of our customer's events.

As Socio employees, we're all completely remote working from different time-zones even before COVID-19.

When I joined the SOCIO, it was a small startup in the market within 1 product, and I was the only designer for preparing designs for web and mobile teams as well as the marketing department. But, in the meantime, with the market requirements, we built 5 more products that designed and managed the design process by me. And I'd say we're almost dominating the market today with our small and big customers like Microsoft, Google, PepsiCo, Pinterest, Harvard University, etc.

After a while, I became the Lead Product Design here within managing 3 designers right now. I also built a design system during the time to prepare components for our designers as well as developers.
see less

Lead Product Design

Atolye15 develops web & mobile applications for startups, enterprises and companies. We provide UI/UX design, front-end development & back-end development services with scalable teams.

When I joined Atolye15 as a mid-level Product Designer. Atolye15 is one of the top 5 digital product agencies in Turkey. So, it was a challengest experience at the beginning. During the time we built too many projects like 30-35 together which include marketplaces, SAAS products, mobile apps, and corporate websites as well. It was a real challenging experience for me so, I improved many of my designing skills there. After a while, I became the head of the design working with 5 designers. With that position, I improved my team management, documentation, clear hand-off process, and design team's tasks management skills too.

Working with;
• Project Manager
• Business Analysts
• Front-end and Back-end Developers
• Illustrators

Responsibilities
• User Research
• User Testing (Usability Testing)
• Information Architecture
• Designing Wireframes and Various Levels of Fidelity Prototypes
• Design Research
• Interaction Design
• Design Workshops
• User Experience Vision
• User Interface Design

Batuhan Karasakal

2021