VESTA
A Project about Balance and Understanding
On August 9th, my team and I presented our client with a website design that would potentially represent her corporate imagery as a complimentary counterpart to her current website. By the end of our presentation, I am proud to say that it was well received. All will be explained as you, the reader dive deep into the article, perhaps even discovering something. Might I suggest some tea and biscuits as this case study is the lengthiest one I wrote so far.
UI/UX Unite
Project 3 is where we the Red Academy students have our first interactions with a community client that the faculty members (who are by far amazing😄) assign us with. This is also the first project where UI designers are teamed up with UX designers. Now in some cases, a UI designer can be solo on a project, but I was extremely fortunate to be paired with Laura Castaño on the UI Team. Laura (pronounced as Lao-urrah) has taken both the UX and UI design program but in her case, she took UX in the prior cohort before joining with the present UI folks. As a result she has far more insight and wisdom to the design language of building a platform to which we ultimately created for our client. Please do take a look at her case studies. As a fellow designer, I am in admiration of her abilities. She is skillful but very much a humble hard working person.
The UX team comprised of Cinco Gu, Diane King, Eilaf Zehra and Tanveer Mundi. From day one we hit the ground running, usually coming into an agreement of how the overall website should look and feel. But it is not as if we made all the decisions ourselves. On the contrary, both UX/UI designers must ultimately heed the wishes of the client whom we had frequent contact with. As an example, we played around with her logo but she preferred to keep her original one intact. After all, if one side overpowered the other, then the design language would be lost. You, as the user, would no sooner bounce out of the site, and the mighty Google would place it in the back pages of its search listing (how many of you even go beyond the first page listings?)
Please do look at their case studies in regards to this project, especially from the UX team. They would be able to provide a more in depth analysis of UX side to the research and development.
The Client and Project Vision
Lucrezia Spagnolo’s demeanour is that of someone who helps bring forward the voices who are unable to be heard. She is astute and fearless of the underlying issue that is usually not talked about. If anyone has ever heard of a certain issue, it is only because the media has taken hold it. Only then a dialogue is initiated but at a price. The topic and the website that we were to help Lucrezia on, was to develop a resource platform for sexual harassment. The platform’s goal is to help both Employees and Employers on how to effectively provide guidance to someone that has been taken advantage of. VESTA, the name of her company, aims to remove the stigma that is so often attached to people affected by such harassment. Lucrezia desired a place for the user to feel safe knowing that everything that has been ‘voiced out’ is secure from any eyes that knowingly want to malign and undermine. Her current website as of present will transition to a community based site whereas the future sibling site will be in a corporate narrative.
Getting Started
When we spoke with Lucrezia we immediately started to gather all information on the language and visual tone of the website. As UX/UI designers, whatever information that was gathered, it would be sifted through to formulate survey questions. Once survey questions were deployed and answered by Lucrezia’s contacts, the information is then framed to form an overall analysis for the key elements of what the website should be. A user persona is also formed to help guide the VESTA narrative. As I mentioned before, please do read the UX team’s case study for further analysis.
Styling Cues
Creativity is the mother of all things aesthetic and innovative, but in its natural state, that energy is raw and at times, chaotic. Such energy requires it to be channeled and fined tuned for desired results. This is especially important when you’re working with another UI designer, you can be sure to expect differences in tastes and style. Working together means it has to be a collaborative effort to agree on things such as styling, colour and typography. Otherwise we would end up with a site that looked as if it had a design brawl.
Thankfully nothing like that ever occurred between Laura and I. If anything she is a consummate professional. We both collaborated on the inception sheet guideline and structured the overall written themes for us to build up a mood board, logo exploration and style guide.
Once we reflected on the inception sheet we assembled the mood boards and Logo Exploration for our client. I would like to mention as before that she wanted her original logo to be left intact but she appreciated the alternatives.
Another point I would like to add is that while she opted for the second mood board, it was requested that we add plum colours based off the original colour schemes as a transition. We happily obliged and also added additional grey colour tones afterwards to further convey the corporate thematics.
Style Guide to Hi Fi’s
Guest Starring Mid Fi’s
Once we had gotten Lucrezia’s feedback we immediately set to work on the Style Guide. We did work on a style tile, a more dummied down version, but the Style Guide is essentially the library/inventory for everyone to refer to, especially the web developers as they would need to code the website.
Meanwhile our UX brethren worked on creating the low fi’s and mid fi’s before we took over creating the hi fi’s. Mid Fi’s happens when the UX team, after extensive research and development, start creating the interface layout to which we the UI team would build upon and integrate the elements of our style guide.
Now in layman terms, it’s ‘redecorating’, but in actuality we are creating a more visually friendly user layout. With the divinity of the style guide, both Laura and I worked on the Vesta pages in unison and made sure each page were kept together visually for content and context. All icons should eligible and understandable for navigation. If one element is out of place, you as the user would readily identify the issues and if you can’t work around it, then we as designers have not done our part to prevent such an occurrence. It is our duty to build something that has ease of use. This is especially important for a website such as Vesta. It is a delicate subject matter and if someone requires Vesta’s assistance, they really need to see that website does not give off a jarring sensation due to careless treatment by the UI team.
The Reveal
By the end of week three, we the team, debuted our Vesta corporate website to Lucrezia and to the rest of the RED Academy classmates and faculty. Each of us talked about the process in getting this project running on all cylinders. We really wanted to ensure that whatever we planned out was executed accordingly.
Critical Thinking
Let me say that it was quite an honour and privilege to have worked on this project. My teammates were amazing and we all worked together diligently to ensure Lucrezia’s website would convey the message to everyone. We want her potential Pilot Partners to look at the website, to understand the viability and the necessity to have such resources for people that need it. Both the original website and corporate would be of vital help because often times, it’s a sad truth that many cases of unwanted sexual harassment/assault would go unreported. And as someone who has in fact faced such a matter many years ago, I too would have liked to have the resources made available for me. No one should faced unwanted/hostile advances or be placed in a compromising situation that affects your overall mental or physical health. As a designer, I champion for people to ensure that we create a safer environment, for the web world and this current world we live in.
Thank you everyone getting this far. I truly appreciate anyone for following me. Till the next case study and future nuances.
