Problem Definition / Statement

The problem statement identified was:

“It can be difficult for users of smartphones to add and retrieve bookmarks. The project goal is to make this process easier for users, by identifying the major pain-points and eliminating them through an iterative redesign process, and user testing”

In the strategise phase, the two research methods chosen include one qualitative and quantitative method, a user survey, and a second qualitative method, user interviews.

For the interviews, a user interview, and also contextual interview were to be performed. Read On >>2 – Research

Data from all three forms of research were fed into the personas and empathy maps, these personas would become the voice of the user throughout the design process, allowing a better understanding of which problems to solve, and how, as seen through the eyes of the user.

The personas were to be primary users. Two distinct personas were chosen, with different needs: Read On >>3 – Personas and Empathy Maps

4 About

The task description is used to help identify the actions and cognitive processes required for a user to achieve a distinct set of goals – goals which have already identified as core functionality during earlier research phases.

4.1 Task Description 1

“A user should be able to bookmark a web page in a single click”

4.1.1 User Job Story

“When I am visiting a web page, I want to be able to bookmark it, so that I can revisit it later” Read On >>4 – Task Description

Using data sourced from earlier stages, including user surveys and interviews, task analysis, and personas, the next stage undertaken was wireframing of design concepts. This included ideation of designs, and creation of low-fidelity wireframes to be used for an early-stage interactive prototype, for user testing.

5.1 Design Ideation

Both team members, again working in parallel, agreed to produce separate designs.

The design concept by the author was based on word clouds, as popularised by blogging software, WordPress. A word cloud is “an image composed of words used in a particular text or subject, in which the size of each word indicates its frequency or importance.” (Oxforddictionaries.com 2017) Read On >>5 – Wireframes

The first interactive prototype was built using online prototyping tool, InVision, available at http://www.invisionapp.com.

Four user test participants were chosen for user testing, they were users of both iOS and Android mobile devices. Consent to record was given by each participant at the beginning of the interview. Read On >>6 – First Interactive Prototype and User Testing

7.1 Version 1

Based on feedback from user testing, functionality is added to allow users manually add tags, via a toast notification. Read On >>7 – Post-User Test Design Iteration

The final interactive prototype , see below, was created using Marvel App, available at http://www.marvelapp.com. Marvel App was chosen as it was felt the InVision’s image compression detracted from the user experience and visual quality of the app.

Figure 32 – High-Fidelity interactive prototype of a redesigned bookmarking system. Read On >>8 – Final Interactive Prototype

Section 1

Ideation (creative process). (2017). En.wikipedia.org. Retrieved 18 April 2017, from https://en.wikipedia.org/wiki/Ideation_(creative_process)

Benjamin, A Design: How to define the problem. – Prototyping: From UX to Front End. (2017). Prototyping: From UX to Front End. Retrieved 18 April 2017, from https://blog.prototypr.io/design-how-to-define-the-problem-5361cccb2fcb#.vzy05lkr7 Read On >>9 – References

Section 1

Jonson, B (2005). Design Ideation: the conceptual sketch in the digital age, Retrieved 18 April 2017, from http://www.sciencedirect.com/science/article/pii/S0142694X05000189

What is…Ideation? Retrieved November 5, 2016 from https://www.interaction-design.org/literature/article/what-is-ideation Read On >>10 – Bibliography