Product Placement
JBB: An Artblog!
Lint Roller? I Barely Know Her
One Nice Bug Per Day
Origami Around
Show & Tell
Aqua Utopia｜海の底で記憶を紡ぐ
Andulka
i don't do bad sauce passes
No title available
Cosmic Funnies
shark vs the universe
"I'm Dorothy Gale from Kansas"
Peter Solarz
oozey mess
taylor price
AnasAbdin
Claire Keane
art blog(derogatory)
blake kathryn
seen from Malaysia
seen from Germany
seen from Netherlands
seen from Türkiye
seen from United States
seen from United States
seen from China
seen from United States
seen from United States
seen from Malaysia
seen from Malaysia
seen from Malaysia
seen from Malaysia
seen from Malaysia
seen from Greece
seen from Malaysia
seen from Canada
seen from Malaysia
seen from United States
seen from Canada
@sarahcupples
IXD303 & IXD304
IXD303
Research
Testing Interactions For UXHive - Scroll
Testing Interactions For UXHive - Notifications
Prototype
IXD304
Research
Initial Prototype - Focusing on navigation
Final Prototype
Heroes & Villains Website
Making Some Changes
In the prototype of my Heroes & Villains site, I had a different layout of the evidence around the main content for each page. However, when it actually came to building this I realised it was adding an enormous amount of weight to my site and slowing it down significantly. Therefore, I have kept the layout of the evidence consistent throughout the site.
The second change I made was the title. I felt as though there was too much going on on the original screen (all the evidence, a title and a sub title), and it detracted focus from the evidence. Therefore, I created a new title.
The ‘Heroes’ and ‘Villains’ of the title have a subtle texture, created from overlaying the background image over the top of them.
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
Setting The Tone
I really like the way the Les Chariots Fenwick site handled the loader for their site. As the user waits for the site to load a forklift is being sketched, which directly relates to the content of the site (about forklift history and design). This gives the user an idea of the content before they even get to the main site. For my own site I wanted to do something along the same lines as this - set the tone and explain the site. For example, explaining that the user has to interact with the evidence to uncover content. Therefore, I started looking at possible animations on Animista. The likes of text sliding or bouncing in really doesn't fit the narrative or style of my site, however, the fading in and out animations could work really well. Fading the text in and out would slowly immerse the user into the narrative of the site and guide them to the main content.
Uncover text test page.
Testing An Interaction
After looking at ciphers, I wanted to include an aspect of hidden text that the user has to uncover. The animation I have used floats over, and hides, certain key words to do with the character, which the user has to brush away. I wanted to include this animation as my site encourages the user to look around the page for hidden content, which detracts from the text a bit. Therefore, this animation help refocus the user, engage them with the text and ensure that it isn't overlooked. The link will take you to a test of the animation on my site.
High Fidelity Mockups - Messaging
This is the messaging system for UXHive. The messages appear as an overlay to the page the user is currently on, so the user doesn't have to interrupt what they're doing to send a message. Users are able to chat, seek advice and talk about course content. They can also send images.
Key Interactions For The Prototype
• Click on a specific chat to open up message screen • Click the message screen and another message will appear
High Fidelity Mockups - Workflow
This is the Workflow page of UXHive, where users are able to balance their learning alongside their busy schedules. The Workflow page has 3 sections: • To do - This section contains a daily task list, generated by UXHive, to keep the user on track with their learning. Users are able to tick of tasks as they complete them, as well as edit or delete them as they see fit. • Course progress - This section allows the user to see the progress they are making with all their courses. Here they can see if they are on schedule with each course, the percentage of the course that they have completed and the duration of each course. Like with the task list, users are able to edit their courses. • Timeline - This section allows displays all the courses the user is completing on a timeline. This, amongst other things, ensures that users don't take on too much at once.
Key Interactions For The Prototype:
To do
• Course dropdown - users are able to see the tasks for all their courses, or just specific ones • Tick off task • Edit task • Delete task overlay and process
Timeline
• Move date line • More options pop up (when you click the three vertical dots at the right hand side of the course) • Calendar pop up (when you click the calendar icon)
High Fidelity Mockups - Video Lesson
This is what a video lesson - the main learning format - for UXHive would look like. Below the video there are three sections: • About - An overview of the lesson, explaining what the user will learn and a breakdown of all the topics that will be discussed. • Teacher - This section lets the user learn about who their teach is, what they do and what they specialise in, hopefully creating more of a connection between teacher and student. There are also links to the teacher's social media and work. • Downloads & Resources - This is where the user is able to download all the resources used in the lesson. For example, if the teacher used a empathy map template, the user is able to download it and put what they've learned into practice. One of the issues that users outlined with the likes of Codecademy was the fact that there were no additional/supplemental learning resources. Therefore, I have added in books that will let users further explore what they've learned and deepen their understanding. There are links attached to these resources that will take the user directly to a site that will allow them to purchase them. Users are also able to interact with each other through the lesson chat which opens up alongside the lesson. This allows users to discuss lesson content, ask and answer questions and generally support each other in their learning.
Key Interactions For The Prototype:
Video Lesson
• Volume - turn volume up or down • Activate subtitles • Open lesson chat • Switch between bottom content - About, Teacher, Downloads & Resources • Download lesson button - generates a download icon on the top navigation bar. When a user clicks this a dropdown will appear showing the status of all their downloads.
High Fidelity Mockups - Course Page
When a user selects a course, they are taken to this page. This course page contains an short overview of the course and all the lessons the user will complete within a particular course. The lessons are sorted into modules to make the amount of content feel less overwhelming and more approachable. Users have to finish each lesson to access the next.
Key Interactions For The Prototype:
• Minimise top banner (by clicking minimise icon) • Click on lesson card to access video lesson
High Fidelity Mockups - Course Categories
These are the main Course Category pages within the Courses section. • Course Category page - This page allows users to find courses within specific areas. The colours used in the course cards are coordinated to a specific category, for example a wireframing course would be purple as it falls under the Prototyping category. • Course Category content page - When a user selects a course category, in this case Code, this is where they will be taken. This page collates all the courses that fall under Code, enabling users to locate specific courses easier and faster.
Key Interactions For The Prototype:
Specific Course category page
• Minimise top banner • Sort courses dropdown
High Fidelity Mockups - Course Browse
This is the All Courses page of the Courses section, which allows users to browse and explore courses.
Key Interactions For The Prototype:
• Bookmark course • Join course button • Share course overlay and process (enables user users to support each other in their learning) • Scroll through courses
High Fidelity Mockups - Hive Home
This is the Hive Homepage. This is where non-users will land when they access UXHive, but the content will be more general. Above is an example of when someone who is a user accesses this page - there is personalised content (recommended courses) and the user is able to sign up to the newletter.
• Slider - The slider will contain content including new updates/content, a welcome banner and will encourage the user to sign up to the UXHive newsletter. If the user does sign up for the newsletter they will recieve a tangible reward - an Ebook.
• Top Hivers - The 'Top Hivers' within the platform recieve rewards for their hard work. One of the main rewards is a 1on1 with a top industry professional. This should act as a motivator for my users, and encourage them to work consistently.
Key Interactions For The Prototype:
• Sign up for newsletter process • Users who have completed the course overlay
High Fidelity Mockups - User Dashboard
This is the Dashboard, when a user logs into UXHive this is where they will be taken. The Dashboard has three different areas: • User profile - This is the portion of the Dashboard that other users will be able to see. This screen details the users specialities, what teams they're apart of and the users they interact most with. I wanted this page, in particular, to take a more human-centred approach so that users would be able to learn about each other and feel more connected. Along the top of the user profile is a personalised hive pattern. When the user is new to the site this pattern is blank, but as they complete more courses the pattern will form. Each hive shape is colour coordinated to a specific design topic/area. For example, a blue hive shape represents a completed code course. • My Courses - This page contains all the courses the user is currently completing. Users are able to access all their courses and view the progress they have made in each (through the progress bar at the bottom of the course card). Users are also able to view courses that they have completed and their bookmarked courses by using the sort dropdown at the right hand side of the screen. • Downloads - This page is to hold all the lessons and lesson resources the user has downloaded, such as templates, transcripts and video lessons. Users are able to access the content of this page for offline, accessible learning.
Key Interactions For The Prototype:
Profile
• Edit profile • See what the user was last working on (by clicking their profile photo) • Hive pattern overlay to see categories (by clicking the question mark)
My Courses
• Sort courses dropdown
A prototype made with Adobe XD
Heroes & Villains Prototype
The final prototype for my Heroes and Villains site!
Heroes & Villains Mockups
Heroes & Villains Mockups
Optimising My Images
Website: https://imagecompressor.com Because I have quite a lot of images throughout my site, it can take longer for pages to load and negatively impact upon the users experience, and possibly drive them away from my site. To try and remedy this, I used Optimizilla. Optimizilla is an image optimising site which compresses your images to reduce each file size. It’s super easy to use, just upload up to 20 images and wait for the compression to finish - you can even control the quality and compression level of your images. I really recommend it if you’re struggling with your site’s speed.
Creating My Own Evidence
I really wanted all the evidence on my site to be hand made, so I bought a load of ink and set to it!