What Comes First, User Experience or Software Architecture?

Hussein Nasser · Intermediate ·🏗️ Systems Design & Architecture ·8y ago

Key Takeaways

The video discusses the relationship between user experience and software architecture, exploring whether to design the user experience first and then the system architecture or vice versa, using examples from Instagram and other applications.

Full Transcript

what's up y'all this is Hossein Nasr from I geometry podcast welcome to the third episode of our podcast here guys help you relax enjoy the show today I want to talk about user experience that's actually a very very cool topic and it's user experiences is what the users see and experience really right and when you build an application when when you own a user interacts with a certain webpage or a mobile app or or a desktop app really and and and and what how it looks like what buttons do we have you know how many clicks should the user do clicks on when using a mouse right but how many touches when you were using your phone and to achieve a certain functionality or a certain task how many how many clicks does he have how many pages had should you he/she go through in order to do a certain task right so so that is what is a user what a user experience and it's more than that but what I wanted to talk about is when we as developers right as engineers as software engineers do you do you design the soft the user experience first and that leads you to the rest of the whole stack or you designed the entire you architect the entire stack then you designed the user experience that actually it could be a controversial topic really their weekend we're gonna discuss like maybe disadvantage and disadvantages for each right eye like we're gonna make this spot that's real sure so so as a user experience Oh what we're doing my stack yeah I know I'm gonna couple that into another series of log maybe not necessarily a podcast but what we have is like you design a certain app right you I want this small application I want to design a wax app for example or Instagram right so this is how it looks like Instagram you open it you see your feed and you go through your feet of pictures and you click on a picture right if you if you clicked long enough it will expand and it's as you zoom in you can you can zoom in pinch and do more cool stuff you can comment you can like right and now what happens and you have this input right now what do you need to design an attack and there's a lot of work right for example take the feed for example right so if I open the Instagram I'm supposed to show the feed how many pictures should I show should I show all of them should I make the request to pull all these pictures for this feed that could be expensive right because what if he has like a thousand pictures we don't do that so we page them right so like for example I want to show me the first end right and I if you zoom in and if you remember they're all days you have to click like a button ok show me more now it's this more than a sec as you scroll we make this and we send another request to pull the next 10 pictures or so and it's just really quick like if you as you knows that a this guy is required more and more or no more pictures and so on so yeah so the user experience kind of derives the what are what is the back end and we're gonna talk more and more about this right after this all right so we just designed our interface the user interface and we let's continue taking Instagram as an example so now what we want to do is now that I designed this should I make the back end as a service oriented or should I make it as a cue database obviously the moment we decide that oh it's a mobile app you can make it just as a data base or I do have to have it at the service now you have to think about the back end not only the service what is the service hitting is it hitting a relational database or is it hitting distributed no sequel database now this answer is what kind of questions this kind of answer right is do you really care if a user opens do you really care about acident attributes and I made a lot of videos on my youtube channel you guys can check it out on asset database asset in general so like this attribute which is atomicity consistency isolation and durability so do these attributes matter for you for your app that you desire is it if I make a like do does this like have to hundred percent persist otherwise we all die right or not so enough for if you're building a financial institution app then yes obviously right so but that's where you need relational databases right no I'm not saying that no sequel databases are is creepy they are not beautiful or anything but they have the concept of eventual consistency but if you want immediate results you might want to get a relation database right but otherwise I take this example now I have this app and who are my users are they in the United States are they the entire world now we have to worry about okay if this apps gonna scale I probably want a database that people can upload gotta upload thousands of thousands of pictures a wall a relational database do that you know that right relation database does not scale well because they are designed to run on one box so your box better have one location right so it's either in the east or west or and all these services hitting that box right there are obviously ways to scale my database I mean this this talk has we has went through the wrong direction but but he has just we're talking about the user experience and how how can we as a user experience kind of drive the back end design like you ask you all these questions because you have a user experience to begin with you have an an initial user experience you have something and then you start the design the other way right so you start the backend design your services your databases your network your is really become the full stack engineer Nana Raya I'm gonna I'm gonna make a video another video vlog what just maybe a lot about full-stack engineering but yeah so we have another 1 minute I wanted to discuss about yeah this is one way to do it other way is and design your system architect your system hey I'm gonna use I'm gonna building an Instagram app but I want to use this and this and this on December and then you derive if a user at experience of whatever api's you provide so you build the api's first and then you start building the user experience most of the time you're gonna end up with a crappy user experience in Maya because like if I've got a designer I am an engineer right we have if I am an engineer I gonna design an app that gets photos I'm gonna say like get photos a good picture and that's it then and that gets all the photos right and back in the user experience user experience I'm gonna like the open the app and then call that get picture and then you and I end up with a whole list of everything then you start needing more information more and more so you have to agree agreement these api's accordingly guys alright so guys bottom to top or top to bottom in your opinion guys what do you prefer design the user experience first and that leads to the whole stack or design the stack and then worry about the user experience later I'm sure there are most must be sorry excuse me there must be advantages and less advantage for both because while designing the stack you kinda if you begin designing the stack you will optimize for the stack right but if you design they use but but you gonna end up with a poor user experience but if you end up starting with the user experience and then design a stack then you were ganna prioritize what the user needs but then you might end up with a lot of other performance problems so I'm not saying one is better than the other but what do you think hit me up in the comment section here with an anchor FM or over there and YouTube if I have loaded that to you so yeah let me know Twitter Facebook yeah what do you prefer what do you think what is your take on that and I'm gonna see in the next podcast you guys take care good bye

Original Description

Follow my Anchor.fm RSS Feed here https://anchor.fm/s/1eb6d14/podcast/rss Do you architect the system first and then build the user experience for your end user clients? Or Are you the kind of engineer that design the user experience first and let it drive the rest of system? We talk about advantages and disadvantages of both! We are using Instagram as a use case in our analysis. Enjoy Stay Awesome Hussein Nasser
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Hussein Nasser · Hussein Nasser · 27 of 60

1 Extending ArcObjects (IGeometry) - 01 - Getting Started
Extending ArcObjects (IGeometry) - 01 - Getting Started
Hussein Nasser
2 Extending ArcObjects  (IGeometry) - 02 - The Document, The Map and The Layers
Extending ArcObjects (IGeometry) - 02 - The Document, The Map and The Layers
Hussein Nasser
3 Channel Update - New Book, New Job, New Videos
Channel Update - New Book, New Job, New Videos
Hussein Nasser
4 Learn Programming with VB.NET - 01 - Getting Started
Learn Programming with VB.NET - 01 - Getting Started
Hussein Nasser
5 Learn Programming with VB.NET - 02 - Classes and Objects (Part 1)
Learn Programming with VB.NET - 02 - Classes and Objects (Part 1)
Hussein Nasser
6 Learn Programming with VB.NET - 03 - Classes and Objects (Part 2)
Learn Programming with VB.NET - 03 - Classes and Objects (Part 2)
Hussein Nasser
7 Learn Programming with VB.NET - 04 - User Interface
Learn Programming with VB.NET - 04 - User Interface
Hussein Nasser
8 Learn Programming with VB.NET - 05 - By Value v. By Reference
Learn Programming with VB.NET - 05 - By Value v. By Reference
Hussein Nasser
9 Learn Programming with VB.NET - 06 - Variable size, 32 bit vs 64 bit
Learn Programming with VB.NET - 06 - Variable size, 32 bit vs 64 bit
Hussein Nasser
10 Learn Programming with VB.NET - 07 - Conditional Statements
Learn Programming with VB.NET - 07 - Conditional Statements
Hussein Nasser
11 Learn Programming with VB.NET - 08 - Inheritance
Learn Programming with VB.NET - 08 - Inheritance
Hussein Nasser
12 Learn Programming with VB.NET - 09 - Strategy Design Pattern
Learn Programming with VB.NET - 09 - Strategy Design Pattern
Hussein Nasser
13 Learn Programming with VB.NET - 10 -  How did I learn programming
Learn Programming with VB.NET - 10 - How did I learn programming
Hussein Nasser
14 IGeometry 2016 Retrospective - Channel Update
IGeometry 2016 Retrospective - Channel Update
Hussein Nasser
15 Javascript by Example - The Vook
Javascript by Example - The Vook
Hussein Nasser
16 Vlog - Keep your servers close and your database closer
Vlog - Keep your servers close and your database closer
Hussein Nasser
17 Vlog - Client/Server Programming Languages
Vlog - Client/Server Programming Languages
Hussein Nasser
18 Javascript By Example L1E01 - Getting Started
Javascript By Example L1E01 - Getting Started
Hussein Nasser
19 Persistent Connections (Pros and Cons)
Persistent Connections (Pros and Cons)
Hussein Nasser
20 Javascript By Example L1E02 - Building the Calculator Interface
Javascript By Example L1E02 - Building the Calculator Interface
Hussein Nasser
21 Happy new Year from IGeometry!
Happy new Year from IGeometry!
Hussein Nasser
22 Synchronous v. Asynchronous
Synchronous v. Asynchronous
Hussein Nasser
23 Javascript By Example L1E03 - Displaying the Digits on Calculator Screen
Javascript By Example L1E03 - Displaying the Digits on Calculator Screen
Hussein Nasser
24 Show Your Work. Blog, Vlog, Write, Create and Develop!
Show Your Work. Blog, Vlog, Write, Create and Develop!
Hussein Nasser
25 Relational Database Atomicity Explained By Example
Relational Database Atomicity Explained By Example
Hussein Nasser
26 Javascript By Example L1E04 - Operators, All Clear with Arrow Functions
Javascript By Example L1E04 - Operators, All Clear with Arrow Functions
Hussein Nasser
What Comes First, User Experience or Software Architecture?
What Comes First, User Experience or Software Architecture?
Hussein Nasser
28 Javascript By Example L1E05 -  Evaluate the Calculator Expressions with eval
Javascript By Example L1E05 - Evaluate the Calculator Expressions with eval
Hussein Nasser
29 Fastest Way to Learn Programming Language or Technology
Fastest Way to Learn Programming Language or Technology
Hussein Nasser
30 Javascript By Example L1E06 -  Fix Leading Zero Bug with Conditions
Javascript By Example L1E06 - Fix Leading Zero Bug with Conditions
Hussein Nasser
31 Stateful vs Stateless Applications (Explained by Example)
Stateful vs Stateless Applications (Explained by Example)
Hussein Nasser
32 Javascript By Example L1E07 - Running our Calculator on the Mobile Phone
Javascript By Example L1E07 - Running our Calculator on the Mobile Phone
Hussein Nasser
33 Advice for New Software Engineers and Developers
Advice for New Software Engineers and Developers
Hussein Nasser
34 Why JSON is so Popular?
Why JSON is so Popular?
Hussein Nasser
35 Building Scalable Software - SLA, HS, VS
Building Scalable Software - SLA, HS, VS
Hussein Nasser
36 Vlog (Istanbul) - Datacenter Proximity
Vlog (Istanbul) - Datacenter Proximity
Hussein Nasser
37 Should Software Engineers Learn Bleeding-Edge Technologies?
Should Software Engineers Learn Bleeding-Edge Technologies?
Hussein Nasser
38 Do Developers Build Bad User Interfaces/Experience?
Do Developers Build Bad User Interfaces/Experience?
Hussein Nasser
39 Learn By Doing.
Learn By Doing.
Hussein Nasser
40 I Wrote Bad Front-End Code That Broke Chrome
I Wrote Bad Front-End Code That Broke Chrome
Hussein Nasser
41 My Story
My Story
Hussein Nasser
42 Vlog - Horizontal vs Vertical Scaling
Vlog - Horizontal vs Vertical Scaling
Hussein Nasser
43 Can User Experience Help Build Better Rest API?
Can User Experience Help Build Better Rest API?
Hussein Nasser
44 Reverse engineering Instagram in flight mode
Reverse engineering Instagram in flight mode
Hussein Nasser
45 The Benefits of the 3-Tier Architecture (e.g. REST API)
The Benefits of the 3-Tier Architecture (e.g. REST API)
Hussein Nasser
46 Stateless v. Stateful Architecture (Podcast)
Stateless v. Stateful Architecture (Podcast)
Hussein Nasser
47 The evolution from virtual machines to containers
The evolution from virtual machines to containers
Hussein Nasser
48 Proxy vs. Reverse Proxy (Explained by Example)
Proxy vs. Reverse Proxy (Explained by Example)
Hussein Nasser
49 Canary Deployment (Explained by Example)
Canary Deployment (Explained by Example)
Hussein Nasser
50 No Excuses
No Excuses
Hussein Nasser
51 Synchronous vs Asynchronous Applications (Explained by Example)
Synchronous vs Asynchronous Applications (Explained by Example)
Hussein Nasser
52 What is an Asynchronous service?
What is an Asynchronous service?
Hussein Nasser
53 Difference between Client Polling vs Server Push in Notifications
Difference between Client Polling vs Server Push in Notifications
Hussein Nasser
54 Software vs. Hardware AdBlockers (Explained by Example)
Software vs. Hardware AdBlockers (Explained by Example)
Hussein Nasser
55 HTTP Caching with E-Tags -  (Explained by Example)
HTTP Caching with E-Tags - (Explained by Example)
Hussein Nasser
56 Simple Object Access Protocol Pros and Cons (Explained by Example)
Simple Object Access Protocol Pros and Cons (Explained by Example)
Hussein Nasser
57 Nodejs Express "Hello, World"
Nodejs Express "Hello, World"
Hussein Nasser
58 Reverse Engineering Instagram feed
Reverse Engineering Instagram feed
Hussein Nasser
59 Popup Modal Dialog with Javascript and HTML
Popup Modal Dialog with Javascript and HTML
Hussein Nasser
60 MIME and Media Type sniffing explained and the type of attacks it leads to
MIME and Media Type sniffing explained and the type of attacks it leads to
Hussein Nasser

The video explores the debate between designing user experience first and then system architecture or vice versa, discussing the advantages and disadvantages of each approach and providing examples from real-world applications.

Key Takeaways
  1. Design user experience first
  2. Determine system architecture based on user experience
  3. Consider scalability and performance
  4. Choose appropriate database design
  5. Implement API design
💡 Designing user experience first can prioritize user needs, but may lead to performance problems, while designing system architecture first can optimize for performance, but may result in a poor user experience.

Related AI Lessons

Data Partitioning in System Design: Why Every Scalable Application Depends on It
Learn how data partitioning enables scalable applications to handle growth without failing
Medium · Programming
Why Realtime Collaboration Is Harder Than It Looks?
Realtime collaboration is a complex distributed systems problem that requires careful engineering, not just a simple UI feature
Medium · JavaScript
Podcast: Architectural Patterns: Moving Beyond Cloud-Native to Local-First - Insights from Adam Wiggins
Learn how to design local-first architectures that combine cloud-based collaboration with local software performance and data ownership
InfoQ AI/ML
Three Questions I Ask Every System. Most Design Reviews Skip All Three.
Learn three crucial questions to ask during system design reviews to identify potential issues and improve architecture
Medium · Programming
Up next
Retracing It All With My Son
Ginny Clarke
Watch →