Two team members review wireframe sketches together.

This is for writing stories for service portal design and development. If you work on another product…take what’s useful and disregard the rest!

Story writing is unique to each person and project, but there are things you can always account for having: navigation, headings, typography, links, buttons, widget headers and wrappers, forms, and more. Designers need different things than developers do, but writing stories for your designers doesn’t have to be difficult or mystifying.

Determine Level of Fidelity (Detail and Accuracy)

Before you even begin writing the stories for your designers, you need to identify the level of fidelity you need to cover your client’s requirements and budget.

  • Level 1 – Consult on branding editor only Best for projects that have a stringent deadline and/or tight budget of hours. Strictly an out-of-box (OOB) configuration with no customization.
  • Level 2 – Establish brand guidelines only Best for projects with a tight deadline and small budget of hours. Will utilize only OOB configurations for pages and widgets with light customization to CSS.
  • Level 3 – Create wireframes Best for projects with with a modest deadline and modest budget of hours or for projects with established branding (such as an existing client) that require only a new page or piece of functionality. Will use some OOB configurations combined with custom functionality and/or page elements. Will require your designer to create brand guidelines (if net new client) and participate/lead requirements gathering workshops. Wireframes are very simple layouts using basic shapes, grayscale colors, and limited text to convey the overall flow and layout of a page or piece of functionality. Quick to make, iterate on, and get feedback from the client.
  • Level 4 – Create mockups Best for projects with a healthy deadline, healthy budget, and/or a client who is really…discerning…or has a hard time envisioning what you’re building. Best for projects with a healthy mix of OOB configuration and overall customization. Will require your designer to participate in/lead workshops, build brand guidelines, create wireframes, and then create mockups from those wireframes.
  • Level 5 – Create prototypes Best for projects with a prodigious deadline and budget, has really complex user flows, or clients who are having The Worst time understanding what you’re trying to build. It will require the work of all the previous levels and a lot of tedious time building out interactions.

What pages to include stories for

All stories should include links to relevant resources (branding guidelines, client provided images, etc.) . The more information you can give your designer up front, the less they have to hunt you down later.

  • Theme/style guide (basic portal configurations for headings, text, links, buttons, etc.)
  • Navigation (primary and secondary navigation headers, mega menus, breadcrumb menu, footer, etc.)
  • Landing Page (especially if custom widgets or functionality are needed)
  • Record Producer (Form) Page
  • Service Catalog Page
  • Knowledge Based Article (KBA) Page
  • Other custom pages (such as a contact page, about page, etc.)

Recommendations for assigning story points

This is a STARTING POINT for baseline configuration (OOB) pages only and does not account for any custom functionality or additional requirements. Does not include UX reviews for each page or piece of functionality. For wireframes of individual pages (landing, RP, SC, KBA, etc), you can reasonably half the estimates.

  • Workshops 24 points per workshop (min 3 workshops; includes portal/branding requirements, wireframes, and mockups)
  • Branding editor guidance 8 points
  • Brand guidelines 32 points
  • Landing Page 32 points mockup (16 points for wireframe)
  • Record Producer Page 16 points mockup (8 points for wireframe)
  • Service Catalog Page 8 points mockup (4 points for wireframe)
  • KBA Page 8 points mockup (4 points for wireframe)
  • Other custom pages 8–16 points per page depending on customization and complexity (half the estimate for wireframes per custom page)

Stay tuned…

Stay tuned for the next part of this article! Let me know in the comments if you have any questions or want to see any other content!