Web Hob design project with T&T: Difference between revisions

Revision as of 15:13, 28 March 2013

This page contains information on the Web Hob design project we ran with the London-based agency Tobias & Tobias between January and March 2013.

General discussion about Web Hob happens on a dedicated mailing list: https://lists.yoctoproject.org/listinfo/webhob

Introduction

Web Hob is a web-based interface to the Yocto Project. The agency Tobias & Tobias were hired to start the interface design process, following a previous strategy engagement that established priorities and a high level plan for the Web Hob project.

The design work happened between January and March 2013 and was structured like this:

3 design iterations
2 rounds of user feedback

The outcome would be a set of static wireframes, a web-based prototype and a visual design framework.

Scope

The strategy engagement identified 8 stages for the Web Hob project. The 3-month design work would cover the first 3 stages.

Stage 1

Create the first iteration of Web Hob, a read-only application that is limited to carrying out build metrics and forensics.

Stage 2

Implement the second core capability of Web Hob for the first time - the build specification and creation process. Along with build metrics this will undergo continuous improvement throughout Web Hob's lifetime. Also implement support for multi-user operation, supporting the Team Web Hob context.

Stage 3

Improve the two core capabilities, making them more powerful and more robust. At the end of this stage these core Web Hob features should be mature enough that it is ready to be deployed on publicly available infrastructure.

Scenarios included in stages 1 to 3

Show Build Metrics
- Identify image
- Define scope of analysis
- Run analysis of image
- View analysis overview
Finding / Viewing Builds
- View list of projects/builds
Install Single-User Web Hob
- Check prerequisites
- Download/git clone Web Hob
- Install single-user option
Create build
- Set up project
- Choose hardware
- Set preferences
- Specify layer(s)
- Specify base image and packages
- Run build
Install Web Hob server
- Configure team servers
- Select team options and configure
Error messaging
- View error logs

What we really covered

The project plan turned out to be over optimistic. Of the above scenarios, the 2 installation ones (Install single-user option and Install Web Hob server) were never covered.

Final deliverables

Wireframes: File:Final wireframes candidate v1.1.pdf

Static prototypes

Web-based prototype

Visual design (Photoshop files)

Intermediate deliverables

Wireframes

File:Wireframes-Stage 1-INT-002-0.10.pdf — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)
File:Wireframes-Stage 2&3 review-INT-002-0.18.pdf — Interim wireframes incorporating Stage II & III feedback (bright blue links, buttons, etc. are clickable)

User feedback

File:User Test 1 Findings-INT-002.pdf — Summary of feedback gathered on the Stage I designs
File:User Test 2 Findings-INT-002.pdf - Summary of feedback gathered on Stage II designs

Static prototypes index

Sprint	Version	Stage	Scope	Link
1	1	I,III	Build analysis	prototype
2	1	II,III	Projects and builds	prototype
2	2	II,III	Projects and builds	prototype
2	3	II,III	Projects and builds	prototype
2	1	II,III	File browsing and multi-user	prototype
2	2	I,II,III	File browsing and build analysis	prototype
2	4	I,II,III	All scenarios	prototype
2	5	I,II,III	All scenarios	prototype
3	1	I,II,III	All scenarios	[1]

Sprint is the design sprint (or phase) during which the prototype was produced. There are 2 design sprints in this project.

Version indicates how many iterations of each prototype we created as part of the design process

Stage refers to the Web Hob stages identified by Tobias & Tobias and outlined further down this page

Scope indicates, at a high level, which scenarios are addressed by the prototype

Link to the Yocto Project git repository where the prototype is hosted

Visual design

Visual design work by Tobias & Tobias started at the beginning of March. They agreed to deliver a set of GUI components and 3 screen mockups:

My activity dashboard
Build dashboard
Package information

The thumbnails below show the visual design work as it was delivered over time. I've grouped them by page, so that it's easier to see how they evolved.

Final versions were delivered on Friday, 22nd March 2013. This is the agency's final piece of work: it doesn't mean it will be the design we will implement. Changes might come based on community feedback.

My activity dashboard

Final
22 Mar
21 Mar
8 Mar
4 Mar - light
4 Mar - dark

Build dashboard

Final
22 Mar
21 Mar
8 Mar
6 Mar
6 Mar
4 Mar - light
4 Mar- dark

Package information

Final
22 Mar
21 Mar
8 Mar

GUI controls

Final
8 Mar

Latest Files

File:Web Hob content structure.pdf — An outline of the structure of the Web Hob application
File:Multiuser support in Web Hob.pdf - Design approach to multi user workflows in Web Hob
File:Final wireframes candidate v1.1.pdf - Final wireframes for the Web Hob design project with Tobias & Tobias (January - March 2013)

Previous Versions

Prototype 1.0
WebHob Design — Archived - Design and documentation for the first Web Hob project, now superseded by the above.
Web UI 0.1: File:HOB WEB architecture overview v0 1.pdf (deprecated)

@@ Line 72: / Line 72: @@
 [http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/tree/Design%20project%202%20-%20TT/visual_design_psd Visual design (Photoshop files)]
-==== Latest Files ====
+== Intermediate deliverables ==
+=== Wireframes ===
+* [[File:Wireframes-Stage_1-INT-002-0.10.pdf]] — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)
 * [[File:Wireframes-Stage_2&3_review-INT-002-0.18.pdf]] — Interim wireframes incorporating Stage II & III feedback (bright blue links, buttons, etc. are clickable)
-* [[File:User_Test_2_Findings-INT-002.pdf]] — Summary of feedback gathered on the Stage II designs
-* [[File:Web_Hob_content_structure.pdf]] — An outline of the structure of the Web Hob application
+=== User feedback ===
-* [[File:User_Test_1_Findings-INT-002.pdf]] — Summary of feedback gathered on the Stage I designs
-* [[File:Wireframes-Stage_1-INT-002-0.10.pdf]] — Final Stage I Wireframes (bright blue links, buttons, etc. are clickable)
+* [[File:User_Test_1_Findings-INT-002.pdf]] — Summary of feedback gathered on the Stage I designs
 * [[File:User_Test_2_Findings-INT-002.pdf]] - Summary of feedback gathered on Stage II designs
-* [[File:Multiuser_support_in_Web_Hob.pdf]] - Design approach to multi user workflows in Web Hob
-* [[File:Final_wireframes_candidate_v1.1.pdf]] - Final wireframes for the Web Hob design project with Tobias & Tobias (January - March 2013)
-<br>
-[https://wiki.yoctoproject.org/wiki/Web_UI#Old_Files older files]
-==== Prototype Index ====
+=== Static prototypes index ===
 {|style="border-collapse: separate; border-spacing: 0; border-width: 1px; border-style: solid; border-color: #000; padding: 0"
@@ Line 140: / Line 140: @@
 |style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios
 |style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase2-iteration5-allscenarios/index.html prototype]
+|-
+|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|3
+|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|1
+|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|I,II,III
+|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|All scenarios
+|style="border-style: solid; border-width: 0 1px 1px 0; align: left; padding: 0 5px;"|[http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/Design%20project%202%20-%20TT/phase3_final_prototype/index.html]
 |}
@@ Line 156: / Line 162: @@
 <br />
-==== Visual design ====
+=== Visual design ===
 Visual design work by Tobias & Tobias started at the beginning of March. They agreed to deliver a set of GUI components and 3 screen mockups:
@@ Line 218: / Line 225: @@
 <br />
-=== Stage II & III ===
+==== Latest Files ====
-==== Scenarios Covered ====
-* Create Build
-** Set up Project
-** Choose Hardware
-** Set Preferences
-** Specify Layer(s)
-** Specify base image and package(s)
-** Run Build
-* Install Web Hob Server
-** Configure team servers
-** Select team options and configure
-* Error Messaging
-** View error logs
-* Refine scenarios from Stage I
+* [[File:Web_Hob_content_structure.pdf]] — An outline of the structure of the Web Hob application
+* [[File:Multiuser_support_in_Web_Hob.pdf]] - Design approach to multi user workflows in Web Hob
+* [[File:Final_wireframes_candidate_v1.1.pdf]] - Final wireframes for the Web Hob design project with Tobias & Tobias (January - March 2013)
-====Schedule ====
-* '''4 Feb 2013''' — Workshop
-* '''8 Feb''' — 1st review
-* '''12–14 Feb''' — User testing
-* '''15 Feb''' — User testing review
-* '''20 Feb''' — 2nd review
-* '''22 Feb''' — Final review
-<br>
-----
-<br>
-=== Stage I ===
-==== Scenarios Covered ====
-* Show Build Metrics (minimal)
-** Identify image (minimal)
-** Define scope of analysis (minimal)
-** Run analysis of image (minimal)
-** View analysis overview (minimal)
-* Finding/Viewing Builds (minimal)
-**View list of projects/builds (minimal)
-* Install Single-User Web Hob (minimal)
-** Check prerequisites (minimal)
-** Download/git clone Web Hob (minimal)
-** Install single-user option (minimal)
-====Schedule ====
-* '''11 Jan 2013''' — Kickoff
-* '''14 Jan''' — Workshop
-* '''18 Jan''' — 1st review
-* '''22–24 Jan''' — User testing
-* '''25 Jan''' — User testing review
-* '''30 Jan''' — 2nd review
-* '''1 Feb''' — Final review
-<br>
-===Old Files===
-* [[File:Prototype-Stage_2-File_Browsing_&_Visualisation-INT-002-0.15.pdf]] — FIle browsing & build analysis prototype for Stage II (bright blue links, buttons, etc. are clickable)
-* [[File:Wireframes-Stage_1-INT-002-0.6.pdf|Wireframes 0.7]]
-* [http://git.yoctoproject.org/cgit/cgit.cgi/yocto-webhob-design/plain/phase1-iteration1-prototype/index.html Prototype 0.2]
-<br>
-----
-<br>
 === Previous Versions ===