tEAMMATES
Amir Mohammadi
Product Designer
Morteza Shojaee
Product Manager
Development Team
Dev-Ops, Software engineers
Owned By Designers
Branding & interface
Research & Wireframing
Design System contributing
UX Design and Usability Testing
Hand-Off & Documentation.
cO-Owned WITH pm
Product Strategy
Feature Prioritization
Competitors analysis
Problem
Despite being used by 45% of websites, WordPress can be
difficult for most users to configure and resolve hosting issues.
I used Lean UX framework that based on make and test assumptions, I preferred Lean UX Instead of Design Thinking
Think
Test
Learn
Design
1.
We knew exactly what we want to build, special features and value Propositions.
2.
Stockholders have a deep knowledge in this market , their hypothesis and assumptions have low risk but high value.
3.
We had a limitation of time and budget.
4.
Our product Values is in the level of infrastructure, and some of design solutions my not be able to develop
Step 1
User stories + App flow
First I joined the project, the stakeholders had already developed a list of features, but it lacked design insights. I began working with the PM and stakeholders to complete user stories and add new features.
I've searched for direct and indirect competitors, who may have a solutions for our customers’ needs
I want to know how they solved our problems, how optimized flows, what is the value propositions and etc.
Step 2
I started wire-framing to make sure that the development team can develop my solutions as I had some knowledge and infrastructure limitations with cloud technologies.
Then Start off visual stuffs. I developed a UI Kit, Components, Icons, etc. As prepare documentation for developers
I started documentation in my free times for other designers may join and developers. this is now is our design system.
Step 3
It’s time to start visual design we designed +300 screens and modals. then testing some golden flows and optimize them.
Through designing high fidelity mockups, we always get feedback from stockholders, developers and potential users. try to figure out whats the behind their words and bring it to my solutions.
kEY Flow
Buy a plan, adding website or migrate from another hosting then manage it.
this is our golden flow so I’ve started to improve it in usability testing sessions.
Users initially need to select a plane based on their requirements.
the can create or immigrate website from other hosting.
Users can chose the plan that meet their requirments
configuration the server and go to payment
configuration the server and go to payment
Zafier
Visitors
2,587
WP Ver
5.9.8
CPU
48%
Ram
1,583 MB
Storage
12,489 MB
Zafier
Pendding
Visitors
2,587
WP Ver
5.9.8
CPU
48%
Ram
1,583 MB
Storage
12,489 MB
Zafier
Visitors
2,587
WP Ver
5.9.8
CPU
48%
Ram
1,583 MB
Storage
12,489 MB
Zafier
Visitors
2,587
WP Ver
5.9.8
CPU
48%
Ram
1,583 MB
Storage
12,489 MB
Zafier
Visitors
2,587
WP Ver
5.9.8
CPU
48%
Ram
1,583 MB
Storage
12,489 MB
View Website
WP Admin
Setting
Delete
View Website
WP Admin
Setting
Delete
Website Cards Different States
Step 4
Prototype, Test and Optimize the Key flow and bring consistency to all the flows
After we’ve finish the golden flows UI Design. it’s time to improve and optimize the flow.
I didn’t test with low-fidelity because I believed in this case testing a high-fidelity prototype would help users experience the real product. Designing the high fidelity version doesn’t require a lot of effort, especially for critical user flows.
Apply new insights into the designed screens and test again.
After I’ve finish the golden flows UI Design. it’s time to improve and optimize the flow
1.
Some users didn’t understand cards are selectable
I add a radio button into the cards
2.
Users wan’t sure which plan is suitable for them.
I used a slider and help icon
3.
And more changes in design like basket, payment, domain ,etc.
After test new design some metrics improved
Time on task
70.5
76
+5.5
Error Rates
avg 3
avg 2
1
SUS
70.5
76
+5.5
Responsive and adaptive design for mobile. 72% of our users using desktop, so we have removed some features from the mobile version.
And More Sizes...
Resutls
We worked for about 32 weeks from scratch to launch. The development team put in even more time. We have finally launched for beta testers and are still gathering feedback.
Morteza Shojaee
CMO at Zoneit Cloud
I've known Amir for 4 years since our time at Green Host. He was a skilled designer capable of creating various assets. That's why I asked him to join Zoneit Cloud as our designer. Not only is he talented in design, but he also has knowledge in marketing and business. I am pleased with the outcome of our collaboration.
What I learned
Being a generalist artist is not a bad thing.
you can solve almost many bottleneck. it allows for versatility and the ability to work on various types of task. This broad skill set can lead to more opportunities for creativity and innovation, as well as the flexibility to adapt to different artistic challenges.
Documentation from the start of the project.
it is very important especially when a new member add to your team. documentation is crucial from the project's outset for clarity, communication, alignment, guidance, handoff, maintenance, and risk mitigation, ensuring efficient collaboration in design team.
develop the design system from first component.
I will help you save many hours and maintain design consistency, especially if you are not working in a solo design team. It keeps everyone on the same page.
make sure designed all possible scenarios.
it’s better to find all the undesigned scenarios inside Figma instead of design QA so use fully detailed user flows and consult with diverse team members.