In the last article, Planning the development of a bespoke customer platform, we looked at the things to consider during the discovery phase of a customer platform project.
Work in collaboration with your users
As part of our designing for success approach, it is critical to involve real users when designing a customer platform. We’ve already talked about how important it is to understand your users in the first part of this series; now, you need to design workflows and an interface to remove these users’ pain points and frustrations. Aim high and delight your users with well-thought-out features and a touch of the wow factor by building trust throughout the user journey. So what are the key things we need to consider when trying to make this a reality?
How much time should I invest in User Experience?
Striking the right balance of time spent on UX exercises vs. developing, validating, and iterating is key to a successful project. There are some essential UX practices that I always recommend conducting to deliver a good user experience and keep your project within your budget and delivery constraints.
In the past few years, user experience has become a key focus for consumer-oriented businesses such as Airbnb and Uber. These companies have invested heavily in best-practice UX and gone through many iterations of their interfaces to deliver the best user journeys and experience. Granted, they have the luxury of huge budgets, but we can learn from their experiment, iterate, and tweak in small steps approach and apply some of these techniques when designing a customer platform.
What is the best way to capture user journeys?
Work through each user type, drawing out the main journeys they follow to achieve a task or reach one of the goals you are looking to fulfill. Document these journeys as flow diagrams and mind maps to capture feelings, context, and inputs/outputs. When you are happy with these, print them out on A3 and get them up on the wall.
Ideally, you would recruit a small group of actual users / potential users matching your key personas. Then, interview these users to gain insight into what they need/want to achieve, and what success looks like for each task/goal. Capture this using a whiteboard and post-it notes that can easily be moved around and updated.
What are epics, user stories, and acceptance criteria?
Larger stories are called epics and will often be broken down into smaller user stories to aid design and development. Acceptance criteria define the before and after states to define success for the user in this task.
Ensure you capture all the user stories, even ones that fall outside of your project’s current scope. Design and development teams work with user stories to understand the requirements and estimate the effort required to deliver. It is good practice to do this in a consistent form such as follows:
Story Description
As a subscriber, I want to have a profile photo so that other users can see what I look like and establish trust.
Acceptance Criteria
- User can upload a photo
- User can crop the uploaded photo
- User can preview the uploaded photo
- User can accept the uploaded photo
- User can delete the uploaded photo and upload another one
- Other users can see the picture with the user’s profile
Inputs
User photo as a JPEG, PNG, GIF
Outputs
The saved profile photo on the system
Notes
Do we need to detect the quality of uploaded photos?
Do we need to filter rude/inappropriate images?
Priority
Must-Have / Should Have / Could Have / Nice to Have
How do I develop a test plan?
Thinking about how you will verify that your platform delivers the feature/functionality required means writing some test cases early on in the design process. These should be kept simple and instructional and documented as part of a test plan that you can use throughout the design and development lifecycle. These tests will follow the acceptance criteria that you captured in your user stories.
For some help with writing your test cases check out this article.
What are the benefits of creating prototype wireframes when designing a customer platform?
There are lots of tools like Balsamiq, Sketch, Figma, and Adobe XD that will enable you to quickly create prototype wireframes for the different interface screens and states required to fulfill a user journey. Ensure that you keep your interface language simple and avoid any unnecessary design/graphic elements at this stage of the process. A prototype wireframe aims to test assumptions around how users will interact with your interface.
How can I validate prototype wireframes with users?
Recruit users that match the different personas/roles that you identified in the discovery phase. Prepare your wireframes and test plan so that you can validate the wireframes against your test plan with a split of guided and unguided sessions with your users. There are a few tools to help you with this task, such as Maze.
Designing the User Interface (UI)
Adding the design to your user interface is the next step. It’s crucial at this stage to have a robust set of brand guidelines with a well-researched colour palette, web-safe fonts, a clear tone of voice, and clarity on the types of imagery that can be used. Depending on your wireframes’ fidelity, this may be a case of applying brand and styling to an already formalised UI, or it could be a bigger job. It’s crucial at this stage to get the basics right, designing for consistency and usability and not just aesthetics. Ultimately the design needs to do just enough to delight users without getting in the way of the actions they will be carrying out through the UI.
Should I create a Design System when designing a customer platform?
Design systems have become very popular in the past few years. They allow teams of designers and developers to add new items, layouts, and pages/screens to the UI of a website or application by following a set of guidelines and by using pre-designed elements and components.
One criticism of design systems is that they constrain creativity, and, in certain circumstances, this can be true. However, I argue that you should develop a design system for a customer portal/platform that will be regularly updated with new features.
Is it ok to use an existing CSS framework?
Absolutely! There are some excellent frameworks out there that have already built up a library of standard UI components and layouts ready for you to apply our brand. Probably the most well-known of these is Bootstrap, but there are many others to consider too. One of the significant advantages of this approach is the time saved by converting your design into tested browser code.
In the next article, Developing a bespoke customer platform or application I look at key things to consider during your platform’s development phase. We will cover tech-stacks, picking the right development partner, and testing and launch strategies.
