CleverCards is an app which allows users to select photo-personalised greeting cards from their smartphone or tablet, have them printed and delivered anywhere in the world. The app reminds users of upcoming birthdays, and showcases favourite memories shared between the card sender and recipient in photos curated for each design. Users can create and send personal greeting cards whenever and wherever it fits into their busy lives, without having to open their wallet or queue to post.
When I joined Cleverbug, my main role was to design business cards and greeting cards which could be then ordered online via the website. As the product strategy evolved, the company rebranded under CleverCards to align with the new flagship product: Personalised greeting cards. My responsabilities expanded to cover sales analytics, UI Design, and aspects of the UX Design process such as usability testing, Affinity Diagram, Ideation and prototyping.
Looking for competitor apps and evaluated them is the first step to understand how best the competitors are approaching the solution. I realised that all the applications are available on IOS but not necessarily on website or androids. None of them was integrated with Facebook wich was key for to access birthday information.I tried to identify the best user journey from those app, the features and the options that I thought can make ordering cards as enjoyable and seamless as possible.
We had few interview sessions based on competitor apps, which allowed us to get a better understanding of the context of use, the behaviour and the people pain points when using these apps. The users were asked to perform one simple order on 4 differents apps on both mobile and desktop. We took notes to underlign their thoughts, likes, dislikes and pain points to achieve the task.
.
To extract the results and understand the problem clearly, the team and myself analysed all the information gathered during the research phase and then had an Affinity Diagram session to organise findings by patterns and themes.
We ran a customer journey map to translate the research data gathered into a structured document. The customer journey map document helped us to understand what are the areas that needs to be optimised to make the experience of ordering a card the best.
I believe brainstorming is an important step in the ideation process. After having been inspired by customer challenges, needs and problems through gathering data and insights, brainstorming was the next step to generate as many ideas as possible. The main task of these sessions was to think about potentials solutions (Design, feasibility, advertisement, marketing...).
After the multiple brainstorming sessions, we first focused on defining the high level flow of the app following the main use case; sending a greeting or birthday card. We first organised the steps written in post-its, then made it more detailed while sketching the screens states on paper and finally recreated them on Sketch once we were satisfied with it.
To define the flow, sketching was the best and quickest tools to manipulate the product and validate ideas early. With a simple pen and paper, I sketched the screens flows. It's easy, cheap and catches potential problems early. A grid viewwas the best solution to display our content in this case.To sketch the "prepaid cards options" screen, I explored different ways and layouts to make sure all the required information are visible to the user and well balanced. It was also crucial for me to consider the feasibility of some features, that's why I was constantly collaborating with dev team.
The navigation on the Clevercards app is simple, but random. That's why we treated it as a consumption app.We used tabs+off canvas, so the content is considered as the primary navigation and all the secondary options were off-canvas.People are using the app to consume the content, so displaying the features and the functionalities can have a significant impact on this experience. We kept the controls big and chunky to make them percievable and appealing to the user.
Providing a visual understanding of the screens early in the project was crucial to get the team approval before the creative phase gets under way.
After wire-framing my screens, I used them as a blue print to design my high fidelity prototype. High fidelity looks like live software to usability testers, it allows them to behave more naturally during testing. In fact, it increases the chances to have more detailed feedback on certain elements of the design. High fidelity prototype is also more presentable for stakeholders and team members. They can get a clear idea of how the product will look and work before it goes live.I had the chance to work on the high fidelity prototype of the last phase of the process: the payment for the cards and the confirmation. I consider the payment part as a key step in the user journey, it's "the moment of truth", and I have to make sure there are no issues with the payment and the card inputs that causes drop-offs. Here is how I proceeded:
Running a multiple usability tests at different stages of the process was crucial in order to test or improve some features at later stage. People were interested in having a pre-payment feature for the cards. So I started sketching solutions to include the feature in the checkout process. People were interested in having a pre-payment feature for the cards. So I started sketching solutions to include the feature in the checkout process. It is also crucial to consider the feasibility of some features, that's why I was constantly collaborating with dev team.
People were interested in having a pre-payment feature for the cards. So I started sketching solutions to include the feature in the checkout process. It is also crucial to consider the feasibility of some features, that's why I was constantly collaborating with dev team.
After we agreed on including the feature in a pop out screen, I designed few variation of the "Pre-payment cards" screen, and we selected two of them, but we were hesitating which one will bring a better conversion rate. Running an A/B testing, was the best method to validate the right choice. It was important to test only one feature at a time. In this case, we tested the colours used in the buttons. The test was conducted using Mailchimp. The user was able to browse not only cards from the different categories, but also, he was able to choose the receiver from his facebook friends.
Annotated wireframes are the best way to hand over any project to the developer team. It not only eliminate misunderstandings and confusion, but also makes things easier for them by providing all details required to build the final product.
> Adding the "Buy cards in avance" feature, increased the average order size by 5% during the first month. > Using the auto-complete form allowed a smooth experience, the transaction is completed in a fraction of time, with only a fraction of effort.