Client work with a request to design a prototype for businesses, to fill a form that generates basic web pages without technical knowledge. With the abilities to implement with their own customised theme and brand.
Mar 4 to Mar 22, 2019 (3 weeks)
- Adobe XD
- Zeplin
- UX Designer
- Visual Designer
- Software Developer
- Project Manager
I was the solo UX designer on this 3 week project which covered user user flow, wire-framing and prototyping.
After interviewing with stakeholders, we got to understand the context of the project.
3 B2B client personas emerged from the initial research.
Our client presented us with user stories we later used to produce user flows and iterate the designs. From small to large scale of businesses, they would require a different level of complexity to produce a microsite for their brand and products. We identified the major difference will be either it is a small business or a larger business, depends on how many equipments they have.
Select business type to generate microsite depends on its complexity.
Through discussions with the technical team and the stakeholders, we came to an agreement of two main user flows. A user will choose which business types they have when fill out the information, it then automatically generates either simpler or more complicated webpages using default microsite templates.
Use forms to collect basic company information, save data and inject to webpage templates.
I collaborated with the cross-functional team between London and North America to identify key user flows and evolve the prototype with various design iterations. Started with wireframing on pen and paper because it is quick and flexible for putting ideas together.
Designing sections in bite size to make the process of filling out a form as easy as possible.
Because our target users are not technically trained, we want the builder to be as simple and straightforward as possible. Visually we ensure to use clear language, and align text to the left so it is easier to read. It divided into sections general, product, services, and finally allowing them to preview before the pages are created.
I structure my visual designs in Sketch, suggesting how it can be built into components in the development phase. I defined design style guide and UI elements to maintain consistency in the theme.
We chose a neutral green colour theme to speak to the target audience in the agriculture industry. It complements with the shades of grey so it’s easier on the eyes. A style guide with colour palette, typography and UI elements are created and shared among the team. Developers then can utilise this information to advance front-end development. I also ensure the design files are modularised in symbol they can later develop as components.
Successfully tell product stories through prototyping.
We were asked to make a prototype within the Adobe Experience Manager platform, developing using out-of-box component. As a designer, I have to be aware of this constraint and make sure the design fit in the category. This has helped reduce customisation and limit the time our developer spends to create this prototype.
- High fidelity wireframes of microsite builder were developed into Interactive prototype.
- Because the designs were based on out-of-box components in Adobe Experience Manager, the developers can build the components more efficiently.
- Exported designs from Adobe XD to Zeplin for front-end developers to view specifications.
Before we can deliver clear messages through the prototype, we needed to speak to the stakeholders and understand the context of the project. It helps us to understand what matters to them. As a prototype we wanted to campaign product value whilst telling a good story to help potential client to imagine using it.