Back to step one

Back to step one

Continuing from our previous articles, after we finished building the "Deal App" design system in a visual design format, in preparation to hand it over in stages to the Front-End team and study the required time and effort to complete the design system journey within the product, we found through research that the current situation would require the developers to start coding the application from scratch.

Therefore, we began an urgent phase of studying and researching how to facilitate coding the design system while preserving the appearance and diversity that we have achieved and staying within the direction of the front-end team as much as possible.

So, our first step was to form a squad from both teams that would be responsible for identifying specific problems and proposing solutions between them, to answer one question with as many details as possible: "How can we implement one design system between the teams without having to demolish the current application code, especially from the front-end side?"

The journey started from within the framework used by the front-end team (Ionic Framework) and researching ways that could help us without requiring us to start coding from scratch again, such as:

And many others, but these two, in particular, caught our attention due to the presence of most of our component needs in them (with different styling) and their construction primarily aligns with our application's interaction model.

We finally settled on the first option among them because it would greatly help us in aligning with the design system, which differed in the names of the components and the way variants were organized beneath it. This was an acceptable effort for us at the moment, considering the division of work between the two teams, which ensures the smooth flow of tasks between them.

Starting to work on unifying the methods

After settling on using Ionic Framework Design System, it is now time for us as a design team to start unifying our previous steps in creating a design system for "Deal App" with the development aspect of the Ionic Framework.

Our steps were simple, given our focus on our ability to modify and expand the design system during its creation. This specifically helped us. Our first steps were to unify the names of the components.

Then, we unified the properties and variants beneath each component to ensure that the language used between us and the front-end team was the same.

The third step, and the most important, was our initial attention to some of the component shapes that are not currently required or in the expansion plan, but their presence is important, such as the date and time picker, which was not used in our application at present.

Afterward, we began the documentation stage and Hand-off methods to the front-end team that suited them and the tasks assigned to them.




????????? ???????? ???????, ??? ?? ??????? ?? ???? ???? ??????? ????? ?? "??? ??" ???? ?????? ????????? ??????? ??? ????? ????? ??????? ? ????? ????? ? ??????? ??????? ???? ???? ?????? ???? ???????? ????? ???? ???????? ????? ??? ????? ?? ????? ?????? ????? ????????? ???? ????? ????????? ?? ???? ?????.

????? ?????? ?? ????? ???????? ?????? ? ???? ?????? ????? ????? ????? ???????? ????? ??? ????? ?????? ? ?????? ???? ???? ??? ?? ????? ? ?????? ??? ?? ???? ?? ????? ???? ???????.

? ???? ???? ??? ????? ???? ??? ????? ?? ???????? ???? ????? ?? ????? ??????? ??????? ? ?????? ???????? ?????, ??????? ??? ???? ???? ????? ??? ?? ???????? ??????? "???? ???? ???? ???? ????? ???? ??? ???????? ? ?????? ???? ????? ?????? ????????? ????? ?? ???? ????????"

???? ?????? ?? ??? ?????? ??? ???? ?????? ???? ???? ??????? ??? (?????? ???? ???) ? ????? ?? ????? ???? ???? ?????? ? ???? ?? ?????? ???? ???? ??? ?? ????? ???? ??:

https://ionicframework.com/ds

https://stenciljs.com/

? ????? ???? ? ??? ??? ???? ????? ??? ???????? ???? ?????? ???? ?????????? ?? ????????? ???? (??????? ??????? ????) ? ?????? ???? ????? ???? ?????? ????? ? ?????????? ????? ?? ??????? ?????.

? ???????? ?? ??????? ??? ??????? ????? ???? ???? ???????? ???? ???? ??????? ?? ???? ??????? ???? ?? ??????? ?????? ????????? ? ????? ????? ?????????? ?? ???? ? ?? ??? ????? ????? ?????????? ?? ????? ?????? ???? ?????? ??????? ??? ???????? ??? ???? ???? ????? ?????? ???? ??? ??? ???????? ? ????????? ?????

????? ????? ??? ????? ?????

??? ????????? ??? ??????? ?????? ???? ??? ?????? ????? ?? ????? ???? ?? ???? ?????? ???? ?? ????? ??????? ??????? ?? ????? ?????? ????? ?? ??? ?? ?????? ??????? ?? ?????? ???? ???.

? ???? ??????? ????? ???????? ???????? ??????? ??? ??????? ? ??????? ?? ???????? ????? ??? ?????? ????? ?????? ?? ????? ?? ???????, ???? ??? ??????? ????? ? ?? ????? ???????? ?????? ??????????.

? ?? ?? ????? ????? ??????? ? ?????????? ??? ?? ??????? ???? ???? ????? ????????? ???? ? ??? ???? ??????? ????? ? ?? ???? ?????? ? ????? ????? ???????? ???? ????? ????????? ???? ?? ?????? ?????????? ????? ?? ?? ??? ?????? ???? ??????? ??? ?? ???? ??????? ? ????? ???? ??? ???? ?? ????????? ?? ????????? ?? ????? ??????.

????? ????? ?? ????? ??????? ? ??? ??????? ????? ??????? ??? ?????? ???? ? ?????? ??????? ??? ? ?? ????? ????? ?????? ???? ??? ? ??? ???? ?? ??????? ????? ?????? ???? ???? ?? ??????? ? ??? ???? ????? ???? ??????? ???? ?????? ?? ?? ???? ????? ???? ???????? ?????.

Good luck Ashraf ?? ??

回复

要查看或添加评论,请登录

Ashraf Omran的更多文章

  • Navigating Analytics Tools: A Personal Journey of Learning for UX Designers

    Navigating Analytics Tools: A Personal Journey of Learning for UX Designers

    In the ever-changing world of user experience (UX) design, beginners frequently encounter a huge gap between academic…

    1 条评论
  • Bridging the Gap: Transitioning from UX Courses to Real-World Projects

    Bridging the Gap: Transitioning from UX Courses to Real-World Projects

    With the first issue of our article series, which is designed for real-market activities, we start a journey that…

  • 106 Facing the world

    106 Facing the world

    Steps to be taken After finalizing the Figma files, interaction templates, and illustrations and before using them…

    3 条评论
  • Building the core of new products

    Building the core of new products

    Welcome back, everyone! In our previous articles, I talked about the importance of creating a design system and the…

  • Finding the heart of the design

    Finding the heart of the design

    When embarking on the process of finding a new design direction for an app, there are several essential inputs to…

    1 条评论
  • Tackling Challenges from Day One

    Tackling Challenges from Day One

    As a product design leader, my first few weeks at Deal App | ????? ??? were an exciting challenge. I had to tackle…

    5 条评论
  • 101 Introduction

    101 Introduction

    In Love of my Product design team Somaya Ibrahim??, Mohamed Bakr, Mohammad Medhat, Yara Fathy, Sara Fathy, and Aya…

    3 条评论
  • UX Case Studies: From Problem to Impact

    UX Case Studies: From Problem to Impact

    User experience (UX) case studies are an essential part of creating successful user experiences. They allow designers…

    2 条评论
  • UX Researcher's Salary in Egypt

    UX Researcher's Salary in Egypt

    The field of technology is constantly evolving, and user experience (UX) research has become an increasingly important…

  • Optical corrections

    Optical corrections

    I started my design career working in print design (brochures, leaflets etc), where I applied grid systems to my…

    1 条评论

社区洞察

其他会员也浏览了