FRONT END DEVELOPMENT, UI/UX DESIGN
Dear Stranger
DATE
March 2022
TOOLS
Figma, HTML, CSS, Javascript, GitHub, Miro, Back4App
MY ROLE
Solo Capstone Project
Whether it was a stranger who held the door open for them at the grocery store or a classmate who helped them out with a confusing problem, people want to let others know that they appreciate them, even if they do not know their contact information. Dear Stranger is a website designed and coded to help people express their thanks to the random individuals they appreciate.
OVERVIEW
Dear Stranger is a website where users can affirm others without naming themselves or the person they are addressing the note to. Because everything is anonymous, users can write encouraging affirmations to a wide range of people, whether that be a stranger, a friend, or even themselves. Dear Stranger also provides a safe space where viewers can also look at other affirmations submitted by other users. The target audience for Dear Stranger… is people of all ages who want to encourage themselves or others or feel encouraged.
GOALS
Allow an outlet for affirming others if you don’t know their name
Allow an outlet for affirming others even if you do know their name
Create a space where users can affirm themselves
Create a safe space and encourage users who are reading other affirmations
Research
BRAINSTORMING
I was first struck with the idea for Dear Stranger during a storyboarding session where I was testing a storyboard for a different idea for the project. I was inspired by my roommate, who the night before showed me confession pages on Instagram. I realized that I could use the same idea behind confession pages but for better mental health and lifting others up. When I came up with the concept behind Dear Stranger I went straight to Miro to brainstorm using a mind map.
STORYBOARD
After I brainstormed using a mind map, I drew up a quick storyboard of a potential scenario where a user may want to use the product. I also tested this storyboard with fellow classmates and received feedback on the storyboard and idea. After the first test of my storyboard, I created a new storyboard based off of the testers’ feedback before testing the second storyboard again and then refining my idea based on all the compiled feedback.
COMPARATIVE ANALYSIS
After storyboarding, I did a comparative analysis on two websites that had similar concepts and themes. I looked at two collective memory websites and how they handled the large amounts of text data. First, I looked at The Unsent Project, which is a collection of anonymous messages to first loves. Looking at this website helped me understand some of the components of designing a collection of text snippets and the different information and pages needed. I also looked at Space Email, which is a database that also handles a large amount of text and allows the user to make submissions using a form. From the analysis of this website, I found their method of displaying the data interesting. The user could only generate one of the submissions at a time, instead of viewing it in a gallery. By the end of the analysis of both websites, I decided that displaying the form like Space Email but the gallery like The Unsent Project would best suit this project.
MOODBOARD
I also built a mood board based on websites that created designs based on text-heavy content. Throughout the rest of the project, I referred back to the mood board and stuck with a majority of the themes, colors, and typography that I included in the mood board.
WIREFRAMES + WIREFLOWS
I chose one of the sketches and built wireframes and wire flows to quickly demonstrate what the user flows and structure of the website would look like. Throughout the rest of the website, I kept the structure pretty similar, but I did make some small changes in future iterations.
HI-FI FIGMA PROTOTYPE
From the wireframe, I furthered the design and added more detail on Figma. I received some feedback from previous stages as well, which helped me finalize the design for the website. I moved the layout so that instead of the page being split in the middle, it was split by thirds instead. I also added type treatments and created more layouts.
Web Development
VERSION 1
In my first attempt, I coded the landing and gallery page’s HTML and CSS. I started off coding all the pages as separate HTML, CSS, and JS files. In the first version, I stuck pretty close to the Figma comps.
VERSION 2
By version 2, I also had the form and thank you page coded with HTML and CSS. At this point, I had a problem with setting the stripes in the code to be responsive to the page length. At this point, I also had the JavaScript code that translated the back4app data to display on the gallery page.
VERSION 3
By version 3, I fixed most of the JavaScript on the website so that the form would be inputted into back4app and go on the gallery page. At this point, I was having trouble gathering the data from the individual cards to create an expanded overlay where the user could view the card individually or view the whole affirmation if it didn’t fit on the card.
USABILITY TESTS
I conducted usability tests with 3 different people on version 3 of the website. From the usability tests, I observed issues with the inconsistency of the form being pushed to back4app, and other design issues. I also observed small design issues and user flow issues that were unclear to the user when going through the website. I also received feedback from some of the testers that related to confusing wording and small design changes that could be made. From one of the usability tests, I noticed that one of the user’s first instincts was to write an affirmation to herself, so in the final version, I added text in the instructions and another category to indicate that the user could write affirmations to themselves.
Final Version
In the final version, I implemented multiple changes and improvements from the usability tests. I added the self-affirmation components to the website and included the design improvements that were provided in the feedback such as moving the nav buttons closer together. The biggest change I made was combining all the separate files for each of the pages into one HTML, CSS, and JS file, which eliminated the inconsistency error I was having with the form. I also worked through the code and fixed the previous issue to allow the cards to be expanded and seen individually by clicking the more button. I fixed the background stripe issue that I had from the beginning.
LINK TO WEBSITE
Outcomes + Lessons
If I were to further develop the project, I would implement a filtering system in the gallery page that way the user could view the submissions sorted by what type of person the submissions were written to. I already started the process of this in the form where it asks the user what type of person the affirmation is for. I would also conduct more usability tests to identify more of the usability issues of the website and potential features that are missing. I enjoyed working on this project a lot because I found the topic very interesting. I also found figuring out the code for back4app the most rewarding and challenging because it took up most of my time and took a lot of problem-solving and debugging to get it to work. But once I got it to work, it felt very rewarding and satisfying to have completed it.
his is also one of the first front-end projects where the UI/UX process was heavily involved in the creation, so I learned a lot about combining UI/UX processes and feedback into the coding process as well. One main takeaway from this project due to combining UX design and front-end development is understanding the limitations of code. As a designer, I sometimes am ambitious with my designs not understanding that some aspects or interactions may not be able to actually be coded. But now that I better understand how code works and some of the limitations of code as well as the possibilities with code, I think I have become a better designer and that I will be able to better communicate with developers when working on other UI/UX projects.
Let’s Connect!
Made with <3 by Evelyn Huey