Textgain is an AI company based in Antwerpen, Belgium that helps various different industries with their innovative applications. Their multilingual business intelligence services extract valuable metadata from documents (reports, legislation, social conversations, ...) and other sources. Their privacy-by-design approach ensures the safety of your data and that of your customers. Their products discover actionable content inside documents that can be used to manage brands through social media sentiment analysis, and get unique insights into the age, gender, education level and personality of users.
Textgain opened up a scope with us to do a re-design of their current website, aiming to pull their brand into 2021. The requirements we received in the initial brief were as followed:
- Incorporate their newly developed brand into a design for their website.
- A focus on showcasing their projects and place to share their insights with the world in the form of articles, technical reports, free data sets, and more.
- A strong emphasis on international profiling. Textgain should be presented as an international AI company that ties in with tech companies, governments, and security services.
Our design process
Based on the brief and a kickoff meeting we fletched out a custom design process that suited the needs of this specific project and would get us to a desired end result. The process we opted for consisted of defining an Information Architecture, Wireframing and ending up with High Fidelity Designs for development.
IA (Information Architecture)
Because they weren’t happy about the sitemap of their existing website we opted on doing a handful of IA sessions to define a new sitemap based on their current goals. Our lead designer Carlos conducted multiple sessions and based on their input a definitive sitemap was defined.
The approved and final version of the IA (Information Architecture)
Wireframing
Wireframing is one of the most crucial steps in a web design process which involves visualising the digital skeleton of a digital product. A wireframe is a simple layout that demonstrates what interface elements will exist on page. The preferred tool we use at Whale is AdobeXD. With AdobeXD gathering and processing feedback became a very streamlined process for both us and our clients.
AdobeXD design review functionality is used to leave and process feedback during the design process
We use wireframes because it saves time and helps with gathering feedback in the early stages of a design process. Wireframes can be made quickly which makes it easy to get rid of major errors and do quick adjustments. Gathering feedback from the client and end-user is very important. Wireframes help in achieving this and makes exploring different approaches less time consuming.
This phase resulted in a collection of wireframes for every key page of the website. The layout of these key pages was extensively thought about and iterated on.
A small collection of art boards containing late stage wireframes
High Fidelity Designs
Both us and the client were happy and confident that the definitive wireframes were properly structured and got the thought and iterations they deserved. Doing the high fidelity designs of the pages was the next step in the process. Because Textgain had already delivered a document outlining their new brand guidelines, our next challenge was finding a visually pleasing approach of applying their brand to our designs. We took a key page and tried a few different directions of style implementation which eventually led to two options that got presented to the Textgain team.
Art boards showing the two options of style implementation that were presented to the client
After some debating and tweaking we made a final decision on the style, which meant we could continue with implementing the style for the rest of the pages. During this process we also started defining some basic interactions to spice up the designs. Working with AdobeXd allows us to add transitions and animations to elements directly in the artboards and easily showcase them to our clients by generating and sharing design review links. This enables us to accurately visualise how, for example, triggering menus or hover animations will work. Just like they are going to work and look like on the fully developed site.
A collection of art boards containing high fidelity designs for desktop screen sizes
The design phase came to an end after doing a handful of feedback rounds focusing on styling and interaction (major issues were already ironed out during the wireframing phase). By following this customised design process we ended up with a design that is now fully ready for development. We hope to share more very soon!