Process Modelling/Flow Diagram
Using a website called draw.io I was able to create the flow diagram shown above. This visual aid maps out the process of a user making a sandwich. It starts at the left hand side with a yellow circle. The directional arrows show which way the users decision will take them. The blue rectangles are action statements and and green diamonds are decisions. I have included 3 decisions points, one of which is a yes/no query.
Blog Wireframe
Above, I have created a wireframe of the front page of my current blog with a web-based service called MockFlow. I decided to use elements in a hand drawn style and to not include real text in the blog posts to give it more of a prototype ‘design phase’ feel.
Alternate Blog Wireframe
Lastly, I designed a front page for how I would ideally like my blog to look. There are a lot of significant changes that have been made which are listed top-to-bottom below:
- Search bar placed near the top of the page for ease of access
- Featured images of popular blog posts
- Menu slider
- Section divider
- Click ‘Read More’ to take the user to the full post
- Recent blog posts (centralised)
- Static calendar at the bottom left of every page with search bar above
- Static links/pagination at the bottom of the page
I like this as a potential layout for my blog page because (in theory) it includes just enough information and is easy to navigate. I would use a simple, clean colour scheme, much like my current blog, to draw more attention to the content.
Conclusion
In conclusion this was an interesting task and I learnt a lot about the basics of how to start planning a project. These skills can be transferred between little and large projects and are at the core of design functionality. My process model of how to make a sandwich was kept very simple, but there are a lot of potentially more complex ways to map it out. This will no doubt be said for future projects, however a scope must be put in place as to not go off on a tangent. The scope for my project was to only include 3 decision points.
Bibliography
Draw.io. (2017). Flowchart Maker & Online Diagram Software. [online] Available at: https://www.draw.io [Accessed 16 Oct. 2017].
Mockflow.com. (2017). MockFlow – Online Wireframe Tools, Prototyping Tools, UI Mockups, UX Suite. [online] Available at: https://mockflow.com [Accessed 16 Oct. 2017].