{"id":318,"date":"2016-08-09T18:49:25","date_gmt":"2016-08-09T18:49:25","guid":{"rendered":"http:\/\/danielleklein.ca\/?post_type=portfolio&p=318"},"modified":"2017-01-13T02:29:20","modified_gmt":"2017-01-13T02:29:20","slug":"oxford-english-dictionary","status":"publish","type":"portfolio","link":"http:\/\/danielleklein.ca\/index.php\/portfolio\/oxford-english-dictionary\/","title":{"rendered":"UX\/UI: The Oxford English Dictionary"},"content":{"rendered":"

Context<\/h2>\n

In the fall of 2015, I took Brainstation’s User Interface Design course to learn the ropes of\u00a0visual design tools. Throughout the course, we were all tasked with designing or redesigning a website using the techniques described in the course.<\/p>\n

I decided to redesign the Oxford English Dictionary’s website. I worked a lot with the OED’s site when I was an English major at U of T. I wouldn’t quite call myself a power user \u2014 but I knew enough about the site to have a few problems with it, and took the opportunity to try to resolve them.<\/p>\n

Problem<\/h2>\n
    \n
  1. Visual design:<\/strong> The aesthetic of the site is dull\u00a0and uninviting.<\/li>\n
  2. Home page:\u00a0<\/strong>The information of the home page is not presented effectively or clearly, and its unclear what levels of access different types of users have.<\/li>\n
  3. Definition pages:\u00a0<\/strong><\/strong>Definition pages are difficult to navigate due to lengthy walls of text and multiple, conflicting navigation bars.<\/li>\n
  4. Subscription CTA:\u00a0<\/strong>Subscription options are not displayed prominently and ordering for individuals occurs off-site and leads to an error page.<\/li>\n<\/ol>\n

    Process<\/h2>\n
    \"A
    A later iteration of the OED UI library<\/figcaption><\/figure>\n

    I started the redesign process by creating a\u00a0creative brief\u00a0<\/strong>detailing objectives for the project and including a\u00a0competitive analysis\u00a0<\/strong>of other online dictionaries.<\/p>\n

    Since this project was done in my UI course, the design process emphasized visual elements. I created a\u00a0mood board\u00a0<\/strong>for the site and repeatedly iterated on a\u00a0UI library. <\/strong>I sketched wireframes for screens, tested them, and then translated them into screens using the UI elements.<\/p>\n

    I also created and tested designs for a mobile version of the site.\u00a0I then used these screens to create mock-ups and an interactive prototype using InVision.<\/p>\n

    Solution<\/h2>\n

    My final deliverables for this project were screens and mock-ups for the home, definition, and subscription pages, as well as a UI library for the redesigned site. I presented my final design to my classmates for a critique, the slide deck for which is below.<\/p>\n

    \"AWith this redesign, my central objective was to make the website more readable overall by creating a clearer visual hierarchy of information to improve the usability of user searches.<\/strong> I also aimed to create more visual impact and better organize information to prioritize key tasks.<\/p>\n

    I achieved these objectives by putting the search task front and centre for all user types. I reduced the navigation options to align with key user tasks, and displayed content using cards rather to create more visual appeal and distinguish content types.<\/p>\n

    Key Learnings<\/h2>\n

    A key lesson I took away\u00a0from this experience was the importance of making sure\u00a0the user is present in UI design.\u00a0<\/strong>UX needs to come first, and in this project, visual design got in the way as I took\u00a0the opportunity while in the course to flex my Photoshop muscles and learn as many tricks of the trade as possible.<\/p>\n

    I would also want the opportunity to test the definition pages. I went for a modular design that could allow users to toggle open and closed different sections of definitions to make these more bite-sized, rather than the often tediously long pages currently in use. In retrospect, this design choice might hinder users’ potential for search and discovery, however.<\/p>\n

    If I could take this project further, I would go back to wireframes and do testing with a focus on content with both sides of spectrum<\/strong> \u2014 power users who turn to the OED site everyday for their academic work, and potential customers who are learning to use it for the first time.<\/p>\n

    Artefacts<\/h2>\n

    View a slide deck showing artefacts from my creative process during this project.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Reimagining the Oxford English Dictionary’s digital experience as a design project for a course in User Interface Design at Brainstation Toronto <\/p>\n","protected":false},"author":1,"featured_media":362,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"portfolio_category":[],"portfolio_tag":[86,85,56,25,23,30,33,31],"_links":{"self":[{"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio\/318"}],"collection":[{"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":14,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio\/318\/revisions"}],"predecessor-version":[{"id":601,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio\/318\/revisions\/601"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/media\/362"}],"wp:attachment":[{"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio_category?post=318"},{"taxonomy":"portfolio_tag","embeddable":true,"href":"http:\/\/danielleklein.ca\/index.php\/wp-json\/wp\/v2\/portfolio_tag?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}