![bag@2x](https://ucmein3d.com/wp-content/uploads/2021/10/bag@2x-1.png)
Sweet Organics
Organic Confectionary and Delivery Service
case study
Overview
For my last student project, we could choose between a money saving app or an online store, which was my choice. The task included to build a brand from scratch with all the necessary components included.
Requirements
The deliverables for this project were broken down into the following tasks:
- Brand Guidelines
- User Flow Diagram
- Wireframes (low-, mid-, and high-delity)
- Protoype and User Testing
- User Interface design
- Desktop design
- Mock-ups
![brand@3x](https://ucmein3d.com/wp-content/uploads/2021/10/brand@3x-2.png)
Building a Cohesive Brand
The first task was to develop a set of Brand Guidelines for our chosen project. These guidelines should include the guiding principles of our brand, logo, colours, typography, image style and writing style.
![aboutso@3x](https://ucmein3d.com/wp-content/uploads/2021/10/aboutso@3x.png)
1. GUIDING PRINCIPLES
![logo@3x](https://ucmein3d.com/wp-content/uploads/2021/10/logo@3x.png)
3. LOGO
![images](https://ucmein3d.com/wp-content/uploads/2021/10/images.png)
5. IMAGE STYLE
User Flow Diagram & User Stories
in the next step we chose 3 user stories. Based on these stories we created a user flow diagam to display the path the user would take to complete certain tasks in the app.
![userstories@3x](https://ucmein3d.com/wp-content/uploads/2021/10/userstories@3x.png)
Creating Wireframes
From the user flow diagram, i choose one user flow to create low-fidelity, mid-wireframes and hi-fidelitiy wirefames. The hi-fidelity wireframes would be later used to create a prototype for user testing.
![lowfi@3x](https://ucmein3d.com/wp-content/uploads/2021/10/lowfi@3x-1.png)
![midfi@3x](https://ucmein3d.com/wp-content/uploads/2021/10/midfi@3x.png)
Prototype and User Testing
After creating the hi-fidelity wireframes, i created a prototype in invision to gather feedback from potential users. I used the insights of the tester to apply some changes, before finalizing the app.
![prototype@3x](https://ucmein3d.com/wp-content/uploads/2021/10/prototype@3x-1.png)
Desktop Version and Mockups
The last step was to create mockups and responsive websites from my designs. After finishing the task, i made a presentation with all components.
![final@2x](https://ucmein3d.com/wp-content/uploads/2021/10/final@2x.png)