07 | User Experience Design
Design for Good: Marabou
Project Brief
Based on the insights gained from the branding and identity project in which the brand Marabou was developed, this project required students to develop a UX/UI outcome for an e-commerce website or mobile application for the brand. An e-commerce platform presents unique challenges for UX/UI design, as it requires designers to solve problems, educate, engage, and inform users all at once. This process involved creating a complex ecosystem of journeys and systems, which can be overwhelming to solve in the scope of a single project. Therefore, this project focused on fleshing out the core function of the e-commerce platform and concentrated on a specific user journey. As part of this project, students were required to conduct thorough research and become familiar with the intricacies of UX/UI design, including user journey mapping, design systems, wireframing/prototyping, user testing, and the overall design process for screens. These skills are crucial for creating an e-commerce platform that is intuitive, engaging, and easy to use for customers.
Deliverables
1. System functionality with focus on a specific journey
2. A well considered and appropriate concept that compliments the CI project
3. Wireframes and layout structure of the site/app
4. Final digital execution
Design Strategy
Our app is aimed at regular Marabou customers who shop frequently with us and want an efficient navigation system. The route we will be focusing on is creating a snack box for the customer that is specific to their nutritional needs. Ultimately, through this process we aim to help customers reach their nutritional goals and create a platform where they can track their progress while being able to easily purchase Marabou products. The purpose of the app is to help combat the problem of food waste by allowing people to purchase snacks which we make from food wastage that is highly nutritious. The app also offers functions such as a delivery service that customers can use as well as large industries to drop off their food wastage at our offices or allocated pickup points. Therefore the app would be helpful in tracking that progress, making it fast and rewarding.
Redo
The final screens and style guide were reconsidered and executed. The following are the changes that were made to help improve the UX/UI design of the app:
Home screen
- A carousel was added featuring some of the products instead of having it as a text button.
- Buttons were added with some of the key features of the app at the top of the home screen for better and easier navigation.
- The 'create' button was left on the home screen as this is a main feature in the app.
Button design
- The primary and secondary buttons were made longer in the app for better access and ease of navigation.
- Added a white holding shape to the dip buttons to keep it consistent with other buttons in the app and increased the size for better access.
Other changes
- The 'yes' button was moved above the 'no' button on the screen featuring question 3 in the questionnaire.
- The back button was moved to the top in the navigation tab as it was difficult to find previously in the bottom corner.
- The tick boxes were made the same throughout the app, this change was made on screens question 7 of the questionnaire and the scavenger box reveal screen.
- Question 5 in the questionnaire is a pie chart, the initial option made users confused so this was therefore a better solution to show the percentages of the different food groups.
- The food allergen question was taken out as it felt repetitive and similar to the food intolerances question.
Initial Route Ideas
User Persona
Visual Inspiration
The mood board captures simple elements mixed with detailed illustrations. The focus was on how the detailed illustrations are used subtly and softly with the interface design elements. The use of a simple, bold colour palette is also what this mood board showcases, the colour palette combined with the illustrations does not become too complex and confusing for the user to navigate through the app.
User Journey
Initial Wireframes
Above are some initial wireframe options of the selected user journey.
Some basic wireframes explored for some screens for the redo.
Wireframe Development
User Testing Feedback
Design System
Product Design
This is some of the product design that was needed to compliment the final screens.
Final Screens
