The Project
Amego was a web based and mobile based payments app, designed to work like a digital wallet but for customers and businesses. Managing payments as well as helping users to monitor expenses and future payments. As a new concept, this would involve several UX artifacts as well as brand design and UI work.
Stakeholder Interviews, Contextual Enquiry and Surveys
I interviewed the stakeholders to understand what they were trying to achieve. Asking essential questions re:
- Project vision
- Who are your users?
- Value proposition (what problems does this product solve?)
- Competition, customers and user goals, etc..
Since the company already have a product in the same business sector it was easy to put together a survey to gather quantitative data and understand how existing customers use competing products – to better understand their habits and frustrations.
The survey analysis would produce statistics to better understand what types of features and functionalities they require to richly improve the user experience.
Competitor Analysis
I conducted competitor analysis to better understand the market and each product’s offerings. I focused on identifying their positioning and differentiators and I compared their features to my own list of requirements for a minimum viable product (MVP).
What I discovered was great potential for our product to fill a hole made by competitors – due to flaws in various areas of their existing online products.
Personas
I created personas for each user tier envisioned for my product. This was a good way to combine my qualitative and quantitative research and added a layer of real-world consideration to my design. Each persona was representative of a ‘typical’ user.
Click image to zoom in
User Flows and Sitemaps
The user flows and sitemaps were created with the BA – showing more in terms of business processes. From the customer / user journey , to the flow of funds back end process. I generally prefer to show more in terms of the customers’ journey but every projects requirements are different.
Brand Identity:
Product Name, Logo and Style Guide
Although we had an existing logo identity that the client was attached to – i did some styleguide development work to consider the brand identity being used in all mediums. Sometime we don’t always have the luxury of creating new logos but working with existing ones!
Low-Fidelity Wireframes
I created low-fidelity wireframes for the product page and application using Balsamiq and Powerpoint. This was a quick and effective way to organise the site content and page layout.
High-Fidelity Wireframes
To show more detail, I created high-fidelity mockups using Adobe Illustrator and powerpoint. I experimented with different layouts and adhered to UX best practices and common UI patterns.
Clickable Prototype
For various reasons we were able to utilise an existing Bootstrap theme and basically re-skin it to adopt the look and feel based on the structure of the lo-fi / hi-fi wireframes. We built a basic prototype to convey the user flow with the customer in mind.
Visual Design (Mockups)
All high-fidelity mockups were created with a combination of photoshop and Illustrator. Although a high level prototype was built based on these mockups they still visually conveyed a close look and feel that was invisioned for the MVP.
