From sitemapping to user interface design, TakeNote Reviews wishes to push retailer engagement into a new era. They say, “TakeNote is committed to helping retailers engage with their customers in a meaningful way. That’s why we’ve created an app that allows shoppers to send you targeted, confidential feedback relating to their shopping experience.”
The solution is a customer-facing mobile application and web based platform which uses real-time data and in depth reviews from real customers to help retailers gather candid insight into their customer base. Our aim was to provide a single user-friendly dashboard which will help customers drill-down into individual store data or get a complete overview of their entire portfolio.
Project commencement involved working closely with the client to devise an initial sitemap. This early UX stage allowed us to explore the full scope of the platform and discover any loose ends within user flows.
Ultimately this created a strong basis for the wireframing stage as it grounded the multiple journeys a user may take, and provided a reference for user scenario work. For example, a specific user type may only need to access a portion of the platform dependant on their permission levels (set by the Super Admin).
This was true for our case, with further scenarios included to ensure that all user types were considered at all stages. User types included: public user, customer and TakeNote team member.
Excluding Blog, we worked on low fidelity wireframes for all top level public pages. By indicating where the content will sit and ideas around copy, this will help us set the basis to deliver precise user interface designs.
Moving the wireframes into UI design meant introducing a consistent brand colour palette to the designs. The yellow has been introduced as the primary CTA colour and demands the most attention on the pages. By using the primary brand blue as the dominant colour across the site, this creates an immersive interface which we can shape into a professional and reliable experience.
The customer side of the platform included a range of dashboard work and a clear onboarding funnel for customers via a tiered sign-up and payment process. As new features were introduced, the scope and the sitemap of the platform expanded. This meant adapting current flows with new functionality, including generating coupons.
Moving forward with the data-driven UI approach for the majority of the platform content, we designed a range of detailed dashboards. These content-heavy dashboards enable the customer to view crucial data to deep-dive into customer demographics, manage messages and view individual store performances (far right).
Keeping the interface light and minimal where possible, we introduced key functionality and features platform-wide. This included a coupon generator which retailers could use and distribute to customers via instant messaging. We wanted to make the process of switching payments easy, but also allow store managers to access their branch data when required.
With a smaller scale sitemap for the TakeNote team member (admin), these wireframes focused on the essential functionality to maintain customer accounts, manage invoices and gathering data on overall success metrics.
The Admin side of the platform contains a more focused navigation which helps the TakeNote team employee find the data they require, schedule meetings/calls, manage employee accounts and drill down into individual account details. From the account the Admin user can view if there are any unpaid invoices, suspend accounts if required and view all Branches within an account.
Working on the design of the App has meant we were able to roll out the branding style and interface patterns established in the desktop. A friendly and approachable sign up flow has been designed to make it a frictionless experience. Key features for reviewing have been added as well as questionnaires for essential data gathering. The messaging interface has also been brought across for retailers to contact customers directly.
