01 Company Overview
Magna Moments is a practical and intuitive online service which allows users to create their own greeting cards. Company is innovating on tradition and redefining the way you see an online greeting card. Beautiful design meets useful gift inside each card. Magna Moments has put together the following vision for their new inline product:
A new online tool that helps customers quickly and easily create their greeting cards and include inside a QR-Code of an Ebook.
Our distinctive, customizable designs, great library and powerful online tools make it easy to communicate expressively on any occasion - from everyday correspondence to milestone life events.
02 Business Requirements
There are numerous of online services which users can use to create and send their greeting card. We believe that greeting card market can evolve and offer people something new. Our solution is to make the creation process of cards faster and make them more valuable as a gift. Our service should solve the following:
• Offer users an access to all available greeting card`s designs within a simple interface
• Offer users the choise between building their own cards or selecting a predifined one
• Offer users the choise between building their own cards or selecting a predifined one
• Explain the idea behind the ability of adding a gift
• Display all available books from Magna`s library
• Offer an easy to use online builder
• Display all available books from Magna`s library
• Offer an easy to use online builder
• Help users on every step of greeting card creation
Smoth mobile version of the service is definitely needed. Busy workers use ofthen their mobile phones in their everyday life. They can be in the workplace, during a meeting, on the way to/from office, be with clients, but mobile phone is always at hand. Given the above, the product can be used for all scenarios (home, office, on the go).
03 User Research
We've developed only a primary persona based on the results of our discovery stage. A persona which assumes the qualities of the target group we have:
Scenario of use to describe the typical experience that a customer like Alice will have while creating a greeting card:
While at work on Tuesday, Alice`s mother called Alice and asked if she saw Rachel`s last post on facebook. Rachel is one of Alice`s old friends, from Florida, who just took, for the first time, a job in a big compay. Alice decided to congratulate and maybe give her a useful present. She has a full day ahead, an inportant projects to be presented in a couple of days, so she has not time to think a lot over the gift or to search for something on internet. She heard about Magna Moments service from her co-worker and decided to give it a try. While taking a 5 min break, she hops onto the Magna Moments product to check it.
Alice browses various occasion categories to see what’s available. She finds couple of them which fits her need and decided to select an Encouragement Card. Once selected this category, she can see in front of her tens of different designs related to this occasion. Once designs is selected she jumps into builder to customize the card. She see that she can add different books to her card as a gift, with 5-6 books suggested from Magna Moments. She decides to go with one of the suggestions "The Autobiography of Benjamin Franklin", a great book about a great leader. Next step is an option to add a personal message to the greeting card, so Alice writes fast a couple of warm words and after an overview of the resulted greeting card, she moves directly to the checkout page.
Alice browses various occasion categories to see what’s available. She finds couple of them which fits her need and decided to select an Encouragement Card. Once selected this category, she can see in front of her tens of different designs related to this occasion. Once designs is selected she jumps into builder to customize the card. She see that she can add different books to her card as a gift, with 5-6 books suggested from Magna Moments. She decides to go with one of the suggestions "The Autobiography of Benjamin Franklin", a great book about a great leader. Next step is an option to add a personal message to the greeting card, so Alice writes fast a couple of warm words and after an overview of the resulted greeting card, she moves directly to the checkout page.
She doesn not need to have an account inside Magna Moments in order to use it, it asks just for an email of the sender in order to send on it the transaction confirmation. Alice continues with the checkout flow, enters receiver`s information, shipping address and a payment method. She reviews her purchase details, orders, and receives a confirmation with the delivery time and receipt.
In few days, Rachel checks her post and sees that she received a nive greeting card with gift inside. She calls Alice and tells her that it is a really valuable gift, because she was thinking before about reading exactly this book and that it was really pleasant surprise . Alice thinks to herself, “What a great experience!”
04 User Flow
Here, the following diagram shows the Magna Moments flow where a user can select one of the available predifined cards or create his own one. Users will also get the possibility of adding a personal message even to a predifined card. A fast and easy flow makes user spend just 5-10 min, in order to arrive to the checkout page.
05 Wireframes and User Journey
I.
User Tasks
Arrives to landing page, Finds a greeting card to buy.
Requirements
A landing page has to be a start point for browsing and navigation through content, finding a description of the idea behind 2 in 1 cards,findind the list of top predifined designs, list of new tittle in Magna`s library and ocassion page for browsing within particular section. Search results page to provide suitable set of cards/books for user's searches.
Pages to design
Homepage. How it works, Predifined designs, New Tittles, Ocassions page. Search results page.
How the design could achieve these requirements
The landing page design will have clear top-level navigation with filters by occasions, will contain a 3d model of a greeting card with description for the main sections, browsable predifined cards with collections of products that the user might like to select. The page will allow user to get access directly to shopping cart. Search page allows user easily search the entire inventory of cards and books.
Features, actions and content that each page will contain
High-level navigation and sub-categories, user's shopping lists, list of predifined cards (potentially based on popularity). When user just started with entering of search query it suggests latest and popular searches. Search can be done by entering occasion name, book name, where the result is grouped by designs,predifined cards and books.
II.
User Tasks
Adds items to cart.
User Tasks
Adds items to cart.
Requirements
Landing page, predifined designs page and fast preview pop up which allows to add a unit of product to shopping cart.
Pages to design
Predifined designs page with all available card options.Fast preview pop up - which will allow users to preview the design and the book included. Cart pop up.
How the design could achieve these requirements
Fast preview pop up should have clear structure of the content and provide big images of the card and book included, with call to action to add the product to cart and send it. Cart pop up must be clean and easy to use in order to allow in one click to move to the checkout page.
Features, actions and content that each page will contain
Fast preview pop up should contain following elements: card title, hight quality photo of the card design and the book, price,name and a short description of the book included, UI control that allow the user to add predifined card to shopping cart. Open cart should contain the cards added earlier or an inscription "Your cart is empty" if none of them were added before. A small image, name, price, book included inside the card and a cal to action which will lead users to checkout page.
II.
User Tasks
Create a personal greeting card
User Tasks
Create a personal greeting card
Requirements
Landing page,fast preview pop up, builder.
Pages to design
Builder - greeting card creation process will be divided in 4 steps(1.Design selection, 2. Book selection, 3. Personal message,4.Preview).
How the design could achieve these requirements
Most important is to make users feel comfortable inside the builder and create an easy to use environment. Screen should be divided in 2 section, where one will be dedicated to lists and settings and other for preview of the actual step. Beside that filters and suggestiond must be visible and accessed with no effort.
Features, actions and content that each page will contain
Main page and occasion page from the landing must have a call to action which will allow them to move inside the builder. Fast preview pop up will have a call to action with a suggestion of adding a personal message to predifined card and the price for this service. Design selection page must have a preview area and a list of all available designs. On top should be situated an easy to use filter for occasions. Book selection page will have a list of suggested and all available books from Magna Moments library and a preview area with the description, image and name of the book. Top page will contain a filter for genres and authors. Add message page will contain an interactive text area, whic must be adjustable. Other part of the screen will be dedicated for suggested quotes, text formatting options and text color. Last builder page is a preview page which will have a high quality images of selected design, book, added text and a call to action for sending.
