Wireframes, taken from a bookmark redesign project, show eight stages of an iterative design process, from initial concept to finished high-fidelity, interactive prototype.
The wireframes were created using Adobe Illustrator, and the interactive prototype was created using Marvel App.
Add the Day is an app I designed for Android. It is designed to count down to any event the user chooses, and allows the user to add a location for that event, the weather in that location, and background images.
I produced all wireframes and visual assets, and the Android XML layouts.
With Add the Day, the background image can either be a single image taken from the users’ gallery, a slideshow of images taken from their gallery, or a webcam image from the event location. The background slideshow, and the refresh rate of the webcam are both user-configurable, and the background is animated using a Ken Burns effect (a type of panning and zooming effect used on still images), to give it a live feel.
Events can be viewed in full-screen, in an app view, or as home screen widgets – the choice of widgets include:
You can customise your event view to suit the event type. Local weather for sports events and holidays, and you can add local webcams as event backgrounds for a live view.
You can see the current weather conditions, and a five day forecast, in the event location on your app view, and on your event widgets.
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
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
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
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 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
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.
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 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.
“A user should be able to bookmark a web page in a single click”
“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
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
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
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”