Lo-fi Wireframes

MT22

Kris Jordan

UNC Department of Computer Science

COMP 423: Foundations of Software Engineering (Spring 2025)�

Sit with your final project team!

(See course site / canvas.)

COMP 423: Foundations of Software Engineering

• RD26 - CSXL Development Environment Setup (started in class Monday) - Due Tomorrow�
• RD27 - Wireframing - Due Tomorrow�
• Sprint 0 Part A - Your Final Project's Epic Stories - Due Sunday�
• Tentative Quiz Planned for Friday 3/28 - Scope TBD (will be focused…)

Announcements

!

‼️

Deciding on a Project

Now that you've had a few nights to sleep on it and chat as a team, let's go ahead and commit to a project direction!

• If you didn't chat about it, be sure you have each other's contact information and a GroupMe/Signal/Snap/whatever group!

Spend next 3-5 minutes arriving at a consensus on which of the 3 proposed projects, or a custom project idea, you would like to move forward with. Then, one member of your team, submit the following form:

https://go.unc.edu/comp423-25s-rfp

Warm-up: Brainstorming Personas & Stories for your Epic

On a whiteboard, identify the two/three primary personas involved in your epic.

Common Personas: Sally Student, Amy Ambassador, Rhonda Root

Nuanced Personas: Students sharing different roles (e.g. TA vs Student)

On one whiteboard per persona, really try to dig in on brainstorming stories for your feature epic. Following last night's reading, write them in a format of:

"As a (persona), I (want to…), so that (something valuable to me)."

Before concerning yourself with validation criteria, focus on generating stories for each persona. Quantity better than quality at this brainstorming stage! Think big!

Take photos of your story boards for today's Gradescope attendance and because this is your starting point for Sprint 0 - Week 0. (Don't erase boards, stand them up!)

Prioritize and Refine

To have a working, minimum-viable feature, which stories would you prioritize?

These stories are the core of your feature; though most features have many ancillary and supportive stories beyond the core.

These core stories may be many, related stories that compose a journey:

• As Sally Student, I want to search for Fall courses so I can plan my schedule.
• As Sally Student, I want to add courses to my shopping cart, so I am prepared for registration.
• As Sally Student, I want to register for classes in my shopping cart, so I am taking courses relevant to my career and on track to graduate.

As a table, for each persona, identify your most 1 to 2 most valuable stories. Are they broken down far enough? (The example stories above are too big!) Refine!

Wireframes

Wireframing is a technique for visually representing ideas in user interfaces. A sequence of wireframes, with some narrative, also captures user experiences.

Wireframes have varying degrees of fidelity and detail.

• Brainstorm wireframing is intentionally lo-fi (top right).
• Mid-fidelity has all UI elements without details
• Once more confidence builds, designers often produce hi-fi wireframes from it (bottom right).

Very valuable technique and process for reasons you will read about and experience in your final project.

Wireframing Practice Exercise

1. Everyone at your table, INDIVIDUALLY and without LOOKING at each other's, spend 5 minutes wireframing your #1 top story on paper/tablet.�
2. If the story involves multiple steps, produce one lo-fi wireframe per step. Briefly jot down what is happening. Show it from start to finish.�
3. After time is up, you will present your approaches to one another and compare.�
4. How similar are they? How do they differ? Can the ideas be combined?�
5. As a table, produce a single sequence of wireframes for your top story that brings together the best of what you all identified individually.�
6. Reflect: How quickly were you able to explore UI ideas and identify concerns?

Mid-Fi Wireframes

Built using tools like Figma, Balsamiq, or even Google Slides/PowerPoint.

Add more detail (e.g. boxes for every form field needed, concrete text, etc) than lo-fi sketches, but do not aim for pixel perfection or true UI elements of Hi-Fi.

We recommend registering for and using Figma (education accounts possible!) for mid-fi prototypes expected in this phase of the project.

We'll look at Hi-Fi prototyping in the next phase.

​

Team Time for Sprint 0 - Week 0 - Write an Epic

After today, and tonight's reading on wireframes, you have everything you need to complete Sprint 0 - Week 0 Write an Epic.

Before leaving this classroom, your team should:

1. Have a form of group communication established (e.g. private slack group in CSXL slack, groupme, etc) that everyone is comfortable with and gets notifications from.
2. Have a shared Google Document (or equivalent) that everyone has edit access to.
3. Meeting plan for between now and Sunday to complete Sprint 0.
1. Suggestion: Meet once to produce draft, then again on Sunday to finalize and submit.
4. Game plan for working asynchronously and divvying/pairing where possible.

Use this time together to make as much progress as possible!