⚡️ 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
🔨 Toolstack
Communication
Productivity
Research & Ideation
Design & Development
👀 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.
Videoshot of old website
Notes
A mind map to categorise wording and terms used
❗️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
😀 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.
Conclusion
👩🏽🏫 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.
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.
During the session regarding the storyline for the new website I suggested to stick to the 'start with the why' principle by Simon Sinek.
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.
✍️ 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.
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.
/w=3840,quality=80,fit=scale-down)
/w=3840,quality=80,fit=scale-down)
💻 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.
✔️ 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
- Allocate more time for testing and iteration on ideas and sketches
- Switch from Sketch to Figma, to improve design process with prototyping
- Try to organise a larger testing group to test content in the future