ICTE2002 - 3 Concept Design Ideation Process
7 Step Framework.
After reading the chosen RSPCA brief, (Animal Care and Education App) I began to ask questions about what the brief is asking to solve. I prepared to start a 7-step framework to quickly jot down ideas and understandings of the brief and/or client.
To complete this task, I wrote down all my ideas and understandings concisely on one A3 page. See below.
The three required variations for this brief solution were;
1. Context Variation: new owners looking to adopt a rescue pet
2. Aesthetic Variation: must use Photon design language, focusing heavily on illustration, iconography and vibrant colours
3. Accessibility Variation: visually impaired users (specifically low-vision), requiring higher contrast in the interface design, larger font points and iconography.
Latter to researching the target audience, their needs, wants, values and basic demographics, I created sketches for each concept and variation. The first design solution sketch is below.
Concept ONE
Sketch / Ideas for Prototype;
This concept was based off the UI design language and components (colour scheme, features, design language etc.) of the existing RSPCA website and mobile app.
Wireframe for this concept;
Final prototype design produced for the first variation;
Using hierarchy and other design principals I was able to re-form the old design into a similar yet cleaner aesthetic. Increasing the interactivity, readability and accessibility. This concept adheres to the clients brief and to what the audience needs/wants.
Concept TWO
Sketch / Ideas for Prototype;
For this concept, we had little to no restrictions and could change the entire aesthetic, as long as the required components of this variation were incorporated. This is why this design solution is my favourite of all.
Wireframe for this concept;
Final prototype design produced for the first variation;
Through the use of illustration, I was easily able to communicate features of this design. Iconography also aided in this but excelled at communicating ideas almost immediately with common symbolism used in most modern societies.
I chose a light aqua and red since they complement each other nicely. They were the colours used for highlighting important features / information. Light greys and whites for backgrounds aid in readability.
Using a westernised reading style and hierarchy, I placed the most important features and information closer to the top / where the users eye is drawn to first.
Concept THREE
Sketch / Ideas for Prototype;
This concept and context variation required me to be very calculated in feature placements, colour, texture, shortcuts and highlighting. Although this design solution is not as aesthetic as the first two, it definitely includes all necessary components asked for in the brief.
Wireframe for this concept;
Final prototype design produced for the first variation;
Using darker shades for highlighting, layered textures, larger font points, larger iconography and larger features I was able to make this design low-vision user friendly. These integrated features create a harmony and balanced aesthetic which assists with hierarchy for better understanding.
After completing these prototypes, with some help from my peers I chose to continue with the Aesthetic Variation (concept 2). To understand more about the improvements that need to be made to my design, I reviewed my scenarios.
To increase empathy towards my users I created two storyboards / user journeys for two of my three scenarios. See below.
SCENARIO 1
SCENARIO 2
With a deeper understanding for my audience needs, I began to make small changes I thought necessary to my prototype. Firstly, I decreased the opacity of the ‘Map’ screen (4) as well as the opacity of the map icon.
Wanting to dive deeper into the user’s thoughts, I conducted more user testing. Testing 5 users on this prototype, the most common suggestions that arose were;
- Clicking logo to return to previous page or home page (mentioned by 3 users).
Improvement made: included ‘back arrows’ on each page and made it so the logo takes user back to home screen
- Social media features looked strange/out of place (mentioned by 4 users). Improvement made: removed the features and replaced with ‘Blog’, ‘Terms & Conditions’, and ‘Privacy Policy’ links.
- Map icon is not equal in visual weight (mentioned by 5 users).
Improvement made: changed the map icon to be more fitting of the design language.
- Map screen was too overwhelming in colour (mentioned by 4 users).
Improvement made: Changed the entire map design for be more fitting to the entire design language.
Before making these changes, I wanted one last piece of insight into the users. So, I conducted an A/B Split Test.
The A USER’S were testing the small changes made to the previous design. See tested design below.
Before starting the B USER’S tests, I planned out what my project goals were.
Next, I came up with a hypothesis for each goal / feature being tested.
Hypothesis 1–4
1. Why do users not like the map opacity?
I think that decreasing the map opacity equals out visual weight of screens and increases readability
2. Why are users so adamant on having icons of equal weight?
I think having all icons of equal weight increasing readability and allows for users to focus on the design as a whole rather than being distracted by an over-highlighted feature
3. Why are users confused about how to get back from each screen to the previous?
I think that having a clear ‘back’ button will solve this and restrain from confusing users.
4. Why do users find the social media features placement incorrect / unnecessary?
I think the features placement feels unnatural (lack of proper alignment) and therefore users don’t like it or feel uncomfortable.
And lastly, I listed the variables being tested;
· Lower % opacity for the map screen (screen 6)
· Different icon for the map feature (screen 5)
· Having ‘back’ arrows on each page
· Removing the social media links feature
Other additions made to the design to improve overall usability;
· Login screen
· Notifications pop-up menu/list
See tested design below. (placed on darker background to see design clearer)
The A USER results were extremely similar to the first 5 User tests very small improvements were made.
The B USER results were somewhat different. The most common struggles / suggestions that were made are listed below;
1. The text on the ‘24/7 Hotline feature’ could be made more legible (bolder, diff colour) — mentioned by 2 users.
2. Pinching the map screen to zoom in/out — performed by 4 users.
3. Trying to interact with notifications — performed by 3 users.
4. Was somewhat unsure of the meaning of the ‘parks’ feature on the ‘Map’ (screen 6) — mentioned by 4 users.
Overall this design ideation journey really propelled me into my creative mind and was an informative, quick learning way to come up with design solutions to future briefs, as well as understanding the significance for user testing and empathy. I enjoyed the fast-paced learning experience, creative freedom and new found understandings. I’m looking forward to applying this design ideation journey in the near future.
