Teaser – Various sections of the user flow for specific functions
Process
First, I considered which steps were necessary to achieve specific goals. To do this, I delved deeply into user flows and analyzed the individual steps in order to sketch the basic structure of the mobile application based on this. It’s important to mention that I consciously decided against integrating community features at the outset. My focus was on creating a system that allows for easy and clear storage and retrieval of content – and that alone is complex enough.
In the next step, I sketched rough layouts to determine the placement of elements as well as the interactive features required. Additionally, I created a color palette to clearly and cohesively represent the layout and interactions through the use of color.
Here you can see different versions of a user flow. They helped me a lot to identify the necessary features and services and enabled me to think through different usage scenarios in order to design the structure and interactions in a meaningful way.
With the help of sketches, I developed initial ideas for the components in order to find out what I needed to pay attention to and to gain initial assessments of feasibility.
In addition, you can see digital sketches in which I have roughly arranged the individual pages and components in a layout.
Result
Finally, I developed a concept within Figma. In the process, I began creating a design system that includes styles, variables, and tokens. This allowed me to efficiently standardize the UI elements. An interesting aspect was also the option to offer different modes to enable user personalization, which had to be taken into account in the design.
Ultimately, I created an interactive prototype based on typical user scenarios.
| Concept development | FigJam |
| UI Design | Figma Design |
Finally, you will see a compilation of all the features I have implemented in Figma so far. Through this project, I have gotten to know Figma and its capabilities even better and applied them in a practical way. I am convinced that this experience will also be of great benefit to me in future projects.
Note: As part of my process, I also used real images to give a realistic idea of what the application might look like. For legal reasons, however, you will not see any screenshots or videos here, as I mainly used images from the internet.
Note: As part of my process, I also used real images to give a realistic idea of what the application might look like. For legal reasons, however, you will not see any screenshots or videos here, as I mainly used images from the internet.
If you are interested in seeing the prototype in Figma, just get in touch with me.
Return to top
Don't be sad—the current projects are just the beginning; there's much more to come.
