Ep 6: When a Cool Idea Hurts UX

0:09Welcome to another episode of Curiosity

0:09Builds. I'm Trevan and today we are

0:12going to update something on our native

0:15website. Actually, we're going to look

0:17at something I did in good fun making an

0:22update to our about page and our FAQ and

0:24our meet sections because they were a

0:27little drab and needed a facelift and I

0:30got way over carried. Uh let's just look

0:35at this. So, I was really excited

0:36because this has been so much fun to do.

0:39I thought, yeah, let's clean this up.

0:40Let's make it cute. Let's look at the

0:42old site first. So, the old site was

0:44this. This is the about and then you'd

0:46go to read the FAQ. It's a lot of text.

0:49There's a lot of scrolling and I

0:50thought, you know, we need to make this

0:52a little more modern. So, let's let's

0:54jazz it up. And I got too jazzy. So,

0:57okay, all the questions here, you would

0:59expect this to pop down, but actually it

1:01pops up in your face. And then

1:02everything else is blurred out. And you

1:03have to do another action here to see

1:05this. And you have to, it's basically

1:07scan, read, click, read, click, scan

1:11again. And I got a lot of feedback from

1:14Daniel and I needed to take that

1:17seriously because part of what we're

1:19trying to do with our curiosity and our

1:22position on AI literacy and how to use

1:24these tools is strategic application.

1:27Knowing when not to use AI. Now, of

1:29course, I'm using AI to make this, but

1:30it doesn't mean I needed to go that deep

1:32with it. You need to think a little more

1:35about what you're doing before you do

1:36it. Just cuz I have all these cool tools

1:39at my fingertips doesn't mean I need to

1:42exercise all of them all the time. Uh

1:45the R team thing, I did the same thing,

1:48you know, made these bigger. Uh

1:50previously they'd been right here next

1:52to each other small and then you have to

1:53click it and it's there again. So

1:57removing the amount of clicks is better.

1:59I didn't really do that. I think it

2:01looks better as a package, but it's

2:03still like too much going on. They just

2:05want to get the information about us,

2:07reach out if they want to. So, we're

2:09going to implement some fixes to kind of

2:11update all of this. I got feedback from

2:14Daniel that the changes we made to the

2:16about page, FAQ, and meet us are a

2:19little too much. So, I want to roll them

2:21back and try something else. Here's the

2:24feedback I got. Colon. The page has

2:27helpful section clustering and

2:31looks very sharp, but every answer is

2:33hidden behind a button. Users can't skim

2:35to understand what's available. They

2:37have to click through repeatedly. This

2:39creates huge interaction friction that

2:41defeats the purpose of a page where we

2:43want people to be able to quickly browse

2:46and find relevant information without

2:49constantly clicking.

2:51So, that's an exact quote I got from

2:54Daniel. Um, after he looked at what I

2:56did, let's see if we can implement a fix

3:00to this based on the feedback. I want to

3:03plan it out to look sleek and still feel

3:06smOAuth and fresh, but dialing back the

3:08interactions a user has to take, the

3:10actions they have to take.

3:13Kind of worded that funny. I also have

3:17some more direct kind of quick fixes

3:22that Daniel suggested that I'm going to

3:24copy and paste in here.

3:26So, let's give it this plan and see

3:29where it goes.

3:33Remember, I like to plan first. It's

3:35going to go through, look at everything

3:37we want to do, check the state of the

3:38website, see where it needs to grab the

3:41different pieces of information around

3:44my terminal, my files, and then it'll

3:47build out a plan that we can read and we

3:49can add stuff to it, delete stuff to

3:51from it before it executes. That is

3:55sometimes smarter when you're doing,

3:57it's actually almost always smarter when

3:58you're doing something very complicated.

4:00It allows you to double check the AI. It

4:02allows you to read everything and see if

4:04you're in agreement. And even then, it

4:06will still make mistakes and have

4:08problems. But if you read the plan,

4:10you'll have a better idea of where it

4:11might have gone wrong if it does. So,

4:14which routes should this update apply

4:16to? Only about blah blah blah. So, we

4:20want this to apply to the about FAQ

4:23combined only.

4:25And then for the FAQ accordians, they

4:28should be visible by what should be

4:30visible by default? All FAQ items

4:32expanded by default. First item in each

4:35section expanded by default. Show a

4:37short summary per section. Expand on the

4:40items. Expand items on click.

4:44I'll do that.

4:48Continue. And then I have some more

4:49ideas. So I'm going to add a follow-up

4:51while it's thinking. It might ask me

4:52more questions and interrupt us. But

4:56when you click out of a section

4:58anywhere, I want it to collapse back. I

5:01don't want you to have to click an open

5:03and close button for the FAQ.

5:06Additionally, for the meet the team

5:09page, I want to take the expanded

5:13view with the picture and all of the

5:16information, and I want to just keep

5:18that static on the meet us page. So when

5:23you go there, it's just sitting there,

5:25both of us next to each other with our

5:26information.

5:33Okay. So I'm adding this

5:33to the plan it made. So here's the plan.

5:36It's got so far telling the context of

5:39what I gave it, the implementation, the

5:42risks, the tests, the to-do

5:44implementation. It's going to update the

5:46section heading. It's going to extend

5:48the FAQ parser to capture optional

5:50section summaries. It's going to rebuild

5:53everything. All the different things

5:55it's going to go through right here. Uh

5:57it's going to

6:01well it's not going to do anything. It's

6:02going to say it has no sit summary block

6:04gracefully. Good. Um it is not going to

6:06run a test. I'll verify it through the

6:09localhost. Here are the to-dos. But

6:12it's asking us another question based on

6:14the update I gave it. So which page

6:16should follow the static expanded team

6:17profiles fully side by side? Meet team

6:22demo page or team page. That's the team

6:24page. Reuse the existing expanded team

6:27member layout. Yeah.

6:31Doesn't have to do more work. It already

6:33built those items. So, it's just going

6:35to take it from this expansion and just

6:38hopefully plug this card just onto the

6:41website. That way, it's one click, not

6:44two, and you see everything once you

6:46arrive. So,

6:49it added

6:51another to-do. Now we click build and we

6:54see what happens. This will take a

6:57minute. So I am probably going to do

7:01some magic editing to fast forward to

7:02get us to the end of this thought

7:05process. So you don't have to sit here

7:07for 10 minutes. Although 10 minutes is a

7:10little much. Probably one to five.

8:42Okay, got the local preview up, going

8:42through, and it's doing what it thinks

8:44it needs to do. And let's see. It's

8:47looking a little strange on here, but I

8:49think it's just for the viewing. Uh,

8:51let's go look at the about us FAQ and

8:54see what it's done. All right. Actually,

8:58even easier. Let's look on the expanded

9:00preview. Okay. Yeah, it gave us the bio

9:03cards here. Not as cool looking as the

9:06original layout. I do think I'd like

9:08this all to be in one container instead

9:11of two. So, let's add that update.

9:16For the meet the team page, I want it to

9:20have everything in one container for

9:22each team member. So, you've got the

9:24picture and their bio next to them

9:29all looking complete. Right now, the

9:32picture is in one container and the bio

9:34is in another container. So, it looks a

9:36little separate.

9:38And I'm just going to have it go for

9:40that while we look at what else it did.

9:43Let's go back to home. Let's take a look

9:46at FAQ.

9:49It did not

9:51apply any updates to this. I wonder why.

9:54Could be.

9:57It could be. Oh, it did. Okay. Right.

10:00Because it's just doing that. It's just

10:02folding down. It's not popping up.

10:05So, this is a little better. It did not

10:10add a view all button. I think it missed

10:13that part. Or I might have missed

10:16telling it to do that. This isn't bad.

10:18Um,

10:20I don't know what Daniel will think.

10:22because you have to click again to get

10:24information, but it's not you're not

10:26leaving. It's not popping up and hiding

10:28everything else. You can scan getting

10:29started about Yeah, maybe this is

10:31better. Maybe we do

10:41maybe we do

10:41consolidate some of these sections a

10:42little bit, but I don't want to get too

10:43caught up. I don't want good to be the

10:45enemy of perfect or however you say

10:47that. So, we'll we'll call this okay for

10:50now. Um,

10:52oh, it says back to about at the top. We

10:55got to fix that as well

10:57because this doesn't go anywhere because

10:59there's no about left, I don't think.

11:00So, we'll just click this back to home.

11:03Yeah. So, we want that to say back to

11:06home. And then we also want

11:10meet the team toggle here. So, let's ask

11:26I also want the back button at the top.

11:26Well, there's text at the top that

11:27allows you to go back to the page you

11:29were at previously. It says back to

11:30about. It needs to say back to home and

11:32then link back to the landing page.

11:36Also,

11:38I want to

11:40make sure that anywhere in the website

11:46where you go to about, it says about

11:50FAQ, and it takes you to this same page.

11:54We want to take the meet the team

11:58button, just that one, and put it on the

12:01FAQ about page as well,

12:04so people can go to our page from there

12:07if they want. Okay,

12:11it'll work on that. I do want to go see

12:13what it did on the meet us page.

12:17So, we have to do this, I think, because

12:21this is that was a dead link, which is

12:23why I had to update it. So, let's go

12:24over here. Let's go to our team.

12:28Oh, that's better, right?

12:30I think that's better. Um,

12:35yeah, it's better for now.

12:39Better for now. I wish No, we'll call it

12:43We'll call it Okay. And then this does

12:44say back to home.

12:51still working on it. This should be kind

12:51of a faster change though. I do

12:54believe, and I could be wrong, that when

12:57I toggle back and forth between pages or

12:59different things, it's giving less

13:01preference priority to what's going on

13:04here. So, it slows it down. But that

13:06could just be my imagination. I probably

13:08should look that up and ask more and

13:11learn more.

13:13But yeah, I overdid it. Daniel's right

13:16with this addition. So rolling it back a

13:20little bit is smart. Making it a little

13:22more expectable to what people are used

13:25to. We do have a pretty large FAQ. We

13:28might want to think about pairing that

13:30down later. But this is a good practice

13:33for me in applying, you know, strategic

13:36application and pausing a little more. I

13:39just launched right in. I was so excited

13:41because I thought, "Oh, this is what I

13:42want to see. How do we do this?" And I

13:45overdid it. So these are looking like

13:49they are going to be the changes we

13:51want. About FAQ back to home.

13:57And there what makes different

14:00meet the team.

14:02All right.

14:04Oh, let's double check the dropdown

14:07about FAQ. I wanted to say slash. So,

14:13still working on a few things.

14:16Whenever it gets down here and says no

14:17linting errors, linting is the last

14:19thing it does, which is, you know,

14:20spacing.

14:22It usually throws out what it did. So,

14:28let's just double check there wasn't any

14:29last minute sneak in there.

14:32Yeah. No. Okay.

14:34All right. Everything looks good except

14:36I want to add a slash between about and

14:38FAQ. wherever we have that listed.

14:48That should be a pretty fast little

14:48pretty fast little change here.

14:50And once we see that, we will ship this

14:53and call it a lesson. And if we get more

14:57feedback, we'll discuss it and we'll try

15:00something different. But it's fun. Doing

15:02this stuff is fun. And it's okay to get

15:04over excited, but you can be a little

15:07more thoughtful. And I can apply a

15:09little more of our pausing before we

15:11act, our stopping, questioning,

15:15understanding, and then deciding.

15:19Um, yes. Yes. So, it added the slash

15:23here. It added the slash here. One last

15:27run through. So, I go to FAQ

15:31right there. By the way, it does work a

15:33little slower on the local preview. It's

15:34faster on the actual website. These all

15:37expand down. I can click out of them

15:39anywhere. Meet the team works. These are

15:43all clickable back to home. All right.

15:47Well, let's commit this.

15:51All right. Let's commit the changes and

15:53push them.

15:55So, what that's going to do is save

15:57everything on my computer and then work

15:59to upload them to GitHub so that way

16:01they can create a PR or pull request. My

16:06partner Daniel will get a notification.

16:07He'll come back and look at the changes.

16:09If he thinks we're groovy, then he will

16:12build it and it will launch to the live

16:15site hopefully tomorrow morning or

16:17tonight.

16:23Anyway, stay curious, don't forget to

16:23commit and have a wonderful day.

16:25Next episode we will be back on the

16:29Gabfest Ledger.