Project
Own project on ideation and creativity - Making an organic food app
Tools
Pen & paper, Figma, Miro
Role
In this project I worked alone on all parts
"Design a concept (e.g., a smartphone app) that allows food-conscious people to buy organic food products for their family as well as to find recipes for organic food dishes that are healthy and family-friendly."
Process
Divergent ideation
Convergent ideation
Prototyping in Figma
Testing with users
Refining the design
Background
This project was based on the course "Creativity: Methods to Design Better Products and Services" that I took at the Interaction Design Foundation. The goal of the course was to learn how to use creative methods for developing innovative and useful solutions. At the end of the course this project was presented as a way of practicing what the course had taught.
To fully focus on the creative ideation methods the course provided user data in the form of a persona and an empathy map.
I chose to not only come up with an idea of a concept, but to further develop it into an interactive design.
Divergent ideation
The goal was to practice using divergent ideation methods to come up with lots of ideas. By using these methods to think and work laterally the design space was broadened.
Methods used
Bad ideas
Arbitrary constraints
Multiple classification
Convergent ideation
The focus of this part of the design process was to practice using some convergent ideation methods to narrow down and develop the ideas further. The goal was to come up with a final concept idea that should be novel and useful for the target group.
Methods used
Embrace opposites
Formational externalization
.jpg)
Different requirements for the final concept were written down and grouped based on categories in the concept
Outlining the content
To get an overview of which pages should be included in the app, and what elements and functions these pages should hold, the content of the concept was outlined. This helped in seeing which functions might be redundant and which ones were missing.
Defining the phases of interaction
A user journey map was created to show what main steps the user can take and what elements they can interact with. It also explained what interactions exist "backstage"and what the user feels during interaction with different parts of the concept.
.jpg)
Lo-fi prototyping
I used pen and paper to create lo-fi prototypes of each page. Several different alternatives were sketched. I then then converted these into lo-fi sketches in Figma. Here, I also iterated on the different pages and chose a few alternatives to develop further. The choice was based on the provided persona as well as standards for mobile design.
Hi-fi prototyping and testing with users
When developing the hi-fi prototype I first created a style guide with colours and text font, and a design system with components for the design. I then made two prototypes where some of the pages had alternative layouts. The prototypes had a high level of interaction. These were tested with users who were asked to perform some tasks while thinking aloud, and also to give their opinions about the layout and usability.
Focus on
Usability and desirability
Prototyping to show different interactions
Visual design
Style guide
Final design
​
Based on all input gathered from users, I iterated on the design one more time. I modified some parts and also decided which of the different alternatives to use in the final design.
In the final design the users can choose a store and see which organic products are available. They can add products to their shopping list, which also can be found in the app. The users can also find recipes with organic products and apply filters on these if they want to narrow down their choices. Furthermore, there is a possibility to mark products and recipes as your favourits to have a shortcut to finding them, and to rate recipes and share them with others.
Insights and learnings
Advancing my prototyping skills
During this project I focued on making the prototype as interactive as possible. Thus, I increased my knowledge in how to use different kinds of interactions in Figma.
Mobile UX design
Alongside this project I took a course in mobile UX design. In this project I applied principles for designing specifically for mobile. Being able to put my theoretical knowledge into practice made me learn a lot.
Being creative on your own can be hard
In this project I worked with some creative methods to come up with different ideas to build on. This was quite a different experience from the previous projects that I made, which have involved ideation in groups. The process of coming up with ideas can take longer as you can't build on each others ideas or see a problem in different ways.
This project was a part of the course "Creativity: Methods to Design Better Products and Services". I also took the course "Mobile User Experience (UX) design" in parallell. Both courses was given by The Interaction Design Foundation. At the end of both courses I earned a course certificate and also gained the "Top 10% in class" distinction.
