loosecookie

[loosecookie]

The Yearly Revamp

Year 1: https://loosecookie.github.io/Portfolio/portfolio.html

Year 2: https://loosecookie.github.io/portfolioredesign/index.html

Year 3: http://www.lucycookdesigns.com

Another year another portfolio redesign. I was looking at my portfolio recently and felt it was too cluttered, waffly and overall just not straight to the point. I wanted to redesign my portfolio, this time focusing on stripping back the unnecessary content and design. The main question I had to keep reminding myself was “Who is it visiting my portfolio and why?”. The people visiting my portfolio are the likes of recruiters and fellow designers, their purpose for visiting is mainly to check out my work and perhaps read about my experience.

I read through a number of useful articles around “how to design the perfect portfolio” two of which included;

https://uxdesign.cc/how-and-why-i-redesign-my-portfolio-every-year-bf3bba3833fc

https://www.nngroup.com/articles/ux-design-portfolios/

My existing portfolio had 4 navigational pages (Home, Work, About, Contact), 6 case study pages and a side projects section - surrounded by lots of colour, images and borders which I now believe made the pages too cluttered. All this information is really just unnecessary and can be overwhelming for the user, they are likely to turn away from my website if the information they require is not in plain sight. For this reason I needed to improve the navigation, I condensed the 4 main pages into 2 - ‘Work’ presenting the case studies and ‘About’ presenting my existing experience (the 2 main purposes for visiting my portfolio). 

It was suggested on both of these articles above that 3-4 case studies was more than enough, therefore I had to be more selective with my best pieces of work. I selected and rewrote 3 case studies to explain more about my process and challenges as visitors are more interested in my workings out then the finalised designs. As well as updating the side projects section with some of my recent work.

In this redesign I was also able to add extra small features such as the home icon on the top left and page animations. As well as fixing the small problems I had with my existing portfolio which was mainly to do with the responsiveness.

I’m sure next year I will have more things to critique and refine as I continue to learn and develop but for now I’m very pleased with the outcome. I believe it is a much cleaner website and the necessary information is easier to find and explore. 

Have fun checking it out!

[loosecookie]

All Projects

Year 1

IXD101 Interaction Design Fundamentals - IOS wallpapers, album covers and minimalistic movie posters.

IXD102 Introduction to Communication Design - Designer’s essay and reflective website on chosen designer, Paul Rand.

IXD103 Exploring Identity - Building a personal brand (Monogram, Wordmark, Visual Marque and more) and initial portfolio website.

IXD104 Imaging and Data Visualisation - Travel app along side a illustrative travel infographic.

Year 2

IXD301 Designing with Content - Portfolio website redesign and Everyday Elements website to educate on the Periodic Table.

IXD302 Creative Entrepreneurship - Icon set of 12 Special OccasIcons and promotional website.

IXD303 Designing User Experiences - Design of an online learning platform, UXpert.

IXD304 Narrative and Storytelling - Interactive website telling the story of Sherlock Holmes.

[loosecookie]

Final Submission

IXD303 Designing User Experiences

Research

Prototype

Presentation

IXD304 Narrative and Storytelling

Research

Prototype

Website

[loosecookie]

Final Website

URL: lucycookdesigns.com/sherlockholmes

Here is a link to the finished Sherlock Holmes website.

Reflections

I loved this project because there was really no specific brief. We were provided with the content to include and given the creative freedom to design the website how we feel would tell the story of Sherlock Holmes the best. My visual inspiration was very much based on my trip to the 221b Baker Street museum at the beginning of the year, being able to collect first hand research and gain a feel for the Sherlock Holmes story in real life was exactly what I needed to spark my direction of creativity for this project, especially since I had previously never read or watched any of the Sherlock Holmes stories. With the use of detailed illustrations and fun animations the user is navigated through Holmes’ room. Starting of with an illustration of 221b on the home page and then moving inside looking around the 4 walls of Sherlock’s room with the use of a horizontal scroll and obviously the visual aesthetics such as matching wallpaper to that shown in the museum. I’ve believe I’ve built a fun experience, almost as if the user is taking a virtual tour of 221b Baker Street, which is definitely what tells the story. 

Improvements

My website is very similar to how I imagined since the build of my initial prototype, with just a few subtle changes and improvements to the certain elements. The main issue I had with my website was the use of page transitions, reflecting back on my prototype this is ideally how I preferred the page transitions to work, using slide rights/lefts/ups/downs as I think it adds to the horizontal scroll idea. However unfortunately I wasn't able to achieve this and instead opted for more subtle animations. As you move across the 4 main pages I wanted the pages to slide across, instead I opted for a subtle fade in as I couldn’t get this transition to work accurately. As well when you click on the content in those pages (such as clicking on a character to find out more) I wanted these pages to slide up to read and slide down on exit, I wasn’t able to achieve this exactly however there is still an animation of the content sliding up. So although the page transitions aren’t exactly how I originally intended, it doesn't effect the websites use and ability to tell the story of Sherlock Holmes. 

Overall I am very pleased with what I achieved in this build, and have definitely learnt new content and developed my skills in HTML and Code which I can continue to carry on.

[loosecookie]

Adding Animations

I thought including animation would enhance the story telling aspect and providing a small delighter for the audience. I initially started with the animation of the swinging photo frames, very subtle however I think it adds life and character. And then thought if I am to include animation I need to include it elsewhere for consistency, and from the very beginning I liked the idea of having the buses and taxis on the map page animated as though they are driving around. As shown again a very small and slow animation, so that it’s not too in your face and distracting from the content, however provides an excited “oh look at that!” which is what I wanted to achieve. 

I was trying to think of else where that I could potentially include small animations however I don’t want to go over board and therefore believe it’s probably best sticking with just these 2 elements. 

[loosecookie]

Small Print

Another opinion that arises when conducting the user research was the font size, a few thought that it could be bigger in order for better readability. The top image shows how the small print originally sit on the home page. Positioned at the bottom of the home page content in a smaller font size do that it was recognised as small print. 

I felt as though this text looked squeezed into the home page, there wasn’t really any breathing room at the top and bottom of the page. I also wasn’t able to include all the words/sentences I wanted to in my small print as I was trying to make up for space. I thought it also took away slightly from the story telling element of the website, this small print doesn’t add to the story I’m trying to tell but instead is there for reference and gratitude. Therefore I concluded it would be better off positioned elsewhere and therefore this page content could be more padded and allow for a larger font size.

So to change this around, I built a small information ‘i’ in the top right corner. When the user clicks on this ‘i’ an overlay will appear allowing them to read the small print separately.

This is definitely a more effective way to be displayed, and allowed me to include another small print overlay on the infographic page, so that I could reference the Guardian as they were the source of my data for the infographic.

[loosecookie]

Usability Testing

I conducted a quick usability test with a group of family and friends, to gain overall thoughts of my Sherlock Holmes website from outside opinions. Asking questions about the navigation, content, illustrations and most importantly do they think it effectively tells the story of Sherlock Holmes.

The Results

The results of the usability test were overall very impressed and had a clear understand of my direction. A few consistent issues that were highlighted were to do with the navigational aspect, especially on the home page. Because there is no usual navigation bar, they were unsure were to click to move on. Mostly tapping on the illustration of 221b Baker Street expecting them to be directed somewhere, which is correct but specifically clicking on the windows. Therefore it required my to revise this and add a label to the right hand side making it more obvious what happens next.

The same issue arises on other pages (221b Baker Street and Measuring Mr Holmes). Adding these labels will help improve how the user navigates through individual pages, telling them how to view content.

[loosecookie]

Final Prototype

URL: https://xd.adobe.com/view/976cbd3d-e7b6-4419-4bb6-7b3256b9eeaf-e15d/

Here is the final link to my UXpert prototype. 

Reflections

This project taught me the importance of research, especially when building a product in a highly competitive field. As although we can learn to build aesthetically pleasing functional interfaces, it is more important that the product being provided is of added value in order to fit the gap in the market. I learnt many more important stages to add to my design process, such as card sorting, surveys and how might we exercises, that overall will improve the outcome of my product.

This project also introduced me to prototyping, previously I had used Invision however for my UXpert platform I chose to look at Adobe XD. Exploring their variety of helpful tools, I especially grew to love the 'auto animate' feature. I was opened to the importance of prototyping for the purpose of iteration - work can be easily tested and changed along the developing process before you reach your final designs and therefore smoothing out the building process at the end. 

I am pleased with the outcome of UXpert as I believe I have improved on the 3 main problems of online learning platforms - providing better structured content, on-demand student support and especially motivating students when learning online. Along with numerous added value features such as bookmarks, downloaded content, recommendations and so on that would improve a users overall experience.

Improvements

In terms of improvement, I had the idea towards the start of the process that I would have liked to include a section providing contextual information. An area where the students could read in a blog style format, current news in the UX design industry. Keeping them up to date with what’s going on and therefore improving their overall knowledge. 

I would also like to continue the user testing process, at the moment I have tested my prototype with 3 adults and 3 students (based on my user personas) however I think there is also potential to continue improving if I had a wider variety of user testers. 

[loosecookie]

Promotional Banner

Looking at examples of promotional banners from Pinterest, with the purpose of building my own to visually advertise my product, UXpert. I sketched out a few different layouts, resulting in the the mockup above which outlines the main features UXpert has to provide.

[loosecookie]

Presenting My Idea

Creating a 10 minute presentation to explain the purpose and features of UXpert, and therefore I must plan the narrative.

Things to include in my presentation;

Identify the big hairy audacious goal

Competitor benchmarking findings

Survey results

User personas

Card sorting

Features list

Visual grammar

Content Structure

Profile dashboard pattern concept

User flows

Wireframes

Explaining prototype screens

Animations

Prototype link

Presentation Structure

Start with a story (user personas)

Fill the middle with relevant content - exploring diagrams, lists, rhetorical questions, repetition. Similar to how Apple continually overuse words like incredible, awesome, amazing in order for the impression to stick in the audiences head https://youtu.be/Nx7v815bYUw.

Land the plan by repeating the goals of the user personas

Final Presentation Link

URL: https://github.com/loosecookie/UXpert_presentation/blob/master/UXpert%20Presentation_compressed-2.pdf

[loosecookie]

Content - Tools Section

Showcasing what's most important the module content, this video shows the pathway of how a user would navigate the content aspect of my online learning platform. Selecting on a module category, browsing the different modules on offer and selecting a module to start that they find interesting. Easily identifying the tasks involved in each module. From the page students also have access to their personal blog to upload content and ask any questions in the module chat.

[loosecookie]

Updated Sign Up

Above shows the updated and finalised version of the sign up process after fixing issues identified in the user testing as well as when building the design system. I believe it to be a much smoother process that will be easily understood by my target audience.

[loosecookie]

Map Tag

URL: https://www.w3schools.com/tags/tag_map.asp

While turning this project from a prototype to a built HTML website, I found the use of map tags.

So on the home page, my idea was to use the windows of this illustration of 221b Baker Street as the home navigation of my whole website. And therefore I had to figure out a way in which the windows could become their own link. I originally had it so that the windows were individual linked images however I could sense this becoming a major issue with the use of different screen sizes or responsive and so had to find another way.

This is when I found the use of map tags. Inserting a map tag, and identifying the coordinates of a particular image where you want selectable allows you to make that section of the image a link (As you can see by the areas highlighted in pink). You can also have multiple linking areas on the one image, I needed 4 links for the 4 windows to navigate to the 4 main pages. Therefore discovering this element was very helpful for the purpose of this task.

[loosecookie]

Embedding a map of 221b Baker Street Area

URL: https://www.embedgooglemap.net/

With the help of this very easy to work website above, I was able to immediately embed a map to a webpage. Allowing the user to navigate around London, using the zoom features as well as a location pointer at the museum.

Embedding a map into our websites would;

Help users get directions. 

Make it easy to find business contact information. 

Show reviews and other information about your website/company.

Highlight nearby points of interest, like parking areas, restaurants etc.

It keeps visitors on your site. 

This was a very easy method for inputting a map, all it involved was me typing my desired location and copying the html code.

The only thing with this input is that I don’t think there is the ability to adjust the look of the map. Perhaps this style of map doesn’t fit in with the style of website and therefore may require you to check out different map styles elsewhere.

However other methods include using;

Google Maps

Leaflet.js

Openstreetmap

Stamen

I wanted to see if I was able to recreate the same thing using different platforms. I originally took a look at the google maps method, which looked rather straight forward however required you to sign up. So instead I thought I would try leaflet.js, which I’m struggling to see where I have gone wrong.

I seem to have all the right elements however the map just doesn’t want to display and therefore I can’t carry on with implementing a location pin etc. Hopefully over time I’ll figure this issue out.

In terms of the Stamen maps I love how they look and the different style sheets they offer, however unfortunately again they don’t fit the look for my website.

[loosecookie]

Example 2: Kevala

What impact are VW’s non-compliant “clean diesel” cars having on our communities?

In California alone, Volkswagen has sold over 68,000 “clean diesel” cars since 2009. It has been reported that these vehicles actually emit more than 40 times the authorized amounts of NOx and particulate matter.

This interactive map helps tell the story of how these non-compliant VWs are affecting California’s environment, air quality, and communities. Here’s how to explore the data.

Again another example of an impressive interactive map identifying the impact of VW’s “clean diesel” cars on the community however looking specifically at California.

Similar to previous you are able to zoom in and out on specific areas. However a different feature on this map is the ability to click different options identified at the bottom right, clicking on one or all of these options further highlights certain data, allowing the user to select as they require rather than an overload of content straight away. Another great example of how interactive maps are used in a more complex way.

[loosecookie]

Example 1: Travic

TRAVIC provides movement visualization of transit data published by transit agencies and operators from all over the world. The movements are mostly based on static schedule data. Wherever real-time data is available it is also included in the visualization.

This is an example of a very impressive interactive map that even shows live movement of the different transports going all over the world.

You can look at the world as a whole or zoom in to specific areas like I have done above exploring what train is currently moving through Belfast, with the click on the circle up pop this information box, identifying the method of transport and it’s current route. An extremely clever website that must require heavy processing in order to develop and run.

[loosecookie]

Maps & APIs

An Application Programming Interface allows different apps to talk to each other. We were looking at using APIs recently because the page ‘221b Baker Street’ requires the inclusion of a map to identifying where the Sherlock Holmes museum is in relation to the rest of London. 

We identified a few pros and cons for using APIs that include;

Pros

it’s more interactive

ease of use 

off the shelf solutions as you don’t have to make your own map

Cons

Sometimes there’s a cost involved

The content is beyond your control

Maintenance issues as sometimes an API is depreciated (shut down or access to content is taken away) which means things can break 

I thought the inclusion of an interactive map in my website would look rather out of place, seeing as every page is based around a main vector illustration. Therefore made the decision not to include an interactive map, however this doesn’t stop me from exploring the different ways of including a live map and trying the different styles of maps, so I’m going to at least give it a go.