Worksuite Website
Worksuite Website

Worksuite Website

⚡️ Intro

As I started working at Worksuite in October 2020 I quickly realised that my first project was going to be to redesign the website. At that time Worksuite existed approximately 1.5 years and the company had pivoted their business case several times, which the website reflected. The storyline was not clear and there was a lot of unnecessary content online.

📅 Timeline & Role

icon
Worksuite Web Application
📅
Oct → Dec 2020 I worked on this case study during my first months at Worksuite. It was my first case in my new role as product designer and frontend developer. During this project I fully lead the project, created all designs and also partially coded the website.
icon
Caroline Bixner Product Designer & Frontend Developer I worked on this case study in collaboration with my team at Worksuite. I closely worked together with the founders, the backend developer and a freelance frontend developer to complete the launch of the new website.

🔨 Toolstack

Communication

icon
Slack
icon
Google Meets

Productivity

icon
Todoist
icon
Confluence

Research & Ideation

icon
Miro

Design & Development

icon
Sketch
icon
React.js

👀 Questions & Observations

To help me better frame any problems with the product, I began by forming some questions and observations I have about the product. To easily document these I followed the structure [Situation], [response], [problem to business or experience] to ensure I'm aware of users and business needs

When [users want information about the product], users [have to navigate through various pages and a lot of text], which causes [confusion about what the product is]
When [users want to create an account], users [see vague choices for the type of sign-ups], which causes [confusion and wrong signup flows]

🔍 UX Review

To confirm my observations and begin forming a hypothesis I conducted a UX/UI Review of the product, by thoroughly going through the full website and trying to create an understanding of the product. Having just joined the company my mind is still fresh and not biased with company knowledge.

UX/UI Review

During the review of the website experience, I focused on identifying the core product, the voice of tone, the content and design of the website. Below an overview of my findings, I confirmed my findings with analysing some existing feedback, that the company had previously collected with Typeform surveys.

⁉️
The content on the website was overwhelming and distracting from the product. Not clear what the product is with current content.

Videoshot of old website

Notes

image

⁉️
The language used on the website was not cohesive, many different words for product and other subjects. A lot of unnecessary and old content on the website.

A mind map to categorise wording and terms used

image
Miro board

❗️Key findings

  • Unclear description of the product
  • 10 different terms for the 'Worksuite solution'
  • 9 different terms for the word 'Expert'
  • 7 different terms for how the platform is called
  • 4 services listed that Worksuite no longer offers
⁉️
Design issues: low contrast colours for text and background, hierarchy in text and cohesive design of components.
image
⁉️
A lot of the products and services listed are not the core of Worksuite or are not even offered anymore.
image

😀 No Frill User Personas

Following my UX/UI review I identified a few personas who use the product. This helped me focus on the experience from each persona point of view.

🤠
Tech Experts Biography Tech experts with a background in Data Science & AI. Goals Their main goal is to find a new job, permanent or freelance. Blocker The content on the website is unclear. Tech experts are not sure what they are signing up for
🤓
Company Biography Companies who focus on Data Science & AI or have departments using these type of employees Goals Looking to hire new employees with those backgrounds Blocker The website is not clear what type of company they will be using for this process.

Conclusion

💢
Based on the UX review I realised we needed to have a deep dive to define exactly what the core product is of Worksuite. Decide on specific words and terms for the products and create a cohesive use of language for the website. Lastly I wanted to define the vision and mission with the founders to create clarity for the company and the website.

👩🏽‍🏫 Workshops

I organised three workshops with the founders to ideate and discuss Worksuite, to propose a storyline and to define the vision and mission of the company.

Ideation session

During the first session I walked the founders through my findings regarding the current state of the website and asked them to clarify the products in their own words.

image
Storyline

During the session regarding the storyline for the new website I suggested to stick to the 'start with the why' principle by Simon Sinek.

image
Vision & Mission

For defining the vision and mission I used the book 'Micro Copy, The complete guide' by Kinneret Yifrah. We ended up having three sessions, the first one the define the vision and mission, the second to define the values and finally a session about the personality of the company.

image

✍️ Hypothesis

Taking the outcomes of the workshops I formed a hypothesis to help focus the wireframes and prototype towards a solution that supported user needs and business goals

Users goal Business goal

I believe that by updating text and content on the website, and removing clutter our product will be more clear for the users and more people will sign up.

⚡️ Hi Fi Prototype

Due to time constraints I directly started to design a Hi Fi prototype in Sketch. The illustrations and icon designs were done by an external party. The rest of the design, including the text were done by me. I used a grid to align all components and I applied the 8px rule.

Sitemap

After the workshops we decided on key pages for the website, below an overview of those pages in a sitemap. I decided to clearly explain the product for the two separate user groups, tech experts and companies. Therefore I created a homepage for the tech experts and for the companies. I structured the pages starting with the why principle and followed with what and how.

image
Site map page

Hi-Fi Designs

Below an overview of the final designs for all the new pages. Initially at Worksuite we used Sketch to create designs, I prototyped some of the pages with Innvision for the team to test and review. But we never created a fully functioning prototype for a usability test.

image
Homepage Experts
image
Homepage Companies
image
Our process
image
Tech Experts
image
About Us
image
Sign-up
image
image
image
image
Login
image

💻 Web Development

After the process of designing the website I also contributed to developing the new website with writing frontend code. I updated the text, rebuild some of existing components to fit the new design and merged the work of our internal frontend developers and external freelance developers.

image

✔️ Outcome

A new website live in less than three months after I started working at Worksuite.

The website was recently updated by us with a newer style. An update in my portfolio will come soon.

Come and have a look and learn more about Worksuite 💫

💡Key learnings

  1. Allocate more time for testing and iteration on ideas and sketches
  2. Switch from Sketch to Figma, to improve design process with prototyping
  3. Try to organise a larger testing group to test content in the future