Redesign of a 10 year old internal web application which had been updated with new features or tools in an ad hoc manner when required by management. To tackle the extent of the project, a 5 day discovery phase was kicked-off to define the problem space. This involved: a system screen audit, 6 x user research (user observation & findings) and determining usability issues.
Initial findings through system screen audit:
Through user observations, it was made apparent that the environment in which the application was used, needed to be the most highly regarded. In order to not affect the repetitive and predictable routine of the users, the application’s core purpose of being functional and efficient was maintained by card-sorting the navigation to be user-orientated for the primary navigation, and task-orientated for the secondary navigation. A minimalist design to reduce loading time was applied as well as contrast colours for readability and usability.
As a way for finding solutions to the problem space, I resulted to recommendations on guidelines, implemented design principles and determined a set of templates & components.
The interaction flow below demonstrates the use of referencing for searched items and a task-oriented secondary navigation which was previously available at all times.
After the discovery phase, the project progressed to a final phase where templates and components were attentively created for the redesign. A new sitemap and a documentation of wireframes containing the templates and components were produced, as well as an interactive prototype to demonstrate interactions.
The wireframes were also tested among users before finalising the designs.
A compilation of a few components:
A style guide was provided by the visual designer (style guide was not designed by me).
Experience maps for a presentation to briefly explain the methods of how voting can be conducted for the Bafta Rising Star award. The diagram also intended to show how there are many entry points to the microsite and how the many methods can cross over different social media platforms.
A one day workshop with Made by Many for Internet Week to create an experience prototype.
Started off with brainstorming ideas that would be a fun app to prototype and test. The idea was to test whether users would enjoy an app which required collaboration to scare each other.
We were left with two hours to create and test on users.
Quick user flow for presentation.
Visualising how the Mulberry.com “world” sits in as website, it demonstrated how its brand can have connections to the e-commerce side, as well as other social platforms.
Flow diagrams were vital in the basket and checkout process with many variants for logged in and logged out states.
Experience map of banking with ING Turkey with set goals.
User journeys based on goals with templates.
Taking the existing online banking information architecture and simplifying the sitemap.
Broke out the sitemap to be task-led i.e. ‘View & manage’, ‘Make a transfer’ and ‘Apply for products’.
After heavy research, low level sketches were produced across all templates.
High fidelity wireframes for handover to the tech team.
After high fidelity wireframes were produced, the sitemap with template references were revised.
Designs by Claire Morris
Having joined the team after the discovery phase for the redesign of the HSBC UK public website, I was required to work on high fidelity wireframes and collaborate with the team to collect a library of templates and modules.
– Took part in user testing and worked with consideration of feedback
– All products and content from existing site was audited against proposed design
– Detailed documentation for client approval and off-site developers
A new vertical for BBC called Future is a hub of content in forms of articles, images, video and interactive applications. To make discovering content more fluid, users have the ability to view by tags and filter by media.
Started with an experience map to set goals for how different user types could use the website to find something of interest to them.
Sketching and card sort exercises to produce pages.
Low-mid fidelity wireframes which were passed over to the designer and collaborated to refine the designs.
Visual design not my work.
A tight scheduled project for the Orange’s iTunes Film To Go offer. User journeys and diagrams articulated the platforms available to redeem iTunes code and the process in which how users can download the film. Worked closely with the copy writer as well as the creative team to create experiences for the desktop website, mobile website, iPhone app, Facebook tab and other related campaigns.
Visual design not my work.
Worked with lead UX designer in a collaborative process to structure an intuitive information architecture for the flydubai booking engine. Together we developed a flow from user journeys, mapped out requirements and continuously referenced them for rapid sketching in 6-ups then 1-ups. Digital wireframes and interactive prototype for usability testing were then created in Axure.
Clickable prototype built in Axure for usability testing.
Visual designs not my work.