169

--

Web-based invitations

Ok, so it's not an original idea but it can be executed a lot better! ;)

Project Outlines

1. Goals What does success look like? For stakeholders, users, and you.

STAKEHOLDERS:

My project becomes the #1 way to invite guests to events.

USERS:

Users receive all the details of the events that they’re attending (or have been invited to), in an easy to use format.

YOU:

I will have designed a digital product that provides a green, low-cost alternative to traditional paper invitations.

As opposed to previous “e-greeting” or “e-vites”, my product will be elegant and beautifully designed.

Site Map:

Brand Guidelines:

1. What are your best features to emphasize?

Elegant and easy to use. “Green” alternative. Convenient.

2. Where does your brand fall on the personality scale?

3. If you had a celebrity representative, who might it be? Why?

Audrey Hepburn

Without a doubt, Audrey Hepburn! She was elegant, classy, fun (without being loud and obnoxious), had great style and still remained down-to-earth.

4. What visual language could express your personality?

This is a difficult one because I can only describe how I would like to brand the elements associated with my business to appear. I’m basically just describing the sign-in landing page, as the rest would be customized to the client.

Colour: Charcoal and white (for simplicity and minimalism). Also pastel shades of greens, pinks, blues and yellows. Those colours are soft, relaxed and uncomplicated.

Typography: I love anything that is clean and relatively simple (although I’m still a sucker for swashes!). I’m really drawn to typefaces like open sans but I also love typefaces like Filmotype Honey (http://www.fontshop.com/fonts/downloads/filmotype/filmotype_honey_ot/).

General Style Notes: I’d like the brand related styling to be clean, simple and elegant. I’d like to use some translucent elements to promote a feeling of lightness.

5. What interaction methods could convey your best qualities?

Maybe a single, simple animation of the logo on the sign in screen just to convey elegance and some modernity. Simple, clear, instructions on what to do next like, “Type passkey into the field below, and press “enter”.” The rest would really depend on the client. For example if the client was a couple getting married, a story could be used to establish a romantic and happy vibe as the user views the rest of the invitation.

Main users:

User #1: aged 20-40 who is comfortable with technology (maybe owns a smart phone, reads blogs or news online, has been using email forever)

User #2: aged 60+ who may be comfortable with limited aspects of technology (may use email but maybe not comfortable with all aspects of it, can use YouTube but may need occassional assistance, does not own a smartphone or does but isn't comfortable doing more than calling or texting on it)

Goals:

User #1: wants to view the website/invitation, find out where the event will be held, wants to RSVP through the site. May return to website for info about event (location, time, etc.)

User #2: wants to feel at ease with this format of invitation, wants to acquire all the info + RSVP without feeling stupid or frustrated

Steps to reach goal:

User #1:

1. Receives email to check out web invitation.

2. Reads the email and clicks the link.

3. Sees that a pass key is required to log in.

4. Goes back to email to copy (or write down) the pass key.

5. Clicks on browser again to go back to website.

6. Clicks inside the field and pastes (or types) the pass key, and clicks enter.

7. Website loads and they scroll down the web page to the read and view the content.

8. Views the links at the bottom of the site.

9. Clicks on event location information to view where the event will be held (using Google Maps).

10. The user will most likely not RSVP at this moment in time. They will probably have to talk to a partner or a potential date, or they may have to check their schedule to determine if they can attend.

11. User may come back a couple days later. They will most likely open their email to get the link and pass key, going through steps 2 - 8 again.

12. This time the user will click on the RSVP link and enter the appropriate information.

13. They'll click send and see a message telling them that their RSVP has been sent.

14. User may visit the site again before wedding to acquire information about the event.

User #2:

1. User receives email, most likely on their desktop or laptop.

2. Reads the email and clicks on the link.

3. Sees that they have to enter a pass key and returns to the email.

4. Sees the pass key in the email and writes it down on a piece of paper.

5. Returns to website and clicks inside the pass key field.

6. Types in the pass key. May know to click "enter", or they may read the instructions on that page again.

7. Will view the website and read any text on page. Will scroll down if necessary.

8. Will look for more information. See the link at the bottom and click on it.

9. Will read the information. Will click "back" to return back to main page.

10. May do steps 9 and 10 to read any other pages.

11. Will read the RSVP page and will most likely leave site, with intent to return to RSVP once they have checked their schedules.

12. Will most likely return to website through email and go through steps 2 - 7 again.

13. Will look for RSVP link to RSVP.

14. Clicks on link and looks for instruction on what to do.

15. Fills out fields with appropriate information.

16. May know to click enter, or re-read instructions on page to submit their RSVP.

17. Will see a notification on the screen stating that their RSVP was sent.

18. May opt at this point to print any relevant information, rather than revisiting the website.

Page Requirements:

Sign-in page:

User #1:

Obvious place to enter the passkey, with prior knowledge that they will need the passkey to view the invitation (so they won’t need to flip between windows).

Mobile specific:

Large field to enter passkey. Reduced need for “pretty background”.

Tablet specific:

Same as mobile.

User #2:

Simple instruction to enter the passkey into the field and click enter. Clear, plain language with all necessary knowledge front and center.

If an error occurs, more instruction must be provided in clear, concise language.

Mobile specific and tablet specific needs:

Both the same as user #1, if user #2 is comfortable using mobile devices.

Landing page:

User #1:

Must know immediately what this is about (so they can decide if they have time to view the whole site).

Clear option at the bottom for more information.

Mobile specific:

Single column layout, with larger text.

Small version of navigation menu at bottom (maybe a button that expands the navigation when clicked).

Background (behind the “invitation”) is not important.

Tablet specific:

Scaled down version of desktop site, with maybe slightly larger text (a bit easier to read on a tablet).

Navigation menu might be two-column, here.

User #2:

Same as user #1.

RSVP page:

User #1:

Must know whether or not they can bring a guest.

Must be able to view any options, such as meal choices, without having to submit at that time.

Mobile and tablet specific:

Same as sign-in page.

User #2:

Same as user #1.

Must receive a clear message that they’ve sent their RSVP once they click “send” (or “enter” or “submit”).

Must have clear instruction about “what’s next” (ie: a link to a PDF of info that they can just print, so they don’t have to return to the website).

May require the ability to return to just this page and enter passkey from the original email (or an additional email that is sent once the site has been viewed).

Other pages:

User #1:

Clear information presented in a neat and concise manner.

Abilty to return to main page, or link to other pages.

Printable info, if required.

Mobile and tablet specific:

Same as landing page.

User #2:

Same as user #1.

Relevant info must be front and center.

Contextual Stories:

Mobile:

Goals:

Quick glance at invitation just to have a peek.

  1. Read email on phone.

  2. Click link in email.

  3. Link opens in browser, asking for passkey.

  4. Go back to email to get passkey (copy + paste if you’re good with that stuff, or memorize it, temporarily).

  5. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  6. Quickly look at invitation.

  7. Maybe click on one or two of the other links.

  8. Decide to look at invitation in greater detail later, on a larger screen.

Double checking directions to event, or event time and/or date.

  1. Open email app on phone.

  2. Find email with link (copying or memorizing passkey first this time).

  3. Click link.

  4. Link opens in browser, asking for passkey.

  5. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  6. Quickly scroll all the way to the bottom to click on the relevant link.

  7. Read the info that you were looking for.

  8. Close the browser and go on about your business!

Tablet:

Goals:

Reading the “story” or text portion of invitation.

  1. Read email on phone.

  2. Click link in email.

  3. Link opens in browser, asking for passkey.

  4. Go back to email to get passkey (copy + paste if you’re good with that stuff, or memorize it, temporarily).

  5. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  6. Take your time, reading all the information, maybe lingering a bit on any art or images contained in the invitation.

  7. Click on another link on the page and repeat step 6.

  8. Maybe repeat step 7.

  9. Close the browser app.

Looking at “other info” or directions.

  1. Read email on phone.

  2. Click link in email.

  3. Link opens in browser, asking for passkey.

  4. Go back to email to get passkey (copy + paste if you’re good with that stuff, or memorize it, temporarily).

  5. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  6. Skim the content of the invitation until you see the links at the bottom of the page.

  7. Click on the relevant link and read the info.

  8. Close the browser app.

Desktop:

Goals:

RSVPing for event.

  1. Open email in browser (or in an application).

  2. Read the email.

  3. Click link in email.

  4. Link opens in browser, asking for passkey.

  5. Go back to email to get passkey (copy + paste if you’re good with that stuff, or memorize it, temporarily).

  6. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  7. Quickly scroll all the way to the bottom to click on the RSVP link.

  8. Enter relevant information.

  9. Click submit.

  10. See notification that your RSVP has been submitted.

  11. Close the browser tab or window.

Having a good look over all the information to plan attendance (or to not attend).

  1. Open email in browser (or in an application).

  2. Read the email.

  3. Click link in email.

  4. Link opens in browser, asking for passkey.

  5. Go back to email to get passkey (copy + paste if you’re good with that stuff, or memorize it, temporarily).

  6. Enter passkey (or “paste”) into field. Click “go” or “enter”.

  7. Take your time, reading all the information.

  8. Click on another link on the page and repeat step 6.

  9. Maybe repeat step 7.

  10. Close the browser tab or window.

Wireframes

(I'm sorry in advance that there are soooo many!)

Desktop version:

Mobile version:

Tablet version:

Comments

Please sign in or sign up to comment.