up775223

[up775223]

Section 10: Completion

Evaluation

For this project, I have designed and created a website for Student Vitals as well as 2 posters to go with it. While I am very adept in using photoshop and adobe cloud in general, using Wix to design a website was the most challenging part for myself, and learning all the tools on the program, as it was a lot more outside of my comfort zone, despite having brief experience in HTML coding. For this project I have used a variety of tools ranging from Adobe Photoshop, InDesign for poster layout, Wix, Adobe Typekit as well as Spark. One of the aspects that I did not expect to be doing yet enjoyed and found quite helpful to add to my experience, is merchandise photography that was used for the website, to showcase Speakers.

As the owner of Student Vitals and I, happened to live in the same building it was a lot easier for both of us to maintain contact and meet face to face in order to discuss our ideas, and what direction he might want his website and branding to be taken, which helped to brainstorm plenty of ideas on paper, to help visualise my ideas to the client. This project was very useful for myself, and as I do intend to go into digital marketing, many companies require basic experience in web design, which is incredibly useful to have for my portfolio, and to expand my skills overall.

Furthermore, this project has not only challenged my time management skills but as well as my overall communication and planning, to ensure that everything goes to plan and on time. I had to arrange meeting times with my client, plan and delegate tasks – such as what takes priority and what can be done after (such as posters, using all of the material that was gathered for the website to create them, to follow a consistent theme.)

However, I did have my worries when it came to the project, such as for some reason or another, my client may cease contact, or may not reply to any of messages on time. Additionally, that I may lose any of the progress with project, due to reasons outside of my control – such as technical issues, server crashes, etc. To prevent that, I did back up a lot of the images, and completed work on my external drives to ensure that I have back up files to work with, if any issues happen.

Process

The project begun with idea scoping, and me meeting my client for the first-time face to face to discuss what he might want for his website. I started by browsing multiple website to see what they have done, and what form of layouts they have that are functional and easy to navigate, as I wanted the website for Student Vitals to look as professional as possible. However, without inspiration it would have been a lot harder to work on. I have also done the same when it came to finding inspiration for the posters, to see what other businesses have done as I did not want something that is too text heavy or doesn’t look professional. I looked for inspiration on clean and minimalist designs, that would fit the minimalist design of the website too.

After I found designs, I begun brainstorming multiple layouts while familiarising myself with Wix, to make sure that I can bring my paper designs to life through Wix and if any of my designs were possible to implement to begin with, and not limited by existing tools. Additionally, once the designing process moved fully to Wix, me and my client arranged a few photo-shoot meetings, to take pictures of the products for me to edit and use on the website, rather than fully using images that he was provided by the suppliers of his packages. The product page was one of the hardest to do in terms of layout as I could not quiet find on what I liked and I found myself trying out several layouts, however, none of them matched the core aesthetic and theme of the homepage, which made it a challenge. I also had issues at first with formatting text for the page, as it kept going off the page, so it took some time to fix.

Once the website was done, I begun to create posters which were a lot easier for myself to do as I have great experience in Photoshop, but also basic knowledge of InDesign, but not being as familiar with it. However, I did primarily stick to photoshop to create the posters without relying on the existing poster templates that the program provided, as I wanted to challenge myself further. Before sending it to print, I wanted to make sure that the posters would print correctly by printing them myself on plain paper. It was a little challenging on finding a reliable printing service as I was not quite familiar with how they work, especially with my lack of budget – therefore the posters had to come out of my own pockets.

Overall, I was very pleased with how everything came out despite having quiet a bit of learning to do at first with Wix tools and what they are capable of, and how I could use them for the website. The website itself was the longest part of the production, especially gathering photographs and editing them – which did make me worry at first that I might spend too long on the editing, gathering and designing of the website. Which could of meant that I wont have enough time to fix any bugs or issues that may occur during later stages of production therefore not leaving me enough time to experiment and produce the posters.

I was also very sceptical about the printing of the posters, and how long it would take for them to be delivered, however, I did save them as pdf format and sent them to my client so that he always has them available to be printed and given to partnered student accommodations.

Difficulties and Challenges

One of the main challenges for myself, were time management and maintaining constant communication. I acknowledge my own weaknesses in communication, however the more my client and I exchanged messages and emails, it became a lot easier for me to seek his feedback and keep him updated on my process. It gave me a chance to come out of my shell and keep the contact going, even outside of emails (as my client did prefer to text message and maintain a less official tone).

Furthermore, it was challenging at first to balance this project with other deadlines and university work, however I did ensure to keep a list and a timetable to when I will fully dedicate my time on working on the project. Albeit, at first there were quiet a lot of late nights before I got a full grasp of what I was doing and got a better hang on how its best to prioritise certain tasks, and as I got better – it did get easier, and I’ve had plenty of time altogether to complete everything before the deadline, and even launch the website much earlier than planned.

However, the I could have done much better on fixing the loading times on the main homepage, but it does seem to be an issue with the server itself and out of my control as I have even tried changing images, size and file size altogether to check the loading, but nothing worked. Which is something that I know I could have done much better on and consider these issues in the future, but my client had no issue with it.

Conclusion

In conclusion, this was a great experience and I have gained a range of beneficial skills that will help my portfolio, especially the website and posters as a visual aid to show to potential employers. As I did work with a client who was beneficial to my experience, but who also benefited greatly from my own input – in which he does consider having me as a full-time member of his team, which is an amazing opportunity, especially to further improve the website and visuals in the future, and a great accomplishment overall as my client really enjoyed all of the work that has been done for him. I am also looking forward to going to the sky event organised by my client for the first anniversary of the business as part of the official team in the following summer.

If I had a chance to do the project again, I would focus more time on the photography side and hire out a student showroom within my building, as it would have been amazing to have a model interacting with the products to use for the sliders on the website and for the poster. I would also further check for all and any copyrights that may need to be credited to original owners., Overall, I hope I get to stay in further contact with my client and we have a chance to further improve Student Vitals branding in the coming future, and maybe even collaborate with more people to gather assets.

[up775223]

Section 9: Signing Off

Once everything was ready, my client and I met up once more so he could sign off the project as complete. 

I have also created a very basic instructions sheet for my client that tells him how to make certain changes required for the website. Due to safety and privacy reasons I have censored both username and password for the account on here. 

[up775223]

Section 8: Testing

Poster Printing Test

Before sending out the posters to print and realising they did not print properly. I have printed them out on normal paper to see what they look like and if there are any adjustments that need to be made to the margins, images and sizing.

Fixing Margins

Final Prints after further editing.

Before final printing, one of the designs did change during the fixing stage, however the client preferred the second version of one of the posters a lot more which is more than ideal as both posters now match. 

Testing the Website 

Before final launch, I have tested the functionality of the website on Wix to ensure that everything loads and clicks correctly, as well as loading. One issue I noticed, is the loading of a few images, although I have tried everything - my limited understanding of coding and where the issue has come from, does impact my ability on correcting the mistake. 

However, everything else does work well and to plan, and the website converts well to mobile. 

I did further spell checks on both the website and the posters, as well as the grammar to ensure that everything meets the client needs. 

Does it meet the client needs?

Yes, both meet the client needs, and he was very pleased that I went an extra mile and created two posters for him rather than just one. Both the website and the posters have the simple and contemporary design that the client aimed for and he was very happy with the consistency, especially with how I am not professional designer, but was able to pull it off to the best of my abilities. 

[up775223]

Section 7: Project Feedback

Now that the Website and The Posters are complete, I have sent both to the Client to receive his feedback. To Ensure that he was happy with these and if there are any changes he wishes to be made.

I am happy that my client is pleased with the posters and the design of them, which now leaves printing of the posters and the final launch and testing of the website.

Are assumptions made earlier still valid?

For the project, the main aspects of it were timing and task delegation, which has improved my time management as well as my further understanding of website design. My assumptions that the website will take the longest to make have been correct as it took just over a month to create, not considering all the photography and graphics that were made for it.

However, I am glad that the posters were the last ones to be created as it was a lot easier to theme them to the website and borrow aspects from it, for the posters. Rather than creating new ones, while creating them to be true to the theme, and professional looking. It was also easier to workout how long I had left to create, test and print the posters before the final launch.

Further Feedback

With the launch of the website and the domain. I have sent out the website to several people to gain their feedback on what they think of the website. 

I have also created a survey to collect all the feedback in one place: 

Results of the Survey: 

[up775223]

Section 6: Production

Now that I have a solid idea and the client is happy for the production to begin it is time to start.

Gathering further product photographs

My client and I have used Premises of Europa House lounge to gather photographs for the website and posters. Being a Student Ambassador and with permission of the building manager, both of us had free permission to use the lounge for the photography.

Examples: 

Example of where the pictures were stored: 

Once I had enough material to work with, before placing anything on the website, I begun to edit the pictures and removing backgrounds to get a clean and crisp speaker for the website. 

As I am very familiar with Photoshop and own both a portable graphics tablet and a screen tablet, the process was fairly easy. As I did not need to familiarise myself with the program or its capabilities. 

Editing pictures: 

Using both curve and brightness options on Photoshop, to turn the red speaker into both grey and black (as they are two other colours available, but yet to be photographed.) Before I could do that, I did cut out the red speaker and copy pasted it behind the original image and rotating it so that the placement looks natural.

Hard at work: 

Final edits: 

Now that I have imagery and media to work with, I can begin to familiarise myself with wix and begin creating the website for Student Vitals as it will be launched and published before the posters.

Starting Blank: 

I have chosen a blank template to work with as it will be easier to plan and place all the needed features.

The main pages for the website:

Homepage - the client wants it to scroll down

The Essentials 

Our Story 

Contact 

FAQ 

Product Basket

Putting down sliders and checking optimisation for the mobile. 

I will need to keep checking back and forth between web and mobile to make sure that everything optimises well for both desktop and mobile devices. 

Adding Menus: 

Like mentioned above, I have added the 7 menus that the client wanted and the logo on the side.

I do have to consider the margins that wix provides as it may cause poor alignment in the final product if not careful. 

Pinning everything down: 

I have learned that pinning everything down prevents issues with the squishing and unnecessary movement of the menus and images. 

Pinning did take some work around the setting as often times the item would not be placed where I needed to be. So I had to align the grid positioning and then use Horizontal and Vertical sliders (adjustments) to move everything back.

Once I've set up everything, I had to make sure that everything clicks and directs to the right page, such as going to the product page (even if blank).

Setting up links:

Our Story -  Client asked for this to be scrolled down to on the main page. I have used the speaker graphics to put as the story and break up the page a little. 

Final look of the homepage

The Essentials

FAQ

Basket

Making the Posters

Bringing Paper Designs Onto Digital:

Layout of the Posters:

The client has liked the wire-frames so I went ahead and begun arranging the posters and editing the wire-frames into a full fleshed design.

Hues, Contrasts and Layering:

Editing the images to fit the overall theme of the website and the colour scheme, using curves, layering and contrasting. 

Adding the text:

I have used the same text and selling points that are on the website to keep the authenticity and the feeling of the Student Vitals brand. I had checked that I was also using correct type of text and that all of the fonts have installed correctly.

Placing Text:

For one of the posters I had to rotate the text and imagery while ensuring that everything fit within the margins. 

                                                   Final Look

Going to Print

I have chosen netprinter as my poster printing service as not only are they affordable but cater to many printing sizes instead of default A2 that many printing services choose. They also offer variety of paper types so that you are able to print your ideal posters.

[up775223]

Section 5: Asset Production

Sourcing Media Where Will It Come From

Before proceeding with the project, I first needed to get product images to work with when producing the website. The pictures will be acquired from the client himself, even taking some myself. 

Here are some emails from my client containing product pictures for me to choose from and edit for the website and leaflets.

Some more emails containing pictures and back and forth sending of edited photographs for the client to view.

Examples of some images that client has sent me:

Interface Design: Storyboards, Flowcharts, Designs and Interface

Before proceeding, after evaluating and taking into consideration what my client wants for his website; I begun to gather inspiration from other designers and brands that have similar ‘aesthetic’ to what my client wants.

GC Watches                                                                            https://global.shop.gcwatches.com/

Simple yet clean, GC website uses contrast and simplistic clarity to draw attention to their product. This helps me to consider and look into how to incorporate simplicity into my design.

Belgravia Group                                                          https://belgraviagroup.com/

Great use of contemporary imagery to keep the layout simple, much like GC Watches, this website has the exact simplicity and clean aesthetic and feel that my client is looking for.

One Plus                                                                                                                     https://www.oneplus.com/uk

My client also mentioned that he really likes the layout and look of One Plus website and wants to have a clean image of his speakers somewhere on the page, with a transparent background.

Flowcharts

I have composed basic flow charts for myself to follow when designing website and flyers.

Website:

Flyers:

Brainstorming

Having the ability to meet face to face, my client and I have sat down together to discuss and brainstorm together basic ideas for his website and what direction he wishes to take it further. Although not most perfect, my client and I have produced rough paper sketches to gain basic ideas for the website and flyers. 

I have also designed basic wire frames based on the inspiration gathered from online, as well as combining them with the ideas that my client and I have come up with during our meeting.

Notes I took during our meeting:

Colour Scheme: 

Using adobe colour, I was able to pick out a few basic colour schemes to match my client’s needs.

                                              Kopi af Copy of Blues

                                                       Deep Space

Website:

These are the further notes and images that my client and I have made together during our meetings as well as test sketches during our ideation process.

Flyers:

Logo

My client and I also briefly brainstormed the logo for Student Vitals, we both agreed that the ‘’swish’’ in some of the designs is something that we desire to keep as it gives the feeling of travel and deliver. 

Using Adobe Illustrator to mock up the first logo without Graphic Tablet. We decided to keep the swish on the side and adding a delivery/hat symbol above the logo to signify travel. 

Using Spark for icon graphics

My client has requested that I use Adobe Spark to chose and create icons for the posters and the website as in the future it will be a lot easier for him to match them himself if needed.

Fonts

As I will be using wix to design the website, my client has liked the font known as Lulo Clean:

However, as it is not something that I have nor have the license to use outside of Wix, nor the budget to purchase it. I have browsed Adobe Typekit to source a similar font to use for the Posters that will be produced alongside the website.

Example: 

Aviano Sans looks the closest to Lulo Clean and a lot more clean and close to what my client likes, especially when using them on posters.

[up775223]

Section 4: Analysis

SWOT Analysis

STRENGTHS

As a freelance illustrator and editor I have gained a good understanding of Adobe CC programs such as Photoshop, Illustrator and InDesign by experimenting in my own time, watching tutorials and seeking advice on how to use them best.

As part of my course in Digital Marketing and previous business and marketing background throughout College and two years at University of East Anglia - I have gained a considerable knowledge of marketing, consumer needs and meeting client needs. For one of my units I am required to design and create a website; where I have gained a considerable amount of knowledge and experience required to work on this project.

WEAKNESSES

The task is quiet demanding and requires balance to ensure that I am able to meet all my deadlines with both the project and outside of it. Time management will be an issue at first and trying to adjust to a heavy workload.

WIX is still a new tool to me, thus I will struggle trying to implement certain features into the website, especially to ensure that they work as planned and do not break.

OPPORTUNITIES 

As this is quiet a big project, I will have a chance to explore tools that I would not use in my own projects thus I can gain and enhance my already existing knowledge and skills.

Photography is not my area of expertise and I do not have a good grasp of it, so working with my client and setting out to capture product pictures will be a good experience for me to observe and learn on how to best do it.

THREATS

The business has quiet a few competitors and its possible to seek inspiration from them, but also fall under a threat of accidentally using or having similar design as them.

The client might not give me enough imagery content to work with in regards to the website which might lead to long waiting times or having to resort in looking for copyright free material to use.

Due to tight schedules and workload, I might get overwhelmed and fall behind on some of the work and the project itself so I have to be careful with how I balance my workload.

Risk Assessment

Gannt Chart

I made a gannt chart using Instagannt, as it is free and easy to use. I can also keep it updated constantly in terms of dates and completion of the project.

[up775223]

Section 3: Final project proposal

Project Introduction

For the final project, I will be re-creating and re-branding Student Vitals website, a business that focuses on selling student packs to students moving in into their new accommodations. Along with the website, I will also be creating two flyers that will go along side with the website, the client will use them to market his business within partnered student accommodations. Thus I have to take into consideration on how its best to make a convenient experience for new and returning students alike. 

What Does The Client Want and What Will I Gain From This Project

The overall aim is to create an easy and convenient experience for the students when making a purchase as well as making Student Vitals stand out from some of their existing competitors. The client wants a more simpler and modern theme that will draw the students in and will encourage them to choose Student Vitals as their go to university essentials source. 

When it comes to the flyers, they will be designed with the students and the website in mind to show consistency, but also the simple design of it will focus a lot on the provided products and highlight key characteristics of Student Vitals; what makes them stand out from the competitors as well as what they sell being the focal point (specifically the X9 Speaker upon client’s request).  

The key objective is to understand what exactly the students want and how its best to approach them both visual and interactivity wise. As this will require research into the market, it will be beneficial for myself as I will gain a better understanding into customer research and how to perform it; combining research with practise. 

Resources Required

For this project I will require a lot of product photographs to use on both the website and flyers. Upon meeting with the client we agreed that there will be dedicated time as well example products that can be used for photography, the client has his own professional Canon (ask archie) camera that will be used to take industry standard pictures.

I will also require Adobe software such as PhotoShop for editing, InDesign for flyers, additionally I will be using Wix to create and edit the website upon client request (unless stated otherwise).

When communicating with the client I will be using both face to face and online email communication to both share resources, project updates and other requirements. 

Collaboration

I will be collaborating with the client himself during our face to face meetings and when gathering product pictures as he is skilled with the camera, from which we will benefit in having high quality industry pictures to use on the website and the flyers.

[up775223]

Section 2: Scoping the project/ Project feasibility

Meeting The Client

I will be working quiet closely with my client together so our meetings will be regular to ensure that everything meets his standards.

We have arranged to meet 3 times a week to catch up and check my progress on project as well as gathering required copyright free material to use for Student Vitals website and flyers.

Identifying Client’s Or Your Previous Multimedia Experience

I have broad experience in using variety of required tools such as PhotoShop, Illustrator as well as Wix (which I will be required to use to design the website upon client’s request). I am confident in my own skills including my ability to learn and implement new and required skills to make this project a success. 

When it comes to design, the use of Photoshop and Illustrator I have great knowledge of the programs as well as required tools to use them to their best capabilities (graphic tablet screen) as I am a freelance artist and graphic designer in my spare time I am very confident in my knowledge of the programs - albeit I will benefit a lot from learning new tools and capabilities of the program.

In addition I have some previous knowledge of HTML from my previous experience of designing an amateur personal website as well as three years of IT studies that involved the understanding of web design and brief coding. While one of my University Courses (Designing Interactive Content) will greatly aid in my understanding on how to make a website that meets the client’s and the customer needs. I will benefit a lot from having more hands on experience with designing a website, however, I do understand that I will struggle at first while learning and re-learning web design and am bound to make mistakes.

Understanding The Breadth And Depth Of The Project

There is a lot that requires to be done as not only am I going to be completely redesigning Student Vitals website, I will have to create and print out flyers for the client to use in order to promote his business when new students begin to shop for University supplies at the end of summer and near the beginning of their first academic year.  

While I have basic understanding of web design and HTML, Wix is a little new to me so I will have to look up variety of tutorials to scope the most effective and best uses of the provided tools to ensure that I meet the client needs and even excel in some of the expectations. However, I am confident that I will be able to quickly learn and apply my skills to Wix.

As I will be working very close to my client and will be meeting face to face, it will be a lot more easier to get feedback and even some input from the client’s perspective. However, I understand that we will not be able to meet up constantly thus we agreed to also communicate through emails, and him being it can take some time to receive a reply. In addition, it can take up to several hours to gather and edit required photographs to use on the website (depending on the severity of the editing it can take up to 2-4 hours to edit a single photo), thus I need to be wise when allocating my time and focus to ensure that everything is done on time and to best quality.

Questionnaire 1

Name: Archiford Hoyi

Email Address: studentvitalshq@outlook.com

Business: StudentVitals

What does you business do? Student start up packs

Is your business online?  Yes : studentvitals.com

How long have you been working on your business?

6 months ( 2 years planning)

Do you also operate on social media?

Yes. Instagam / Facebook

How many customers do you usually get?

1200

What is your target audience?

Students and Parents

Questionnaire 2

What sort of website aesthetic are you considering, e.g: Simple, Modern , Polished

Are there any colour schemes that you have a preference towards in terms of the website? 

Whites / Navy blues, white backgrounds

Are there any aspects you do not want me to change on your existing website?

Everything – total revamp

Where would I get necessary material such as product photos to use?

Archiford Hoyi, he got you

Are there any aspects of the website that you would like to keep unchanged?

No.

[up775223]

Section 1: Identifying a client and project proposal

Identifying A Client

For this project I will be working closely with the founder of a new business aimed at students known as Student Vitals. Its a starting business and the owner has asked me to create a flyer and assist in designing the business website. All of the material that is produced during the process will be used towards the website as well as the flyer as well as the business social media.

Client Needs / Project Ideas

The website should be easy to navigate for students looking to make a purchase on Student Vitals while featuring eye catching but simple design to draw in the target audience, while remaining professional and consistent throughout the whole website. The flyers should correspond and remain in theme as well as consistent with the brand and the website.

Project Approval Form

I presented and had my project approved on November 13th by Claire Sambrooke.