Personal Project:
ECWorks Website Redesign
As part of my development of UX knowledge and skills, I decided to apply the principles to my own website, with the intention of making it more attractive and interesting for visitors, whilst also leading to greater business success for myself.
​
As the objective of this project was to redesign this website, the current website will reflect the changes that are driven by UX principles.
This project will follow through the 5 major steps of design: Empathise, Define, Ideate, Prototype & Test.
Each section will approach the major points of the website with regards to the aforementioned steps and aim to make best use of them to develop this website for better use.
In order to capture the change between pre-UX and post- I will archive the old pages in turn, as I develop the new pages.
Empathise
The first stage was to understand what kind of users would interact with the website. The user profiles I discerned from my experience in the field follow:
​
1) Engineering company looking for freelance design engineer.
2) Company looking for a UX designer.
3) Company looking for Industrial designer (design studio).
4) Freelancer looking for opportunity to cooperate/outsource workload.
​
The user flow through the website was mapped. There are relatively few goals for the user; exploring the website, viewing my credentials and/or portfolio and getting in touch.
The customer experience was mapped from the point of view of perceived professionalism, in order to get an impression of the user's feelings and thoughts when interacting with the website particularly, whether or not to hire me for a project or how likely the user would be to make contact for a work opportunity.
Anything that makes the user feel that the website isn't a good indicator of an excellent future work relationship or that I am a competent designer/engineer was marked as a negative point. Conversely, anything that gave the user the confidence to keep looking and potentially make contact was marked as positive point. The individual pages of the website were marked separately and the overall impression was judged.
Overall, the impression is rather low. From analysis of an invited user's comments, the following points were A prospective user/customer doesn't necessarily know what exactly the website offers. A lot of text is presented which is less eye catching and tedious to read.
​
Major Pain Points were:
Website deficiencies - no Calendly option for booking meetings
Landing page no indication of what I do - confusing
Portfolio relatively empty
Website isn't very interactive - not engaging
My personal experience seems rather short.
Different fonts on different pages make it look less legitimate and rather unprofessional.
When classifying my website, I have to decide what is the overall goal, what is a 'successful' interaction? A customer might just want to download my CV for later perusal. However, the truly successful interaction would be for a customer to contact me or even book an appointment to speak directly.
Define
To define the problem the design must solve, I’ll build a problem statement, a hypothesis statement, and a value proposition.
Users want to easily find the website's content, especially the portfolio, in order to make judgements about my skills and knowledge. They also want the website to be clear and simple to move through.
Problem Statement:
From the user's POV, the website has a number of issues with its appearance and communication of professionalism.
The major problems are: too much text, lack of explanation of the website's purpose and few examples of work/experience.
Hypothesis Statement:
The user needs to be able to quickly find out if I am the right person for the job.
The website must deliver the information easily and quickly, without overwhelming the user.
The portfolio and the website around it must help put the user into a feeling of being impressed and confident in my abilities.
This can all be achieved by:
Improving the visibility of information with well labelled links, pictures and shorter text segments.
Well organised pages that draw the eye to where it is needed.
A strong theme that unifies the website into a cohesive whole.
​
Value Proposition:
The website is the vehicle for showcasing my skills and abilities. By upgrading the website along UX principles and tackling the problems that have been identified, users will be more likely to want to offer me work, cooperate with me or, at the very least, to reach out and exchange some ideas.
​
​
Ideate
Before beginning the ideation stage, I made some initial decisions about the website's future appearance. These decisions were still guided by some of the findings from the user research.
I also had to be aware of the capabilities of the Wix.com software that created my website - not every conceivable idea would be possible to realise without turning to a fully customised site.
Examples will be taken from other portfolio styles that follow these ideas and good points can be used in my own.
The assumptions that were made at the beginning of the ideation process were:
Matching website colours to the company logo - Black #000000 and White #FFFFFF
Reducing superfluous images and text
To develop the concept structure for the new presentation of the website - I first brainstormed a number of ideas using 3 main categories: Appearance, Functionality & Experience.
Appearance meant the aesthetic of the website, Functionality covers the actual interaction and general mechanics of the website and finally Experience covers the user experience, ease of use and the feeling that this is a highly professional website.
​
These ideas then fed into some prototype ideas, here are some of the ideas for presenting the portfolio list page:
Storyboarding is an excellent tool for plotting the emotions and experiences of a user through the design. At each stage of the sketching of the website, the user's thoughts were simulated to gauge if the ideas were generating the desired outcome.
Prototyping
The prototyping stage included the decisions as to which type of prototype would be needed and what goals exist for the prototypes.
As the website already existed, I felt that a low-fi hand sketch prototype would not be very necessary to develop my ideas. As such I moved for a digital low-fi prototyping stage, following on from the ideation screens shown above.
The interactions and site flow were developed in a number of stages, till I felt that the correct layout was being arrived at.
Here is an example of the interactions that I planned for the user to follow - moving through various screens to the portfolio or contact pages.
And of course, following the lo-fi prototype, I produced a hi-fi prototype as seen in the following video.
