Landmetzgerei Apeltauer
Background
The traditional butchery Apeltauer is located in a small suburb of Alfdorf. In the course of the restrictions caused by the corona pandemic, Mr. Apeltauer decided to offer his products online. For this we created a new website, integrated a webshop and brought it directly to the smartphone with a native app.
Challenge
The task at hand was to transform a complex store into an intuitive and user-friendly mobile application that seamlessly aligns with the brand's overall design and original branding.
Goals
- create a new homepage with integrated shop based on Typo3
- take and post process professional looking, high quality pictures of the whole product line
- break down and analyze the web based shop and transfer it into an app
-create a harmonious product line of web presence and apps with focus on traditional crafts and sales
Scope
Research, UI Design, UX Design, Architecture, Development, Photography
Tools
Adobe Illustrator, Adobe Photoshop, Adobe XD
Canon 2000D with Canon EF 50mm f1.8
Role
UX Design, UI Design, Photography, Front-end (Css), Support, Leaddesign
Duration
16 weeks
First Steps - Building A Website
Initial Look And Feel
Drawing inspiration from the brand's visual identity, I developed a unified website that fully captured its essence, while ensuring that it fulfilled the client's content requirements. As base we used a clean install of the latest version of Typo3 along with the lastest version of the shop system. I employed both HTML and CSS to tailor the webpage to the specific visual concept that I envisioned.
Photography
After completing the website, I visited the client's store and photographed the entire product line using natural lighting. This was important as the products were temperature-sensitive, being meat, and we wanted to avoid any spoilage due to excessive heat caused by bright studio lights. The images were then post-processed to address any differences in lighting that may have arisen.
Creating The App
Analysis and Card Sorting
When creating the app, the client wanted it to be more than just a copy of the website. Instead, they asked to make it a direct entry point to the shop with all the key features easily accessible. To figure out how to structure the app, I catalogued and grouped the website's contents using post-it notes. Then, I sorted everything by importance to make sure it was easy to use. Some elements were omitted for the app, as they were only useable on the website. This way I was able to develop a cohesive information architecture that created an intuitive and user-friendly experience for the app's users.
Wireframes
To verify my findings, I created some wireframes, making sure to move quickly as to not lose focus in details. Armed with these visual aids, I was able to test the app's information architecture and functionality in a more intuitive way.
After several iterations, I was satisfied with the wireframes and proceeded to create a quick siplified click dummy in Figma. After further testing and ensuring that the app was both user-friendly and easy to understand, I utilized Adobe Illustrator to create the main design. This allowed for seamless integration with Adobe Photoshop, the incorporation of icons, and the development of high-quality interfaces.
Styleguide
Font
In order to maintain a clean and simple aesthetic, we selected a font that is known for its stability and legibility. Segoe UI, with its balanced x-height and clean lines, proved to be a suitable choice. This font is widely recognized for its versatility and readability across various digital and print platforms, making it a popular choice among designers. By utilizing Segoe UI, we ensured that our messaging remained clear and easily accessible to our audience.
Colors
This project incorporates both light and dark backgrounds, necessitating the creation of two primary highlight colors that harmonize with the overarching branding theme. These colors are expertly curated to ensure a seamless integration with a carefully selected range of gray tones. In addition, a discerning shade of red has been added as an alert color to signify potential issues.
Icons
In order to maintain a cohesive visual identity, I designed a series of geometric and well-balanced icons for the navigation bar and buttons that align with the geometric aesthetic of the logo. These icons, carefully crafted to achieve a harmonious balance of form and function, provide an elegant touch to the user interface.
Buttons and Input Fields
I implemented rounded corners in all input fields and buttons to create a modern and cohesive user interface. This design strategy not only enhances the interface's aesthetic appeal but also improves its usability, reflecting our commitment to creating an engaging and user-friendly experience.
flow
Final design
