Orchid .B
A small business admin website that provides SaaS for back office administration function on one platform.
Role:
UX/UI Designer on a team of 5
Process:
-
Discovery
-
Ideation
-
Design
-
Dev Handoff
-
Reflection
Overview
Orchid B Small Business Admin Portal is a valuable tool for small business owners who want to improve their efficiency and productivity. Orchid.B asked our team to design their customer's page. The objective was to provide a streamlined user interface that allowed the small business to utilize the platform efficiently while stylistically providing a simple and clean interface. Our team accomplished this by using an audit of similar platforms to help provide insight into our design.
The Problem
As a small business owner, staying organized sometimes takes time and effort. Finding all your projects, who the primary contact is, and sending invoices by email or snail mail can cause things to get lost or get you your money later. All of this adding up can cause so much stress! Small business owners need more tools for success! The client wanted us to help solve these organizational issues for customers on THEIR customer's page!
The Solution
Our user-centered design solution utilized an audit report, research, and client input to establish a solid visual hierarchy based on user needs. We identified 6 primary user flows, including adding, editing, inviting, and deleting a customer. We established these user flows to improve small business owners' website navigation. The cohesive color scheme, typography, and spacing contributed to our success.
Discovery
Kickoff
The client had a mobile version of Orchid. B and wanted to transform it into the web. Our team was tasked with creating the customer section of the website to continue the style from another team who worked on the onboarding and dashboard. We continued off their style guide to ensure consistency and flow for our users.
Client Questions/Answers
We developed questions for our client to ensure that we could create user flows for what the client wants the user to do in the customer section of the website.
Our findings were:
-
Inviting options for the client to the project
-
Capture important information for the client
-
Simple and clean design- nothing but what is needed
-
Information-focused to make it easy for the user to be efficient
Website Evaluation and Research
Our team researched the app to review what the needs were for the website. Since we were designing the first iteration of their website, we examined the onboarding process and the dashboard for inspiration.
Competitive Analysis
Part of our research involved a competitive analysis of Monday.com and several other administration and project management websites and apps. We evaluated their website to gain further insight into functionality and usability for this market. From this step, we learned what we liked visually about several different platforms and what we thought could be improved to help Orchid.B stand out.
Our Top findings were:
-
Color usage is to highlight important information
-
Styles are simple, and information focused, but not boring
-
Features and icons are used to assist the user with a task
Ideation
User Flows
Before we could start designing, our team had to identify the most important functions this part of the website needed. User flows help us understand how we want to lay out for users to complete their tasks. We decided on 6 different user flows to give high user functionality and a clear objective. I was responsible for pieces of each user flow. To ensure consistency, our team split up flows every week so we understood how all of the flows worked. I started with user flow 1, 3, and 5, then rotated back to 2, 4, and 6.
Medium Fidelity Wireframes
As UX designers, our team decided to each create our wireframes to come up with creative concepts. We individually started with our designs and then presented them to each other.
We started with a desktop frame. Everything was evenly spaced and aligned to ensure the developer could have consistency.
From there, we all decided what would be most influential on each screen and what design type we liked the most.
I added our inspirational photos (seen in the competitive analysis) alongside my work to assist me with visual ideas. I settled on a clean look with a user-friendly and familiar to other websites in the project administration space.
Design
UI Design Iterations
Our client wanted us to have 3 different iterations to help them decide which style and color they want for the website. As individuals, we each came up with our designs and presented them to each other. We decided on three designs to present to the client. Our team was able to have multiple colors and options to provide for our client.
The client decided on a purple color to help the website stand out. The image on our right was one of our original ideas to enhance the site with the color scheme from Orchid's Logo.
Style Guide
Our team collaborated to modify the style guide throughout the project. Once we received feedback from our client, we aligned the style guide and added a cohesive color palette, buttons, typography, and icons to the existing style guide.
Our team organized the design by creating an information blueprint, developing efficient components, and adding new icons and images for a better user experience. We selected purple from the wordmark to further emphasize the brand across the website. We also wanted to show the clients that we are a luxury for a small business. We chose fonts that were accessible and would be easy to read for any user. We structured the components to have variants and structured the elements to allow for multi-use across the platform.
High Fidelity Wireframes
We all worked as a team to ensure pages were well organized, spacing was perfect, and all of our UI transferred over. I prioritized making the designs feel clean and elegant to stay on the theme of the previous designs. I accomplished this by even spacing, visual hierarchy, and a simple but visually elegant.
Prototype
My team and I ensured that all pages had smooth usability during prototypes. Through this process, we developed the most efficient navigational pathways from the home page to the customer and profile pages.
Developer Handoff
Our team collaborated to deliver clean and efficient annotated notes that outline the customer journey from login to editing or deleting. This resulted in a successful user experience. Our developers also have access to the prototype for further insights into functional design.
Reflection
Our team's ability to collaborate and design our customer journey impressed me. With having to work simultaneously with the team developing the vendor's page and having an additional team working on that journey, we wanted to have a cohesive design. However, I put a lot of extra time into this project as we needed to ensure that our designs met the client's expectations and had a uniform look.
As I look back on my independent work, working for a start-up in the SaaS space has a lot of competition, and ensuring that we helped them stand out was a task I did not take lightly. I wanted to provide the user with an easy navigation experience and also be able to have quick access to multiple significant needs for their flow, such as inviting to projects, deleting, or editing customer information.
This project aimed to create greater access for clients by allowing them to complete all these web tasks. This will increase their user reach by allowing the user to pick their preferred platform.
Since we used Figma, we could add to the component library and local styles to ensure that there was that added feature to make it easier for designers. We also developed color palettes and text hierarchy to reduce team errors.
