amberviernes - Tumblr blog

[amberviernes]

Reflection #7 (The Final Senior Capstone Reflection!)

Hello everyone! Here is my final reflection video (7 minutes 21 seconds), where I discuss what it was like to work on my senior capstone from the research paper phase, to the deliverable stage, and what I learned from the video.

While I really enjoyed learning about my topic- the most valuable gains from the senior capstone (for me) would be the skills I developed from having a project that was out of my comfort zone. All around, I’m pretty grateful that the senior capstone could facilitate a transitionary period to getting a career after graduation!

Going forward, this blog will continue to remain online! I may still continue to post web design related things to showcase things I’ve been working on- but I’m not entirely sure right now.

But what I do know, is that for anyone who wants to see any posts related to my senior capstone project, you can check out the #CM 491 tag on my Tumblr! I also outline the basic premise of the project on this page too, for those of you who’d like additional context/information on my blog.

And for those of you who would like to see the final project, feel free to drop by the completed website below!

Authenticity Showdown

Thank you to everyone who’s provided support in the past two semesters! It’s been a long time coming, but I’m really happy with how the project turned out, as well as the skills that I gained from it.

To future senior capstone students, good luck! You are all going to do great~

Signing out, Amber ✨

[amberviernes]

Proofreading: Part II (COMPLETE!) + Some Other Finishing Touches

Hello everyone, I am delighted to say that I’ve finished proofreading the sub-analysis pages, and everything looks good to go! There’s a lot that I’ve done in order to reach this state of, “Yeah, the website looks good to go!”

I started with doing desktop proofreading (and constantly modifying the width of the web browser). Once it was good to go, I moved on to the next stage.

Afterwards, I made a PDF for the survey results using Google Docs. I intentionally held back on doing this earlier in the process since I felt that this wasn’t as important, and I was confident that I could make the PDF look alright using a simple solution.

Earlier in the project, I thought about applying the website aesthetic to the document and possibly trying to use Adobe InDesign (which I have no experience in, unfortunately). But I knew that I might be overthinking about this too much, and in the interest of prioritizing more important aspects of the project (the website), I put it on the backburner.

And honestly? I’m glad that I made that choice, since the PDF created with Google Docs looks fine. I also thought to myself that if someone was using the survey PDF, they’d likely want it to be as simple as possible, and I think Google Docs captures that very well.

I also did some clean-up to the survey results spreadsheet! This spreadsheet contains the responses for the survey, as well as some additional statistic breakdowns that would be too much to put on the website. Hopefully it’ll be convenient to anyone who is browsing the sheets!

After doing that, I decided to install Google Analytics- it’s not really all that necessary for me to do that but I thought it’d be good to familiarize myself with the process since I’d like to pursue web design after I graduate.

At first, I followed this tutorial from Steward Gauld:

It’s a great video, very thorough and easy to follow! The only caveat though, was that there were some weird compatibility issues with the plugin used in this video (GA Google Analytics), and Elementor. Whenever I’d click an image on the website that has a lightbox (this thing below), it’d instead take me to the direct media file link, which I didn’t want.

So instead, I ended up having to go with a different plugin, specifically, MonsterInsights! For details on how to install a Google Analytics plugin for Wordpress, check out these articles that I read:

WPBeginner’s Tutorial on Google Analytics Installation

Elementor’s Guide on how to Install Google Analytics on Wordpress

And for those of you who want to know more about Google Analytics, I’d recommend this article.

Since I was collecting data- I also decided to add a privacy policy to the website (even if none of these are specific things like name, address, etc.). It’s a good practice to get into especially if you’re collecting any of that kind of information (and it helps improve SEO).

Wordpress does provide it’s own personalized guide on how to write this privacy policy with some suggested text, but I had to do some additional research to account for the data that Google Analytics collected. So I ended up referencing some other website’s privacy policies, like UH West Oahu’s Privacy Policy! Here are some other related guides on privacy policies that I read:

UC Berkeley’s Guide on Privacy Statements

Termly’s Breakdown of Google Analytic’s Privacy Policy

How to Comply with GDPR with Google Analytics

Data Retention with Google Analytics

In all honesty I still don’t really understand privacy policies and whatnot but this is a good start to make, I feel!

And I also ended up reading some misc. stuff too, in order to help launch the website. They don’t have any real category to put in but I wanted to share them anyways just to document the fact that, “Hey, I read these!”

WP Beginner’s Guide on how to add WordPress Site to Google Search Console

Chromium Blog on Mixed Messages about HTTPS

How to Properly Move WordPress from HTTP to HTTPS (Beginner’s Guide) from WPBeginner

What is .htaccess file?

Once I read through all these articles, I ended up doing one last proofread for the website, this time from my phone using Google Chrome! I ended up needing to fix up the conclusion page, since the double digit numbers ended up flooding into another line (rather being on the same line). It was annoying but I ended up downsizing the font for mobile users, so they should be on the same line now!

There were some other typos/mistypes/missing spaces/etc. that I caught during this final proofread, since I decided to deliberately read out the content of the website. It was a bit exhausting to do so, but honestly, I’d rather proofread a bunch than face the humiliation of messing up on a website that’s intended to look professional.

And that’s all from me! Did lots of reading today in the website finalization process and I can definitely say I’ve learned a lot. It might not be a whole encyclopedia’s worth, but I’m slowly working towards that point!

Now, I just have to ask Sharla if I need to do anything else for the deliverable of my project. It’s so surreal to me that we’re at this point- but I’m definitely grateful for the journey that I’ve embarked on! but for now, see you all later!

[amberviernes]

Proofreading: Part II (A Work in Progress)

Hello everyone~ Just checking in to say that I’ve been working on proofreading the 14 sub-analysis pages. The proofreading checks are simultaneously easy and challenging at the same time!

To help streamline the process, I ended up creating a checklist on Google Docs to follow:

I would then make as many of these changes as possible in Elementor! Then, I’d look at the website outside of the page builder, and go through this checklist to see if I made the changes that I needed to do. Sometimes, I would miss one of the steps, because I would be preoccupied with trying to fix something else (focusing on one thing => missing other things).

I feel that these pages are essential to proofcheck since they contain the most important info in the survey. I was checking them against the spreadsheet to make sure the information was consistent, and I was also checking for consistent sentence structure across the different pages. I wanted to make sure that these pages all felt familiar and easy to understand to curate a good user experience.

I’m about to take a break from the proofreading process as I noticed that I’ve been acting hastily. So for now I’ll end the session. I think I’m mostly done with proofreading the content, but I’ll try and take a look again at a later time today.

Next session, I plan on checking the responsiveness of the website by constantly changing the width of my Chrome Browser. I think the statistics of the subanalysis pages may face some issues on that front (mostly on tablet I think...?) but I’m hoping it’ll look okay. I also noticed that some of the padding is a bit weird on mobile versions, so I’ll be implementing that later.

I also need to do some performance reports through GTmetrix, so far I’ve run 3/14 sub-analysis pages through their site. Most of my pages have received an A grade (with the exception of the conclusion page, which got a B), so I’m pretty happy about that!

And of course, there’s also the survey PDF, which I will be working on shortly! But for now, break time! See you all back in a bit~

[amberviernes]

Proofreading: Part I (COMPLETE)!

Hello everyone! Finished the first phase of proofreading, which encompassed proofreading the main pages (button clicking, grammar, and making sure the responsive versions look right), as well as running it through GTmetrix. I ended up getting 11 pages of proofreading notes (2.4k words), but they were all helpful in making sure I thoroughly looked through the website!

Here’s the last few things I’ll be doing to wrap up this project:

Proofread the 14 sub-pages following the aforementioned steps!

Create the survey PDF for the survey results page (I’ll likely write something up in Google Docs and then download as a PDF since it’s not as essential for me to go design heavy on it?)

If any other feedback is given, incorporate as necessary.

And that’s all! I feel really relieved that most of the building is done. I’ve learned a lot and I can’t wait to share my personal growth from working on this project in a final reflection video!

[amberviernes]

undefined

Proofreading Underway!

Hello everyone~ Wanted to let you all know that I’ve begun the proofreading process today! The process involves three main components:

Clicking buttons to make sure they work as intended

Making sure my written content is clear/precise

Making sure that I didn’t miss anything with the responsive versions of the website (constantly changing the width in Google Chrome)

I am also running tests through GTmetrix to ensure a smooth website experience!

I’ve compiled a bunch of notes on a Google Doc so that I can implement them once I’m done checking the website. I find it a lot easier to proofcheck with the built website compared to Adobe XD, maybe because it’s easier to copy and paste things into the proofreading doc?

I’m not quite done but I’m happy to say that I’ve at least proofread the header, footer, homepage, about page, further reading page, and most of the conclusion page (just one section left I think!). It’s been a fast process and I’ll be working to put these changes in the website ASAP!

[amberviernes]

undefined

Authenticity Showdown: Website Build, Desktop Version (v.2)

Hello everyone, happy to say that I finally got the second draft (is it called a draft? no idea, haha!) of the website done. In the previous draft (April 6th), the sub-analysis pages still needed to be fleshed out with real content.

Since the previous version, I’ve gotten the chance to export charts with real data, update the key figures section with real numbers, put real text for the sub-analysis pages (reason for selection + verdict section). I also gave the conclusion page a revamp too, since I wanted to modify some of the section and information!

Should I have taken 2 weeks to get to this point? Honestly, I do think it could’ve been faster (the survey was closed on April 11th), but also, I’ve never worked with a website that has pages with repeated page layouts so it would’ve been difficult for me to accurately gauge how long it would’ve taken.

While the website is mostly done, there’s some finalizing touches that need to be made. I just need to do the survey questions PDF (if you click the button on the website, it doesn’t take you anywhere), proofread, and request feedback for things that I might’ve missed. I talk about those tasks in more detail here.

And so I’m happy to present, the second draft of the website, which you can view publicly here!

AUTHENTICITY SHOWDOWN: WHO IS GENUINE

Thank you everyone for the support thus far. It’s been a long three months or so but it’s taught me many valuable lessons in approaching a long term project and how to make creative decisions. I do wish I could sit and say “yeah, the website’s completely done,” but I’ll take this victory for now and see what I can do in the coming days! 🙏

[amberviernes]

Education Level Related Assets Complete!

Still need to integrate the graduation cap upvote/downvote onto the other pages, but it’s looking much better than the previous/redundant assets from earlier!

I do think that I would’ve been more efficient at working on these pages if I focused on building a template for one page with some semblance of real text. If I had the complete survey results before moving into Elementor (or making more than one page for that matter), and written out real text/figured out what kinds of statistics I’d want to include, I think the process would have been much more efficient?

But what’s done is done, and I’ll continue to keep this in mind when I do further web design projects! I think that having the content fleshed out, with real text gives a strong sense of identity and makes designing much easier (and can prevent excessive redos/reopening pages and changing things).

Now to implement the updated assets on the other 13 pages... 🥳

[amberviernes]

Asset Update: Light to Dark!

Had to make a slight update to this asset since the further research section now dons a dark background rather than a light one!

Technically, I could’ve kept the previous one, but it looked out of place and not cohesive with the website. But now, it looks a bit more cohesive! Trying to design assets for dark can be a bit difficult but it’s an improvement at least. May revise later, but for now I’m trying to get everything to looked as finish as possible.

[amberviernes]

Overall Ranking Built on Website! (+ Concepts)

Hello everyone! Finishing up the website. Had to add a new section to represent the overall ranking of the conclusion page.

Here, I am sharing:

Completed desktop version (first photo)

Initial Concept + References

Mobile version (second row, left)

Initial concept for mobile version

Some rejected concepts (last two photos)

Figuring out text-heavy layouts is a bit challenging for me, but I’m pretty happy with what I have! There’s still more to do though, so I’ll be dipping out. Later!

[amberviernes]

Conclusion Page Redux + Asset Sketches for the Analysis Page

Hello everyone! I mentioned before that I wanted to sketch some new assets for the education level related statistics, and that I also mentioned that I wanted to modify the conclusion page.

I hope that these sketches can show a better visualization of what I will be doing to the conclusion page! I still need to translate the sketches into a digital format, but I’m looking forward to seeing how it’ll come out!

[amberviernes]

The Final Stretch: What’s Ahead

Hello everyone! I can’t believe that we’re in the middle of April? The capstone project is quickly coming to a close, and man. It’s been quite the journey. But, alas, there are still things that need to be done, so in this post, I’ll be outlining what I need to do to finish the semester with flying colors.

This is a slight update from the previous task post, and will probably be the last of it’s kind. So without further ado, let’s list out those tasks!

To Finish the Build/Draft:

Add a new section to the conclusion page showcasing the ranking of the 14 works featured in the survey. The layout will be sketched out, and then digitalized in either Adobe XD or CLIP STUDIO PAINT.

Update the conclusion page layout. I am thinking the final page will look something like: Expected Results (Dark BG) -> Work Authenticity Ranking (White BG) -> Summary of Results (Dark BG) -> Limitations of Study (White BG) -> Further Research (Dark BG) -> Call to ACtion (White to BG).

Modify asset color schemes to match the updated conclusion page layout. I am thinking the asset used in the further research section will need a white outline or a color scheme revamp since it’ll be on a dark BG instead of a light BG.

Create a PDF of the survey questions for the survey results page.

Sketch out asset concepts for the education level related statistics on the sub-analysis page (it currently reuses the ones for the age group).

Digitalize the education level asset.

Proofreading/Clean-Up:

As I proofread, I will compile all the things I notice onto one document for revision.

Check for consistent verbiage throughout the website (e.g. works vs pieces, and scores vs rating). Update to be consistent. This is especially the case for the subanalysis pages, as they all follow a very similar format.

For the subanalysis pages, check the numbers inputted to make sure it matches the spreadsheet and form.

Click all the links and make sure that internal links open in the same tab, and external links create a new tab.

Test the website’s responsiveness against a variety of window widths. Fix as necessary.

Run each website page through GTMetrix to test the website’s loading speed.

Remove password protection for the website, and request feedback.

Incorporate feedback from peers.

And that’s all we gotta do! Honestly, it’s a lot. But I believe that I have the experience and skills to make the finished website a reality!

Before I close this post, I also want to say that last week I told Sharla that I was hoping to have the website done by April 17th. And since I wrote this post talking about what’s left for me to do, well, you’ve probably figured out by now that the finished website isn’t here yet!

Could I have gotten it done by the day I set? Yeah, probably, but I ended up stumbling into personal issues that stalled my progress significantly. Fortunately, I was able to resolve the issues by engaging in some difficult conversations and reframing my mindset.

But I’m kind of glad that the hiccup happened since it taught me two valuable lessons: 1) How to have difficult conversations, and 2) To address my emotions and stressors, rather than shelve it and hope it doesn’t bother you. Spoiler alert, suppressing your emotions doesn’t do any good, and seeps into your life in ways you don’t expect. For me, it would distract me immensely from my project. SO please don’t suppress your emotions, talk it out, and problem solve with people who can help you out.

I also want to note that when I set the date to April 17th, I knew that it was a bit unrealistic in some ways. But, I did it intentionally (rather than picking something more realistic), since it would ignite me into action (deadline panic!). I know this logic doesn’t really apply to the workforce (and there, I’d rather set a ‘later’ deadline and then meet it early to please the client). But I know that my “real” deadline is the 25th, lol.

Anyways, I feel like I can put my best foot forward this upcoming week. It’ll be tough but I believe in my ability to get this done! Thank you everyone for accompanying me on my journey, and I can’t wait to share the final product with everyone.

[amberviernes]

undefined

Sub Analysis Pages Complete! (Mostly)

Hello everyone! Happy to announce a huge victory in the web building process: I got all fourteen of the subpages decked out with real text, charts, and figures reflecting the survey results!

Honestly, these pages were simultaneously a slog but also incredibly easy to do at the same time. The tasks that needed to be done to bring these pages to fruition were rather similar, so after awhile, I was able to get into a rhythm!

I do feel that I could have finished this earlier (it just required a good sit down session), but due to personal issues, it delayed the completion of the project. For most of this past week, I was stuck in my head ruminating about things. It was emotionally and mentally exhausting, so it made working on the project more difficult than necessary. Fortunately, I was able to resolve the personal issues that occupied most of my thoughts, which allowed me to finish these pages!

I still need to proofread these pages to see if there’s any inconsistent verbiage (and update accordingly), but I’m glad I got each page to reflect how it was received in the survey!

This was my first time doing something like this (individual pages that share similar formats), so I definitely learned a lot from it. I think if I were to do this again, I would try and make the template have as much real text as possible (fill in the blank sentences), so that it’s easier for me as a writer to finish the content. I wish I ironed out the template more, since I ended up having to copy/paste a lot of changes that I made to one page to the rest. But oh well.

Honestly, I don’t really like writing website content all that much. But it was a worthwhile learn about my preferences.

There’s still a bit more that I need to do for the website, so I’ll be writing that up in another post very shortly!

[amberviernes]

A Stitch-Together of the First Sub-Analysis Page!

Hello everyone! Happy to say that I’ve “mostly” finished adding real text and whatnot to the first sub-analysis page (of fourteen 💦).

For context, this is what the mockup of the template looked like (with no real text). There’s been some changes since then, now that the survey has closed and the results have been put through some automated spreadsheet calculations!

Here’s what will be the norm of each page:

Thumbnail of art, + author + title + year(s) of publication/creation

Reason for selection (for the survey)

Key figures noting 1) the average rating, 2) % of respondents that gave a rating higher/lower than 3, 3) which age group gave the highest ratings to the work, 4) which age group gave the lowest ratings to the work, 5) which education group gave the highest ratings to the work, 6) which education group gave the lowest ratings to the work

A link to the complete results spreadsheet including the survey responses, and detailed statistics that can’t be covered within the scope of the website

A graph that shows the rating distribution, as well as how many people assigned each score

A verdict that summarizes the findings and prompts people to take a call to action.

I do recognize that there’s some inconsistencies in verbiage (alternation between works and pieces, as well as scores vs rating). I intend on addressing this during the proofreading stage.

I also recognize that the verdict section may be a bit redundant, as it basically restates the Key Figures section. I am considering removing the repeated information about the demographics that gave the lowest/highest ratings. Additionally, I feel that the red text boxes are a more effective way to convey this information.

To replace this, I am thinking of possibly mentioning the rank of the work instead? (If you’re curious, the Cave of Hands was the 6th most authentic work out of 14!)

I think this could possibly work since the call to action, “But what about the other pieces? How were they evaluated?” feels a bit incomplete on it’s own. I was concerned about spoiling the overall results but I think that with some word changes, it may invite people to feel more curious about the rest, I suppose?

Going to let these modification ideas sit and sleep on it. Oh, and I’ll also need to conceptualize something for the education level high/low rating boxes too- perhaps a graduation cap with a thumbs up and thumbs down? We’ll see.

It’s a bit of a hassle to try and iron things out, but I’d rather do it with this one page first, instead of making the fourteen pages mediocre, and then getting a headache from changing it all. Making progress and I’m happy about that!

[amberviernes]

Adding Sheets to Automate Statistics Calculation Process for Highest Level of Education Completed

Hello everyone! Previously shared some sheets of the age group statistics. After seeing that the (two) respondents in my survey who were 65+ yo provided VERY cynical authenticity scores (this is what happens when you only have two and one of them put 1 on like, everything), I decided to account for the education level demographic (which I should have planned for earlier in the process).

I’ll need to figure out how to incorporate it into the sub-analysis pages (asset-wise), but the sheet was still super interesting to look at nevertheless! For now, I might just duplicate the section with the thumbs up and down and change the wording, but it’d be good for me to not neglect this demographic.

I want to note for my future self, while working through the key figures section, I’d like to see if I could mention the average rating given by the highest/lowest groups.

I may also consider adding a text box at the bottom of the key figures section mentioning that it’s just an abridged version of the statistics, and that more detailed statistics can be found on the spreadsheet. Not sure about that one yet but I don’t think it could hurt...? Will have to see how my proofcheckers feel about that one, haha.

In any case, I’m very grateful for spreadsheets for making my job so much easier. I could technically divide the groups up even further for the different combinations of age groups + highest level of education, but... I don’t think I’ll do that, to be honest! It’ll make the data more confusing than needed and that’s not something I want for the person who’s visiting my website.

Onwards to more progress!

[amberviernes]

Automating the Statistics Calculation Process

Hello everyone! Wanted to share a glimpse of my spreadsheet that I am using to help construct the key figures section of the sub-analysis pages.

One of the prompts in the key figures is to provide which age group tended to give higher/lower ratings to each piece, so I decided to filter out the original form so that I could quickly calculate the average ratings (I was using a different method for one work, but then I realized it was taking too long so I decided to automate it like the below):

I’m very happy that my spreadsheet knowledge can be of use for this project! I love statistics and formulas very much (at least, in Google Sheets/excel). It’s very convenient since I don’t have to do the math myself, lol.

In any case, the spreadsheets for these calculations are currently stored on the spreadsheet that I am using for the form’s responses. I am not sure if this is the most suitable location, but I thought it would be nice to have the math easy/accessible for everyone to see in the scenario that they’d like to have a further look into the project. After all, this spreadsheet WILL be public for viewing!

Nothing makes me happier than finding efficient ways to do things. And spreadsheets are exactly that! This gives me more confidence in being able to successfully complete the key figures section for each page.

In any case, time to input these values for each page! I’ve been slowly updating the real text and whatnot to reflect the results. It’s a bit tedious, but it’s getting somewhere!

[amberviernes]

Graphs Exported and Uploaded! ☁⬆

Hello everyone! Previously, I mentioned that the survey came in with 140 results! Now that Thursday is on a roll, I went and created the graphs that will be used on the subanalysis pages.

Just have to add these to the pages, update some captions and content, do some proofchecks, and boom, sub-analysis pages complete (the hardest part, tbh). It’s all coming together!

[amberviernes]

SURVEY RESULTS: IN! 💥

Hello everyone! Pleased to say that I closed the survey with 140 responses. Could I have gotten more? Yeah, probably, but I'm happy to have garnered a triple digit number of responses! But did I learn a lot from running the survey, both in regards to the survey content, and what it's like to administer these. And I think that's great!

I wish I was better at pushing the survey and sharing it with other people. For a bit, I was paralyzed by my own anxiety of "revealing too much personal information to people on the internet" due to the survey's introduction. So note to self, if I ever do surveys again, don't reveal that much personal knowledge or it'll make it hard for me to share. Even though I have online groups of friends, I felt too anxious to share it for a bunch of messy reasons that I'd rather not share.

That said, I do find that an individualized approach of sharing the survey, rather than mass-sending it out to a group, is more effective. And I feel that it's because it puts more responsibility on the person to take it, rather than it being diffused in a group setting. Going down the contact list is a great way of getting responses!

Also want to note that Reddit was a nice learning experience for the survey too. I talked about it previously in this post, but it was interesting to try it out for the project.

Overall a good experience. Now it's time to translate the results into graphs and written content for the website!