Role
UX UI Designer
Team
Product Owner, Engineers, UX Designer
Duration
16 months
Running a niche web design and marketing service, my client was looking to develop a website builder derived from their current custom software.
Our main goal was to create an industry-specific website builder, enabling easy creation and management of professional websites without any design or coding expertise.
I remotely collaborated with their cross-functional team in Seattle, overseeing all aspects of design, from defining the product's functionality to shaping its appearance and user experience.
I conducted remote interviews with the Product Owner and key stakeholders to grasp the project's vision and scope. Gathering insights into their goals, expectations, limitations, and challenges, I took into account factors like the team working on multiple projects simultaneously.
Key business goals
∙Ability to drop price point
∙Remove non-essential features
∙Minimize support calls
∙Reduce development overhead
There was regular collaboration with the development team to understand the technical requirements and constraints, ensuring the redesign aligned seamlessly with the new tech stack. Additionally, we collaborated on the database structure as well as information architecture to maintain consistency and coherence across the entire system.
I delved into researching website builders such as WebFlow and Wix, and compared then with software like Dreamweaver. This process aided me in pinpointing common features and design trends in the realm of website builders, providing valuable insights into user expectations. Additionally, it allowed me to identify areas where competitors may have fallen short, enabling us to differentiate our product effectively.
I conducted guerrilla user research to keep within the budget constraints because of its flexibility and speed. This involved interviews with key stakeholders, account managers and support team members. They were expert system users with firsthand insights into customer queries and support tickets. I also did online research about industry specific marketing needs and types of roles played in organisations to get a broader knowledge and identify areas where we could differentiate ourselves.
Fully understanding the existing system was crucial because we needed to redesign elements in the new software. I documented each component, outlined necessary functions, defined core user stories, and worked through the user tasks. This process provided insights into the current system, pinpointed areas for enhancement, and guided the redesign for myself and the team.
This allowed us to focus on users with distinct roles that would benefit the team. Understanding their individual goals allowed us to align their particular needs across the system to develop a more engaging and user-centric product. Additionally, it helped us account for variations in their onboarding experiences.
With personas approved, I defined problem statements and user stories. These were crucial for team consensus on primary requirements. They were also used as a testing guideline ensuring we met their defined tasks and goals during prototyping.
We had to organise and categorize information in a way that made sense to our users. It was particularly challenging to ensure consistency across the product while retaining concepts from the existing product. I presented various configurations using sitemaps and user flows, aiming for unambiguous categories and also to establish cohesive labelling and taxonomy for a well-defined mental model.
I used paper sketching to quickly generate and explore a wide range of ideas. They included various concepts like dashboard layouts, navigation ideas, component layouts, user interactions and onboarding.
Once we had finalized a few ideas, I elaborated on them by creating wireframes and prototypes. These visuals became a common reference point during discussions, significantly minimizing the likelihood of misunderstandings.
Here's how I handled redesigning functionality for 'Page Settings':
I started by reviewing the existing interface.
Brainstormed ideas through sketches and walkthroughs.
Converted them into basic wireframes for testing.
Then incorporated the visual design create mockups.
Working closely with the Product Owner, we discussed any style preferences in the absence of branding. Efficiently identifying style and colour preferences helped us avoid prolonged deliberation. I presented ideas through high-fidelity mockups, refining them based on feedback. They were then developed into XD prototypes with design library.
An intuitive site editor with a clean design, enabling users to effortlessly add pages, sections, choose pre-designed layouts, and start customization with minimal clicks.
Letting users easily add ready-made sections to their page, preview them, and browse through sections that match their content.
Creating an easy way for users to pick a theme from pre-designed templates, tailored to their industry or preferences, and then customize it as they like.
Adding a simple click-through preview feature for users to easily swap section layouts, making customization effortless.
XD prototypes, featuring the design specs, component library and exportable elements were shared with the developers. User flows for crucial tasks, which had been highlighted in user stories, were turned into interactive prototypes, allowing developers to stepthrough the precise user journey. Animations and key interactions were also communicated in documentation for a swift handover.
We regularly tested the prototypes, closely involving key stakeholders, development team and Product Owner. This iterative approach helped us incorporate feedback throughout the design process, ensuring alignment with expectations. Since the product was still in development, testing and validation were limited to in-house users and stakeholders.
Currently, the product is still in development as the team had to prioritize other projects. However, the components that have been developed are already in use internally.
Up to now, the time-on-task and task success rates have significantly enhanced the experiences of in-house developers and designers. This improvement is attributed to both upgraded technologies and enhanced usability of the components.
This project has emphasized the significance of balancing business requirements and user needs. It also taught me the importance of taking initiative, especially when a client is very busy running their business.