Orbit Pages
A code-free and simple page builder for the Digital Marketing market
UX Design - UI Design - Product Management - Agile Methods
Content 📖
1. Challenges
2. Goals
3. My Role
4. Processes
5. First contact with users
6. Product Vision and Working Backwards Roadmap
7. Four Quarters Roadmap
8. Design System
9. Prototyping
10. Validation
11. Iteration
12. Design Sprint
13. Page Builder
14. Learnings
15. Next Steps
Challenges 💪
Orbit Pages is a small startup that received funding to solve the scalability problem caused by technology limitations and a high abandonment rate of new users of over 60% in its Landing Pages for Digital Marketing.
Objectives 🚩
✅ Create a new scalable and easy-to-use version of Orbit Pages.
✅ Create a Design System that will serve this and new products.
My role 👨💻
Act as an end-to-end Designer, working with strategy, research, discovery, prototyping and validation and being responsible for all decisions made.
Processes ⚙️
With a newly formed team, I facilitated a UX Work Process dynamic with everyone, the intent was to define scope, level expectations, and clarify roles.
The result was the definition of responsible parties, participants, and the design steps, and the document became accessible to everyone on the team through Notion, being updated whenever necessary.
This UX process was used in the discovery track of the Dual-Track Agile method, ending in the handoff to the developers to start the delivery track, ensuring a balanced delivery pace among the team.
First contact with users 🤝
I conducted a mixed usability test with tasks and questionnaire, in order to validate hypotheses raised by Orbit's co-founders, identify pain points in the product, and involve the team as observers and note takers to disseminate UX culture.
Since about 98% of the users were coming to Orbit Pages through the Eduzz platform, I used their Eduzz Personas document and Mixpanel demographics, and defined with the PO the following sampling cut-off:
- Level of experience: First-time, Beginner, Intermediate, and Advanced
- Niche market : Affiliate, Infoproducer, and/or Agency
- Demographics: Age, Geography, and Gender Identity
I then applied the test and consolidated the results, and the main pain points were:
❌ Flow to the page builder was extensive, creating a very long task time to value delivery.
❌ Onboarding only explained what each menu item did, but did not give context of the benefits of the tool, much less the people for completing their tasks.
❌ Inferface elements with low intuitiveness prolonging the learning curve and causing more triggers to the support.
💡 I talked a bit more about moderation, consolidation of results and iteration in two other moments that there were usability tests in this case. But all the steps happened in all of them.
Product Vision and Working Backwards Roadmap 🗺
After gaining some knowledge about the product and its pain points, I suggested that it would be important for a new team to understand the product vision and clarify the communication of long-term expectations, so I facilitated dynamics with everyone involved in the product.
Product Vision
Roadmap Working Backwards
Four Quarters Roadmap 🗺
After clarifying the long-term visions, we felt the need to tangfacilitate the dynamics of breaking down the first quarter Roadmap to visualize medium-term goals and generate tasks for all disciplines. We first defined the goals and then broke that down into actions to be performed by each participant role and listed by priority again.
Design System 🧰
As consistency, usability, accessibility and scalability were our goals, we started the creation of a Design System for the new version. If you want to know more, just access the Orbit Design System case (you can click, it will open in another tab).
The Design System was separated in two levels, Andromeda, which would hold all the interface and interaction elements of the Orbit Pages platform, and Chamaleon, which would be something extensively adaptable to be able to generate the most varied sites built by our users.
Prototyping 👨🎨
I started prototyping the flow until the editor, as the rest of the development team was not available at the moment due to server migration related tasks being prioritized. I did the flow ideation together with the Product Owner using findings from the first usability test, a quantitative analysis with a new user conversion funnel and benchmarking. We went straight into high fidelity prototyping as we were validating the new Design System components as well.
Validation 🕵️♂️
The test was applied with flow tasks using a navigable prototype, I participated as a moderator and invited two more people from the team to participate as observers and take notes (remember I said there was this and another test example in this case? I'll show you more about the discovery notes I used in a moment).
Iteration 🔧
Finally, I consolidated all the findings into graphs and highlighted the main findings to conduct a dynamic ideation with the whole team to present the results and generate hypotheses and ideas based on the learnings. With this we gained agility and reduced the risk of bias.
Cut out the graphs presented in dynamics to give context to the participants:
Cut of the insights discovered per flow scenario, where we comment on positives, attention points, and negatives at specific points in the flow based on the findings:
Finally, we concluded that the test was a success and took the risk of not validating the changes again because of the short time and the positive result.
Design Sprint: Page Builder 🦄
With the flow to the builder on the development conveyor belt, it was time to start the process of discovering the interface of the Page Builder, with the team more mature and adhered to the Design process, I suggested in one of our remote meetings we hold a Design Sprint and briefly explained what it was about with emphasis on the speed of delivery of results, since time was one of our biggest challenges. The team was very receptive, so I started the planning.
Planning
My first action when planning this Design Sprint was to identify the key users of the methodology and the participants of the usability test, since we only had seven days until the dynamics would take place. I identified the participants and counted on the help of one of the co-founders, who for the time being wore his Product Owner hat to get in touch with people. Next, I revisited the Sprint book and searched for references on how to apply remote Design Sprints, we used Miro as a whiteboard tool, with Jake Knapp's template, one of the authors of the aforementioned book, adapted to our reality, Zoom as a videoconference platform, and Notion for all the documentation.
Design Sprint DocumentationFinally, I defined the schedule of activities, reviewed it with the team, and shared it with the participants along with a context of what we were going to accomplish and why.
Design Sprint TimelineExecution
We started with introductions and an icebreaker dynamic to generate familiarity and encourage everyone's comfort to express themselves. Next, the Lightining Talks, in which the co-founders presented a little more of the brand's context and vision for the builder's future ensured that everyone was on the same page about the expected goals. Next, we hypothesized with the dynamics of How Might We ? to raise points of doubt to feed our discussion, they listed the most relevant doubts and associated the similar ones in groups. Next, three users led a team each in the development of a User Journey Mapping, the participants voted for the best description of the journey, which was iterated with the help of all, then we elected positive and negative points of each stage of the journey, and to close the mapping, we associated the doubts generated in the How Might We to the specific point of the journey in which it was most applicable.
A break for lunch and we started the afternoon discussing goals and listing the top three pain points in the group's view for the three rounds of Crazy Eights, and the pains listed were:
❌ Builder does not adapt to the specific needs of the personas
❌ Visual pages on mobile do not cause a "WOW" Effect
❌ Interaction with the builder limits it by being too cumbersome
I started a vote to decide the biggest pain point, the builder not adapting to the specific needs of the personas received the most votes.
We set off again to pencil and paper to draw the most detailed sketches of the onboarding.
When finished, the sketches were given the dynamics of Heat Map, Speed Critique, Straw Poll, and by a Super Decision to identify the two best sketches, which went to the voting and the winner was chosen because of the following positive points:
✅ Niche-specific interaction.
✅ WYSIWYG (What You See is What You Get) component editing
✅ Preview of page templates
Userflow
Based on the sketch and benchmarking, we built a userflow to guide our prototyping.
Prototype
To speed things up as much as possible, we ran the prototype using the component library we already had and adapted only what was necessary for validation.
The maxim was to keep design and technology choices as simplified as possible, helping to translate our users' brand or product identity as a guide for people to focus on their sales and not on technical details of technology and design, being able to choose the best way to build their page according to their product usage profile. Being able to accept:
- A page suggestion generated based on the brand's colors, logo, font and style
- Use a library of templates curated by references in Landing Page Design and Digital Marketing and adapt them as needed
- Starting from scratch
Validation
The validation took place on the third and last day of the dynamic, we performed usability tests on three users following the same sampling frame.
The validation took place on the third and last day of the dynamic, we performed usability tests on three users following the same sampling frame as all the tests I performed at Orbit.
I adapted Sheylla Lima's excellent Tabulation Table, which enabled us to act with agility, manipulate data with ease, and ensure consistency in all tabulations and consolidations performed.
Tabulation
Discoveries
The test plus had more than 70% acceptance in perceived value and affordance (intuitiveness/usability) and based on this we consider the validation a success, moreover we have made several valuable discoveries.
❌ No user profile has chosen to build the page from scratch
❌ Different colored guide lines confused
❌ The name Builder became too similar to Interlinking Builder and it was not intuitive that Templates were
❌ The term define domain in the way it was exposed was not understood by the beginner level
✅ WYSIWYG component editing with instant feedback was a hit
✅ It is important to be able to rearrange the blocks easily
With this, we considered the Design Sprint a success and updated the userflow according to what we had learned.
Userflow updated
Page Builder 👷♂️📄
We started the 2nd tier of the Design System, the Chamaleaon, and when the building blocks were ready, building the new builder in high fidelity in parallel with its new components, prototyping was separated by features and when we accumulated a set of features, we performed a validation with a usability test. The gallery below shows some results.
Learning 🤓
The great thing I learned during my time at Orbit was to appreciate the startup universe, being able to work on a new product that is about to be born and being responsible for all the design decisions brings with it a very rewarding sense of responsibility, being able to foster, apply and mature processes in a team with the delivery of value in sight.
Next steps 🐾
Com a crise econômica e o investimento inicial acabando, os cofundadores ficaram receosos de pegar um segundo aporte financeiro, e após uma conversa muito amistosa, o squad se desmanchou e encerramos nossa jornada com a certeza de que nosso trabalho pode mudar a vida de pessoas que estão buscando se restabelecer financeiramente, uma nova carreira ou acrescentar praticidade à sua rotina de trabalho e fazer eles sentirem, que sim, conseguem fazer sua própria Landing Page.
Para próximos passos, finalizar o restante Construtor, possibilitando um lançamento de um piloto para Key Users, colhendo todos os feedbacks de observações naturalistas e acompanhando métricas-chave para o produto, para enfim fazer um plano de lançamento da nova versão do Orbit Pages.