Overview
Smartplace (Previous name: 9Cloud) is a SAAS startup in Sydney specialising in intelligent automation. The aim of the product is to break silo operations in middle sized companies through workflows.
I have joined in September 2019, just two months before the product made its official launch. Since I was the only designer in the team, and was the first job I had as a designer, this experience was extremely rewarding: seeing my own designs coming to life and have it bring value to something.
Towards the the end of 2020, the product needed re-evaluation. I joined the product and design team. I played a role in research and competitor analysis, wrote product requirements, and eventually redesigned the software UI screens.
Role
- Web designer
- UI designer
- UX designer
- Branding
Deliverables
- High fidelity screen designs
- Website
Tools
- Adobe XD
- Webflow
Results
Contributed to winning best startup for user experience in Startcon 2019
UI Design
I have designed all software screens through Adobe XD, and through collaborating with the founders of Smartplace, designed a set of style guidelines for the product.
This was my first time designing for an enterprise software, thus I referenced to existing softwares such as atlassian and asana, ensuring what I designed was to industry standard.
Furthermore, the Atlassian design system was referenced for better built to the engineering team.
RESOURCES SCREEN
Previously, forms and employee data are kept using excel. The problem was mass data would be difficult to find and update.
SmartPlace's cloud based solution was to provide a platform for companies to store all their forms and data in one place, digitally. Employers can choose to upload existing excel spreadsheets and convert them all on the platform.
TASKS BOARD
Employee licenses should be up to date for legal and compliant reasons.
Tasks boards allow employers to track all license expiry dates, reminding when they should be renewed.
LOGIN PAGES
A light version was also designed for lighter browsers
Popup card designs
Users were mainly non tech savy people, working in construction and blue collar occupation.
Thus, to ensure ease of use, we had to ensure clear text label to every action button, and use colours when appropriate.
Instructional popup
Approval cards
Deletion popup
Confirmation popup
Navigational sidebar design
Icons were designed with tooltips on hover so users can know exactly what they are clicking on.
Designed with a set of measurements written to ensure final built matches with what was designed.
design system and style guideline
Ensuring everything was consistent was key to a good user experience.
Buttons
Input, header and others
UX design - Data cards
Employee data were previously stored in the software through a spreadsheet form. Sometimes, employee licenses need to be renewed and missing employee data needs to be filled in by a certain date.
The task was to translate information from spreadsheet format to card format, allowing users to view information more intuitively and reminding any urgent tasks that needs to be taken action on.
Before:
After:
Compared to spreadsheets, the new card designs:
- Minimises the need to recall information - When browsing through a form with lots of information, users would have to horizontally scroll through the screen to view more cells, increasing possibility for them to forget the information written in previous cells, or mix up information with the cells above or below (increasing cognitive load). When viewing through a card, users can always reference to the header information. Focus is only given to one piece of item preventing any errors and confusion in reading.
- Is responsive - In a smaller screen, users won’t have to scroll horizontally to view information for one item.
- Allows flexibility - Longer texts can be more comfortably read. Users can also add additional information to a single card without affecting other cards. It also provides the option to hide any information that is not as important to save space, but can be accessed when clicked on. Whereas in a form, all information is displayed on a page.
Design auditing - Website audit
Task and goals: The task was to review the website, list out any issues or inconsistencies that might impact user experience, and providing a solution to those errors.
Five criteria were used to assess the website: Accessibility, responsiveness, UX, forms and contact, and visual design. The goal was to fill in any design gaps overlooked and provide solutions so user experience would be improved.
Several key auditing focuses were applied here:
- Are all text in the section legible and adhere to web accessibility guidelines (WCAG)? (Accessibility)
- Is the section optimised and are content legible for larger and smaller screens? Is there adequate white space given in mobile view? (Responsiveness)
- Does all links and buttons follow affordances and direct to the intended page? Are the purpose of each button clear? Is the CTA visible on landing? Does all GUI follow intended function? (UX)
- Are all forms fields following best practice, and contact information correct? (Forms and contact)
- Do colour shades adhere to the brand guidelines? Are all heading types consistent in size, colour and font? Are icons consistent in style? Is adequate white space given to each section and are imagery relevant to the content? (Visual design)
For each individual section we recognise how well the audit criteria have been adhered to. For areas that are lacking, the proper resolutions are suggested along with a justification as to why the resolution is needed.
I have learnt to communicate these design issues, ensuring they are addressed in the final version of the website:
- Identifying problem - Describing the problem and why it matters to the overall experience
- Including a screenshot of the problem - A screenshot with annotations and drawings specifying the element or section that needs fixing
- Providing a solution - Suggest a specific and actionable solution to the problem
Example:
When testing for responsiveness in larger screens, an issue that arose was one of the sections had elements that fell apart, which greatly impacts reading experience. This was communicated in the auditing, with suggestions for fixing.
Reflection
This was the first real life design project I have contributed in, and has provided me with an experience which helped solidified my vision to what aspect of the design field I want to focus on. It has solidified my foundation on design, applying, and learning theories and skills to develop designs that are going to be used by real users.
1. Design is much more than aesthetics
As a graphic design student, I often see myself prioritising aesthetics over anything else. But through this project, I have learnt to design with existing conventions, adhering to guidelines, rather than "reinventing the wheel", designing something that is purely for aesthetic purposes.
2. How to create value through design - I have learnt that working as a designer means every design decision and change should create value to the organisation. This means considering how each decision decision contributes to creating a better experience for customers.
