A UX/UI Case Study| Function over fanciful UI design and cutting down the consultation process
Associated with: Skyscape Gardens Urban Landscape Architecture
Team: Victoria Bonk| Jeff Deakyne- User Researchers & UX/UI Designers
Time Frame: Ongoing
Tools Used: Figma, Miro, Trello & Maze
Project Overview:
Skyscape Gardens wants to be apart of the newly permitted Colorado Green Roof movement as well as designing creative and modern landscapes while working environmentally conscious.
They need a UI that reflects the great work they do and what they believe in as a company. We will use the design process and input from the stakeholder to help us create an easy to use UI that gives the user the capability to feel at ease and trusting in Skyscape Gardens when looking to start a project.
The Challenge:
When redesigning from the existing UI with it being very interactive and flashy it would be difficult to give the same feel to the user with a totally different design. How can we make a clean and suave looking UI while giving a great user experience and above all else functionality?
The Problem:
When users want to start a landscape project they often get stuck with many company’s confusing UI’s. The consultation process also can be long and miscommunicated as well as feel distant between the company and client. Users need a way to cut down the consultation process and connect quicker to ultimately gain the trust of the company and get to work faster on the customers project.
The Solution:
We will first redesign their current UI to be more user friendly. We will also add a feature to help cut down the consultation process for a better and more efficient user experience. Through our design process we will come to a final design that will not only be easy to use but aesthetically pleasing for the user.
User Persona:
Heuristic Evaluation results:
- Updated the home page
- Made the website very simple and easy to use for the user
- Took at the hamburger menu the original site had
- Only have one logo one the website instead of two
- Added real images
- Edited the style guide
Redesigned Logo:
Original Logo
Redesigned Logo
We decided to move the green illustration in the logo to the left of the words because it was easier to read as well as being more fitting in the header in the UI.
Weeding out the purposeless:
- The homepage is distracting with pointless interactions that serve no purpose.
- The services section was very hard to read because of the layout with flickering photos when hovering.
- The primary nav was too hard to read being white font with moving pictures behind makes visibly impossible.
Ideation:
We had the opportunity to actually sit down with Noah and do some brainstorming which was very insightful.
User Insight:
Here is some great insight we got from our user testing through Maze.
We created a feature that would help to cut down the consultation process and our users seemed to think it was successful in doing so.
The “Get Started Feature”
We wanted to create a feature that would possibly cut down the consultation process between the client and service and naturally create a closer relationship between them. This was done by designing a overlay menu that would pop up when the “Get started” button was clicked and there the client would fill their name, what service they would like and an email address to reach them. When the inquiry is sent there is a SMS message sent directly to Noah at Skyscape Gardens so there is an instant connection. From there the client is also taken to a confirmation page thanking them for their inquiry as well as listing the next steps to expect in the work process. This would speed up the process we think and create a more comfortable experience for the client.
Confirmation page
User Flow:
Wireframes:
Style Guide:
We refined the colors and fonts for a higher end looking design.
Added blues to be complementary to the green tones in the logo.
Created a horizontal logo lock up for more versatility.
Final Iterations based on Usability testing:
Increased font size on the inquiry form for readability.
Changed the wording of the inquiry CTA button to Get Started to eliminate confusion
Added a Get Started CTA button to the footer on the homepage for convenience for the user.
High fidelity design:
High fidelity Prototype:
Final Thoughts:
In the end we created a user friendly UI that was a simple clean design that is not distracting and gets the user to their goal faster and easier.
It seems though the current UI had a beautiful and interactive design the functionality was lost.
In the future it would be great to see how the feature may have increased business for Skyscape Gardens.
What we learned:
- Minimalist design is more functional than fanciful appearance.
- When working for an actual client there is a lot of trust in you as the designer to create something that will not only help them but wow them.
- When working with a specific area like Landscaping it was important to use actual landscape design vocabulary when designing, which we had no experience with.
- There are new learnings in every project you work on.
