Intfluence
Web design
Interaction designer
16 weeks
Adobe Illustrator, HTML, CSS, WordPress
Intfluence, an interior design online magazine, providing information, inspiration and motivation for students or newcomers of interior design.
Overview
Problem
Design and build an online magazine, that provides a space for students/newcomers of interior design, to learn and explore interior design.
Solution
Intfluence is an interior design online magazine, that informs, assists and inspires students/ newcomers of interior design, within their journey in interior design.
Process
Discover
Background Research
Due to my lack of knowledge in interior design, I began researching the area briefly, to help understand the subject, as well as gain ideas for content. I created a mind-map to collate my research.
Competitor Analysis
I conducted competitor analysis to gain insights from existing interior design online magazines, exploring potential areas for improvement and inspiration.
Summary
In general sites tend to be more visual with lots of imagery.
Layouts are simple, allowing easy scanning and navigation.
Social media tends to be seen across all sites, so readers can share and bring awareness to the site/articles.
Lacks community within sites which could be beneficial to readers, especially with my target audience.
Define
Personas
The target audience for my online magazine are either students of interior design or those new to the subject. Therefore, I curated personas, to address the needs and goals of my audience.
How Might We Statements
To develop considerations for my online magazine, I listed some how might we statements, which were curated from the competitor analysis and personas.
How might we design an online magazine that allows users to explore interior design?
How might we inform and inspire users about interior design, so that they can develop their knowledge and skills, creating a positive impact when they use the online magazine?
How might we create an easy and usable experience for users?
How might we design an online magazine that is aesthetically pleasing and easy to engage with?
Ideate
Card Sorting
Using sticky notes I began to note down the content for my online magazine and group them into categories. Here I considered the how might we statements, to ideate specific features/content, and address user needs.
Information Architecture
After card sorting, I finalised my content into a site map showing the information architecture of the online magazine.
Mood-boarding
To gain inspiration for the visual design of my online magazine, I built a mood-board. I collected inspiration, as well as the current trend of designing an interior design online magazine.
Sketching
With my mood-board and information architecture, I sketched out wireframes, experimenting with different layouts.
Design
Low-fi Wireframes
With sketches complete, I started to mock out low-fi wireframes, helping me to make quick adjustments in layout and play with the grid and column structures.
I was then able to find a Wordpress template that was similar to the wireframe, to refine easily.
Heuristic Evaluation
Before building the online magazine, I conducted a heuristic evaluation on the wireframes, to collect usability feedback before reaching the users. I then used the feedback to reiterate the low-fi wireframes.
Style Guide
To have a consistent feel to the online magazine, I created a style guide. This showed the primary branding, as well as basic components of the site. I also included colour pairs to allow a more accessible design.
Build & Test
Web Development Research
Having not built a website before, I completed some research to understand what is needed to develop a website. This helped me to chose my domain and web hosting site.
To build a website you need:
DOMAIN
Web address so users can locate your site.
Needs to have privacy protection to protect personal information.
WEB HOSTING
Publishes website.
Some hosting sites provide you with a free domain.
Customer support required to problem solve technical issues.
CONTENT
Code content through HTML and CSS, or use website builders or content managing systems.
Coding
I used Wordpress to build the content of my online magazine. I chose a theme that replicated my design the most, but was able to use HTML and CSS to refine the design.
Adding fonts
My site uses multiple font styles of the typeface Dosis, therefore I embedded the typeface code into the header stylesheet, from Google Fonts.
Slider
To insert a slider for the homepage, I used the plugin MetaSlider.
I had some trouble with inserting the slider and ended up having to insert the short-code directly into the code. I then added custom code into the stylesheet, to allow the slider to work properly.
Grid stlye
To create the irregular gird structure for the posts, I used the plug-in Gosign-Masonry Post Block.
The plugin produced a masonry effect however, I wanted an exaggerated grid structure, so I added some coding to do this. This allowed the featured image to inherit its' usual height and wanted grid effect.
Usability Testing
To test my site, I conducted a basic usability test with 2 participants. Unfortunately, there wasn't a huge sample size, and participants were not part of the target user.
I asked them to complete certain tasks and recorded their initial thoughts of the online magazine.
Findings
Both participants were able to complete all three tasks, resulting in easy navigation and intuitive designs.
A key strength included simple and aesthetic design, as well as the feeling of being able to freely explore the site without constraints.
A key area to improve included being able to book events in site rather than moving to a new site (new tab).
Both participants were able to complete all three tasks, resulting in easy navigation and intuitive designs.
A key strength included simple and aesthetic design, as well as the feeling of being able to freely explore the site without constraints.
A key area to improve included being able to book events in site rather than moving to a new site (new tab).
Final Designs
Homepage
Welcomes users, with a bright but friendly aesthetic, prompting them to explore the interior design online magazine, and keep up to date by signing up to the newsletter.
Uses lots of imagery and white space to make the site look less intimidating and more welcoming and bright.
Sections act as a starting point for users to explore.
Signing up to the newsletter is the call to action, hence can be found within pop-up, slider and footer.
About
Get to know about Intfluence and how they want to help you on your interior design journey.
Simple introduction with call to actions to either, sign up, share or read articles. Allowing consistent engagement with the site.
Learn
Users can explore and search articles about different areas of interior design.
Main pages have a consistent style, allowing easy navigation and intuitive design. Users can scroll to find a variety of articles surrounding different topics within interior design.
Posts
Easily scan and read articles and communicate any thoughts or questions with the community.
Minimal post layout to allow easy scanning of pages.
Uses white space and imagery to break text and make article more engaging.
Users can share and post comments to further their exploration, building a community and show their appreciation.
Designers
Users can read up on professionals within the industry and what their journey's have been like. Spotlight designers' are designers that have be specially mentioned, bringing deeper insights to how they work.
Collections
View a gallery of images to be inspired and see what's current in the interior design world.
Opens collections into a gallery lightbox. Uses icons and text to add further information, creating less friction within usability
Events
Get involved and discover upcoming events to learn more and meet like minded people.
Events have specific information regarding the event and open up in new tab as to not lose the site, through their exploration.
Takeaways
What I learnt...
I learnt how to build a website using WordPress, HTML and CSS. In addition, I learnt how to assess a website's usability and implement corrections to build a more usable interface.
This project gave me an insight as to how websites can be built and take into considerations feasibility of designs alongside development.
What I would change...
Looking back, I would have had added extra interactions to make the site smoother and customised for the users needs, e.g adding tags for searches, colour modes, accessible design and responsive design.
Intfluence
Web design
Interaction designer
16 weeks
Adobe Illustrator, HTML, CSS, WordPress
Intfluence, an interior design online magazine, providing information, inspiration and motivation for students or newcomers of interior design.
Overview
Problem
Design and build an online magazine, that provides a space for students/newcomers of interior design, to learn and explore interior design.
Solution
Intfluence is an interior design online magazine, that informs, assists and inspires students/ newcomers of interior design, within their journey in interior design.
Process
Discover
Background Research
Due to my lack of knowledge in interior design, I began researching the area briefly, to help understand the subject, as well as gain ideas for content. I created a mind-map to collate my research.
Competitor Analysis
I conducted competitor analysis to gain insights from existing interior design online magazines, exploring potential areas for improvement and inspiration.
Competitor analysis
In general sites tend to be more visual with lots of imagery.
Layouts are very simple, allowing easy scanning of pages and navigation.
Social media tends to be seen across all sites, allowing readers to share and bring awareness to the site/articles.
There isn't much of a community sho
Define
Personas
The target audience for my online magazine are either students of interior design or those new to the subject. Therefore, I curated personas, to address the needs and goals of my audience.
How Might We Statements
To develop considerations for my online magazine, I listed some how might we statements, which were curated from the competitor analysis and personas.
How might we design an online magazine that allows users to explore interior design?
How might we inform and inspire users about interior design, so that they can develop their knowledge and skills, creating a positive impact when they use the online magazine?
How might we create an easy and usable experience for users?
How might we design an online magazine that is aesthetically pleasing and easy to engage with?
Ideate
Card Sorting
Using sticky notes I began to note down the content for my online magazine and group them into categories. Here I considered the how might we statements, to ideate specific features/content, and address user needs.
Information Architecture
After card sorting, I finalised my content into a site map showing the information architecture of the online magazine.
Mood-boarding
To gain inspiration for the visual design of my online magazine, I built a mood-board. I collected inspiration, as well as the current trend of designing an interior design online magazine.
Sketching
With my mood-board and information architecture, I sketched out wireframes, experimenting with different layouts.
Design
Low-fi Wireframes
With sketches complete, I started to mock out low-fi wireframes, helping me to make quick adjustments in layout and play with the grid and column structures.
I was then able to find a Wordpress template that was similar to the wireframe, to refine easily.
Heuristic Evaluation
Before building the online magazine, I conducted a heuristic evaluation on the wireframes, to collect usability feedback before reaching the users. I then used the feedback to reiterate the low-fi wireframes.
Style Guide
To have a consistent feel to the online magazine, I created a style guide. This showed the primary branding, as well as basic components of the site. I also included colour pairs to allow a more accessible design.
Build & Test
Web Development Research
Having not built a website before, I completed some research to understand what is needed to develop a website. This helped me to chose my domain and web hosting site.
To build a website you need:
DOMAIN
Web address so users can locate your site.
Needs to have privacy protection to protect personal information.
WEB HOSTING
Publishes website.
Some hosting sites provide you with a free domain.
Customer support required to problem solve technical issues.
CONTENT
Code content through HTML and CSS, or use website builders or content managing systems.
Coding
I used Wordpress to build the content of my online magazine. I chose a theme that replicated my design the most, but was able to use HTML and CSS to refine the design.
Adding fonts
My site uses multiple font styles of the typeface Dosis, therefore I embedded the typeface code into the header stylesheet, from Google Fonts.
Slider
To insert a slider for the homepage, I used the plugin MetaSlider.
I had some trouble with inserting the slider and ended up having to insert the short-code directly into the code. I then added custom code into the stylesheet, to allow the slider to work properly.
Grid stlye
To create the irregular gird structure for the posts, I used the plug-in Gosign-Masonry Post Block.
The plugin produced a masonry effect however, I wanted an exaggerated grid structure, so I added some coding to do this. This allowed the featured image to inherit its' usual height and wanted grid effect.
Usability Testing
To test my site, I conducted a basic usability test with 2 participants. Unfortunately, there wasn't a huge sample size, and participants were not part of the target user.
I asked them to complete certain tasks and recorded their initial thoughts of the online magazine.
Findings
Both participants were able to complete all three tasks, resulting in easy navigation and intuitive designs.
A key strength included simple and aesthetic design, as well as the feeling of being able to freely explore the site without constraints.
A key area to improve included being able to book events in site rather than moving to a new site (new tab).
Final Designs
Homepage
Welcomes users, with a bright but friendly aesthetic, prompting them to explore the interior design online magazine, and keep up to date by signing up to the newsletter.
Uses lots of imagery and white space to make the site look less intimidating and more welcoming and bright.
Sections act as a starting point for users to explore.
Signing up to the newsletter is the call to action, hence can be found within pop-up, slider and footer.
About
Get to know about Intfluence and how they want to help you on your interior design journey.
Simple introduction with call to actions to either, sign up, share or read articles. Allowing consistent engagement with the site.
Learn
Users can explore and search articles about different areas of interior design.
Main pages have a consistent style, allowing easy navigation and intuitive design. Users can scroll to find a variety of articles surrounding different topics within interior design.
Posts
Easily scan and read articles and communicate any thoughts or questions with the community.
Minimal post layout to allow easy scanning of pages.
Uses white space and imagery to break text and make article more engaging.
Users can share and post comments to further their exploration, building a community and show their appreciation.
Designers
Users can read up on professionals within the industry and what their journey's have been like. Spotlight designers' are designers that have be specially mentioned, bringing deeper insights to how they work.
Collections
View a gallery of images to be inspired and see what's current in the interior design world.
Opens collections into a gallery lightbox. Uses icons and text to add further information, creating less friction within usability
Events
Get involved and discover upcoming events to learn more and meet like minded people.
Events have specific information regarding the event and open up in new tab as to not lose the site, through their exploration.
Takeaways
What I learnt...
I learnt how to build a website using WordPress, HTML and CSS. In addition, I learnt how to assess a website's usability and implement corrections to build a more usable interface.
This project gave me an insight as to how websites can be built and take into considerations feasibility of designs alongside development.
What I would change...
Looking back, I would have had added extra interactions to make the site smoother and customised for the users needs, e.g adding tags for searches, colour modes, accessible design and responsive design.
If you’ve liked what you’ve seen, and would like to work together,
Feel free to Contact me!
You can also find me on:
You can also find me on:
