UX/UI Design, Research, Web Design
January 2024-May 2024
Tools Used: Figma | Illustrator | Squarespace
Background
Jessica Kasinski is an opera singer with over 20 years of experience in need of a website to reflect her career and showcase her previous performances. Jessica has an extensive resume of her performances, unique roles education in music and wants the website to reflect her personality professionally.
Project Goals
Create a one page website for Jessica with emphasis on her performances including videos, audio clips, an event calendar and her resume. Having interested people reach out to her who may be interested in contacting her is a must, whether it is through email or LinkedIn.
A predesign discussion was made to make sure that both Jessica and I understood what was wanted and needed on the page. She had a few examples of singers who were national, regional, and local and had pages where she chose what features she liked and what she didn't like, making the idea clear. After discussions of the site, I emailed a questionnaire, and project proposal to Jessica outlining her expectations, my role in the project and a time estimate of the project outcome.
Style Guide
A style guide is created to give the client an idea of what the designer has in mind based on their suggestions and ideas. Other designers will be able to see the guide and add on or edit parts of the site if the original designer is to pass off the information to others.
To help reflect Jessica in her website, I was given a little direction with a lot of creative freedom. I wanted the site to look modern and professional, with a image of her performing as the first thing a viewer would see when they first come to her site. The colors for her site I wanted to be bold without being overpowering, so I went with a dusky blue and a deep green with a gold color for an accent. The font choices I decided on were headers with serifs and a body copy with sans serif for legibility with a script font for any kind of "signature" details.
UX Documentation
Lean UX documentation was done to expedite the process of a user flow redesign. It has simple personas, a style guide, a user flow, a site map and wireframes. All of this information was made to help someone who was not part of the design process understand my thought process of why I designed it the way I did and know the details of the design before they even see it.
For Jessica's site, I went with a Lean UX documentation style, for the sake of time and knowing that this site was not so big to necessitate a large-scale investigation. Personas were created for an understanding of who would be looking at the page and why they would be on the page. It gives me a chance to place myself in the user's shoes.
Site Map
To further understand the users and how the site will look, I created a site map to look at and see if there was anything that I could have missed or could get rid of. As the site is only one page and need to have a lot of information, I wanted the page to not feel too overwhelming.
Wireframes
Wireframes for the site give myself and Jessica a general idea of what the layout of the page would be. As it was only one page long, it was more deciding on what should do where and in what order they needed to be. From order of importance it was decided that the about information section was going to be the highlight. After the wireframe was approved and completed it was decided to remove the section for the audio clips for Jessica to add later.
OVerall Experience
Working with the client was to my benefit as a whole. The first choice client backed out at the last minute, so the second choice client was my sister, who has been looking for a website for herself for years. While this was a great thing for me in the short term, I feel some unique challenges came with building the site. The main one is probably a rule in the design field, which is not to design for friends and family. I decided that, because money was not involved with building the site, it should cause no issues for me. The second obstacle to overcome was surprisingly, a bit of communication. I felt that because we both felt that being related allowed for a more relaxed relationship, being as we see each other as sisters more than designer and client, some communication was left to the wayside from both sides. While this was not a persistent issue, there were a few times were we both needed to communicate needs and had to wait on the other at times. The other communication side was the fact that we had the freedom to message each other whenever some important details got a bit mixed in with regular family related messages.
Overall, I do not mind that I built a site for a family member and was glad that I was able to bring her vision to fruition. If there is a future time when I do create a site for a friend or family member, there will need to be discussion that anything related to the project only be discussed via email, so there is no missed messages and all things related to the project are kept in one place and not mixed in with other things.
Management of the project on my end felt like a whirlwind. Once there was a "groove" established and a flow was made, working on all aspects of the project went fast. Some areas of struggle included keeping track of time effectively, getting some assets that I needed to be able to move forward effectively, and keeping communication focused on the tasks. I felt that when it came to communication issues, I was able to address them professionally and with empathy when my client's reasons were discussed. In the end, I did get the items and information that I needed. Communication was both an area that I needed a bit of work in but also saw the most improvement in.
By the Numbers
This was an area that I felt I could have been much more diligent with, but as it was a project that was being done free of charge, I was not able to be as accurate as I could have been. Based on recollection and estimation, I was able to conclude the following for time:
- Building the Contract: 1 hr, 15 min. = $43.75
- Creative Strategy Brief: 1 hr, 15 min. = $43.75
- UX/UI Research: 4 hr = $140
- Wireframing: 2 hr = $70
- Working on the Site: 32 hr = $840
- Meetings with the Client: 4 hr = $140
- Creating the Walkthrough: 6 hr = $210
Total Cost: $1,487.50
I do know that in the future, this will be something that will be easier to take care of and keep track of. It is just a lack of practice on my end. The amount that it totaled out to was a bit higher than I originally predicted by almost $300. This is at a rate of $35 an hour. My one observation while I was making a lot of the documents, especially, is that there was a lot of time that went into even making the documents, being as it is the first time I needed to do it. I would like to assume that a future practice I will have, to save myself and clients time and money, is that I will be able to reuse the same templates and just swap out the information for what is relevant to the client I am working with.
Website Design
Mock-Up of Jessica's Site
The Final Webpage
To see Jessica's webpage in action, or get in contact for singing lessons, feel free to visit her website!