AHEAD website redesign

Ahead is a company specializing in mobile applications development among security and digital identity fields. As an Ahead‘s employee I was given a task to completely redesign Ahead‘s web page as my own project I would manage from the beginning till the end.

THE PROBLEM

There were a lot of information and projects missing in our old version of website. There were no student-friendly approach. Design that wasn‘t changed for over 4 years.

The website needed overall change and a new coat – from the structure, content and design.

GOALS

To create a modern website presentation of the company supporting our new branding. As our target group are students of university, which is also our resident place, we need to approchably share information with them – e.g. job and internship offers and bachelor and diploma thesis supervision.

As we run the company within our parent company with their own business department, our web presentation isn‘t the main point of contact with our clients althought we definitelly agreed on that the website should lool representative in case our clients visit our pages.

APPROACH

With the complete website structure reorganisation we needed to stop and rethink everything. We got back to the base and discussed who we are? What is our philosophy? Who do we create website for? What do we want to tell our visitors? What projects do we want to show?

This was the hardest part. As we agreed on the basis, wireframes, prototype and usability testings followed along with iterations of the various parts of the design process.

THE PROCESS

As mentioned above, a lot of deep thinking about philosophy was going on in our heads, which was a reason for several wireframes iterations. Next step was creating visual design—altogether 8 unique pages.

I created a high fidelity prototype which I showed to 8 students of informatics at the university where we have our resident office. These students were defined as our target group as we offer them internships and possibility of bachelor/master theses supervision.

The main goal I set before usability testing was to find out whether students will quickly enough find out what our company does, what is our field of work. This was crucial for us as Ahead is specialized in specific fields in which are mobile and web applications made. We need to transparently and clearly show and tease students that in Ahead applies technologies of future and mastery cryptography techniques. A lot of students can learn and at the same time practice on real (and big) projects. Secondly, I needed to confirm that all important information about thesis supervision and internships are well approachable by just a few click in few seconds.

Tools used—paper and pen — Adobe XD — Sketch — Adobe Illustrator — InVision

Students had no problems finding an information I asked them to find, that was a good message for me that perhaps no one will be lost by searching for a job at our website.

What surprised me was a general confusion by figuring out what the heck Ahead does. In a good belief of helping students to orientate in our business, my visuals contained the infographics showing the structure of our business and approaches using nets, buzzwords and icons.

Students only were able to catch some words out of infographics, but later by staring into it couldn‘t identify several icons and generally whole thing was misunderstood. As a result, I re-thought the infographics and replaced with very simple visualization of 3 mains stones of our business similar to puzzle showing that our fields we work in are fully connected together and create a strong basis for great products. This visualiszation was tested afterward with students and no misunderstanding wasn‘t observed.

Other problem students were struggling with was to quickly understand the brief presentation of Ahead‘s projects/products on the landing page. I evaluated this as a copywriting problem and unified all headlines, descriptions, tried to make them as clear as possible not to confuse anyone and at the same time tease them to click on „Read more“ button appearing by the each of a project.

As I also encouraged students to comment more on whatever page of the website they click in. Thanks to this I got many other smaller tips for improvement and it helped me understand how students think and use the website.

After polishing all details I handed over all data to front-end developer (as he meanwhile created a structure of the website according the wireframes) who thanks to Invision‘s inspect mode was smoothly able to code all features as designed.

  • UX (wireframes, prototype, usability testing), UI
  • www.ahead.cz

EXPLORE MORE


CALL ME MAYBE?