UX in Tower B Stores Human Factors DM3329 Assignment 2 Minal’s Warriors Yaagni Patel Nadine Rutt Torin Lee Sophie Bowers Ruby Hardy Bullen Emma McBride
UX in Tower B Stores The initial brief for this assignment was to improve an on-campus student experience and by using the double diamond design process to explore the variety of ways to improve this experience through a website / app interface. In this report we have shown our journey of researching the current user experience and identifying the key problem areas that need to be addressed. Having regular feedback, from both Minal and students, has influenced the development of the visual aspect and the functionality of the website.
Specific Problems
PROBLEM STATEMENT
RESEARCH
INSIGHTS
IDEATION
PROTOTYPES
SOLUTION
Iterative Process
How Might We... Improve efficiency and availability of services at Tower B Stores to make better use of staff and students’ time.
Research
Staff Stakeholder Discussion Talking with staff at Stores allowed us to discuss their desires to improve the system, as well astheir extensive experience of what doesnt work so well. This gave us invaluable data from a stakeholder that experiences the stores system in action daily.
Student User Interviews
Observation of Users
Interviewing students that use Stores from the different education levels gave us a information on the sort of competitor products that they consider, the things that they individually struggle with at Stores, and how they usually use Stores.
Watching the daily interactions of Stores provided us with an opportunity to analyse the changes that happen to the system at busier or quieter times, what people go to Stores for, and spot trends in their usual interactions.
Preliminary User Journey User journey based on interactions that were shown by the research to be ‘usual’. Get cash out from ATM
Queue up in line for Stores
Ask at Stores for a service or product
Other products + services
Printing + binding services
Is the document already printed?
Common Themes The common theme areas that we drew out of our research fell into 6 individual categories. Each of these categories offer their own unique challenges and accompanying solutions. Considering all of these themes should result in a well resolved solution for the redesign.
Wait for stock check and retrieval
Provide product specifics
No - Get document printed
Payment
Pass over USB with file on to staff
Pass printed document to staff
Staff Chat
Yes - Make binding colour selection
Services
Wait for binding to be completed
Products
Staff pass over the purchase
Cost is calculated
Queueing
Pay in cash + collect purchase
Printing
User Experience Journey Work is finished and ready to print
Meanwhile, Minal helps other users Document and service is completed
Word of mouth advice about stores
After getting cash out, pay for cheap service
Speak to Minal about what is available
No information about available possibilities
Guess how to print document
Happy with finished doc, ready to submit
Realise document is not set up correctly
Start
Needs printing and finishing, looks online
Competitors are expensive and large batches Difficult to find stores
REQUIRE SERVICE
Delight point Pain point
RESEARCH
Information in the queue is minimal Queue is huge, wait for 22 minutes
ARRIVE
ENQUIRE
Get document printed and bound Bring USB into stores to print
Go back and edit document for printing
EXPERIENCE
PROCEED
Description: The user makes their decision to purchase an item or require the use of a service.
Description: Users are aware of other options that may be less reliable and more expensive, but definitely more convenient. To find other options, the user makes the decision to view the services at the stores counter.
Description: The user speaks to Minal about the possibilities available, and finishing the document. Minal tells the user about everything that could be done for the desired finish.
Description: For users who are not aware of the set up process or have never used the services before, this can be a bit stressful in trying to achieve the best quality. Minal is often occupied with helping others, and during busy periods close to deadlines there are other users waiting to also print and bind.
Recommendation: Information should be available to users prior to in-person visitation. This ensures that information can be compared when users look elsewhere for solutions.
Recommendation: Stores opening hours and location should be communicated to users. Finshed examples of work would make it easier to demonstrate services available.
Recommendation: Stores should make this information available prior to arrival. Finshed examples of work would make it easier to demonstrate services available.
Recommendation: Recommendation: Guidance on document requirements and Stores requires more set up guidelines will ensure that time is than one member of not wasted by incorrect document formats. staff. It would be Introducing a way to bulk process similar beneficial to introduce a jobs will save time and reduce wait time for ‘click and collect’ others. system for users who do not require help from a technician.
Opportunities
Walk to Santander and queue for cash machine
Find out stores only accept cash
Description: The final finished outcome of using stores is to a good standard and the price is a fraction of what competitors charge elsewhere. Whilst Minal is helping finish, the queue is lengthening.
PAYMENT
LEAVE
Description: Purchasing from stores requires cash payment as it is a non-profit service. The user does not carry cash and is forced to go and get some from the nearest cash point, delaying the experience.
Description: Once the user has finished using stores services, the finished document is ready to be handed in. Stores is unlikely to be used again until another service is needed.
Recommendation: Introducing a cashless payment method to give users an easier way to pay. A cashpoint in closer proximity to stores to give users a shorter journey to travel if cash is
Recommendation: Users should be kept up to date with the services, products and materials that are available so that the next time users are confident in using stores.
Service Competitors
A. Boville Wright, Uxbridge: Arts and crafts shop located in Uxbridge High Street.
Prontaprint, Uxbridge: Specialist print shop located in Uxbridge High Street.
www.printed.com: Online website specialising in printed materials and merchandise.
Delight points Local, products are displayed so customers can browse before purchasing Pain points Products are generally top range, and therefore expensive. Customers have to travel to the store to purchase.
Delight points Local, reliable as a company who specialise in printing and have the correct printing equipment Pain points Customers have to travel to the store to purchase or have a consultation, users cannot do repeat tests and trials with printing
Delight points Range of materials, products and services are clearly displayed, platform is specialist and reliable. Pain points Products can only be ordered in industrial batches, which is expensive. There is a 3/4 day turnover time.
www.studentprinting.co.uk: UK based website specialising in large format printing and binding.
www.instantprint.co.uk: Online website specialising in printed materials and merchandise.
Azo Print, Holborn: Print shop in Holborn, capable of printing both big and small format products.
Delight points Printing is for students, so slightly cheaper than other printing sites, as well as available in small batches. Pain points The shop is not local to London, delivery is expensive and the range of services is small and basic.
Delight points There is a good range of products and services, well displayed to customers. The turn over time is very quick. Pain points Printing and delivery is expensive, quality cannot be checked until the items are recieved.
Delight points The shop offer a wide range of printed products and services in the required batch size. Staff in the store can offer guidance physically or online. Pain points Printing is slightly expensive, and the store is not local to Brunel. There is a waiting time for finished prod-
Identifying Opportunities & Refining Challenges Through observation and personal user experience we identified the key opporunities that we were going to address in our website.
Printing
Queuing
£ Payment (cash/ card)
Services (binding, CD printing etc) Products (books, pens etc)
Minal’s user experience
Student’s user experience
Following initial research, these key points were found. Using these, various ideas were generated including a click and collect locker, information points dotted around the university and a digital helper for Minal. We decided to create an online Stores website to try and fix the problems the users came across and meet their needs as detailed below:
PAIN
WISHES
Cash only payment
Use student card to pay
Long Queues
Document set up checklist
Not knowing correct document set up for prints
To be able to ask Minal anything at any time
Not knowing what is in stock
Click and collect service
Not knowing price of products / services
Know when it is busy
BEHAVIOR
NEEDS
Frustration
Products / services available
Annoyance
Cashless payment
Impatience
Reduced queue time
Satisfied with price
Wireframes - Iteration 1 Staff Intranet | Student Intranet
ORDERS
LOGIN
Tower B
Stores Login User Name
Password
Staff Intranet | Student Intranet
ORDERS
Tower B
Stores
USER
Name Student Number Course
Module Deadlines
Ideas Generation and Development During the first stage of development, we focused on designing a clean interface for ease of user understanding. Coloured tabs were used to differentiate each section of the website and separate information into clear pages. A dynamic colour scheme was chosen to engage and interest users whilst still appearing academic.
The second stage of the project involved developing the aesthetic of the pages to look like the existing Brunel website. The colour scheme was altered to match the Brunel palette; including a stronger, deeper orange, a bright turquoise as the accent colour, and a stronger navy blue for darker areas.
The initial wireframes provided a basic outline for individual concepts within the group. Design variations were created to suggest different ideas, and then the best elements of each version were chosen to build the refined web pages in the subsequent stage of the project.
A more realistic design was brought in at the second stage of development with photos and ‘links’ to provide a more convincing user interface. This helped us to create a working prototype of the website on InVision.
LOGIN
Guerrilla Feedback - Iteration 1 The Folder shaped tabs are very cohesive with stores products and services. The chosen tabs would allow students to plan their time better which is critical around deadlines.
Male Industrial Design Ba Age 24
More images are needed on the site, Brunel showcases their resources using images. The wire frame work may need altering to suit this.
The Icons used on the templates are not in the style of Brunel, looking out of place along the header. However visually they could be quite useful.
Male Aerospace Phd Age 27
Female International Business Ba Age 22
The typography chosen for these templates Is unified with Brunel main site. The lay out of the pages needs amending to look more like the main site, but I do like the styling of the site, its very current.
Female Physiotherapy Bsc Age 21
Overview
Guerrilla Feedback Using the team’s initial idea templates for the website, random students were approached on campus to find out their thoughts on the first design iteration. Using the comments from the student’s further changes can be made to improve the usability of website..
The site has a nice colour pallet, slightly altering from Brunel’s current design. The header bar looks like Brunel’s main site, easily recognisable.
Card payments would make Stores become more commercialised, Stores is not a profitable organisation however bringing a card operating system would mean the current system would have to change. Minal Shah Stores Technician Tower B
Students thought the idea was very good and would greatly benefit them during stressful periods such as project deadlines. They believed the website would help their organisation of project work and preparing for printing. There is currently no system in place to help students use their time effectively at stores, many students would greatly benefit from having the site. Minal the individual who runs Tower B Stores believes he would too greatly benefit from having the site in place. Time would be reduced explaining to students how to correctly submit files and long queues and waiting times could be avoided if students planned their submissions early.
Working Prototype 1 For our initial working prototype on InVision we created 5 pages that would link together to create the website. These pages were developed based on our Geurilla feedback from the previous iteration. We also carried out a quick brainstorming activity in the workshop lectures and a crazy 8 exercise, which allowed us to explore other aspects of the site as well as combining ideas together. This website was shown to Minal who gave us some constructive criticism to develop it further with more detail.
Doc Check Products
How to set up the document Preparing document for Minal
List of all items in stock The price of items
Home Page
Ask Minal
Live Queue New Arrivals Sale Items Map
Chat to Minal FAQ Product Basket
Doc Check Preview of Document Doc Spec Checklist Price
Conclusion Throughout this process we have had a strong focus on user needs, wants, pain points and wishes to create a final user interface that will cater to their needs. By conducting multiple iterations, we could refine the user experience to be as smooth and simple as possible, so students can easily navigate through the website. Additional information for Minal has been implemented into the final wireframes to provide him with the information he requires to complete the services the student requires. After a discussion with Minal about our website, he has informed us that he would like a copy of our project to propose the implementation of the website for Brunel Students. Please find below the link to our final website on InVision:
https://invis.io/X3GEYLK6VD5#/285982978_HomeRefined
Good Website
Happy Minal
Happy Students
Ruby Hardy Bullen
Ruby Hardy Bullen
This section of the stores website allows the student user to view their individual profile, which allows the user to better organise their time.
Login Tab: Staff intranet
User Experience [HOW]
Student intranet
Login
STORES
Rationale [WHY]
By selecting the login word, which is found on all of the main pages, the user can then enter their details to login.
Please enter your log-in details below
College of Engineering, Design and Physical Sciences Username / Student ID
Key Features
Password
My Profile This element of the My Profile window allows students to view their modules and see which deadlines are approaching. A comment made during the initial research phase was that students struggled with organisation during stressful times. This feature allows students to plan their time through reminders that their deadline is approaching. The deadline dates become highlighted in red on approach to their due date, the colour red suggest urgency and persuasively makes the student plan the submission. When selecting the user profile, the student can view their personal details, a feature all Brunel sites include. This element is cohesive across all Brunel sites, which is important for the user to recognise as a safety and familiarity feature. This section provides the users key necessary Brunel details.
Home
Products
Forgotten Password Ask Minal i
Login Doc Check
Tab / Page / Thread
Basket / Login
Once the User is logged in: Staff intranet
Student intranet
X
My Profile
STORES
ID Credit
DM3605 Contextual Design (2017/8) Final Submission
23/04/18
DM3601 Human Factors (2017/8) Group Presentation
21/03/18
Card Number 1402870
DM3615 Graphics Communication (2017/8) Final Submission Full Name: CARLOS FERNADO Student ID: 1402870
Current Credit £3.25 Nearest Top up Station Brunel Library
20/03/18 College of Engineering, Design and Physical Sciences
DM3701 Major Project (2017/8) Business Plan Report and Model Submission VIVA Presentation
30/04/18 30/04/18 22/05/18
Email: dt14ccf@brunel.ac.uk
Home
Products
Ask Minal
The design of the tab is in the style of Brunel’s general student login, it is very important to stay cohesive with the main branding of the site to ensure that students recognise the site as a Brunel sub site. The simplicity and limitation of sections to fill in by the student makes the login window intuitive and very easy to understand. The user can select the map linked to google maps to explore the nearest Top up stations around campus This provides existing and new students with location guidance.
Due Date
Module Deadlines
For the Login page and User profile, the wire framing is different from the other tabs. These elements did not need a whole page, as a result they are individual tabs that pop up on the main screen.
Top up Credit
Orders
Doc Check
Tab / Page / Thread
Basket / Hello Carlos
Student Intranet
Open Days
Brunel University London
Staff Intranet
Order a prospectus
Kingston Lane
Freedom of Information
Computer Centre
Press & Media
Library
Services
Professional Development Centre
Tel: +44 (0)1895 274000
Terms & Conditions
Student’s Union
Fax: +44 (0)1895 232806
Accessibility
Jobs
Security: +44 (0)1895 255786
Uxbridge Middlesex UB8 3PH
Directions to the campus
The key element of this feature is the navigation aspect, allowing the user to find the closest station to their situation. With options to pay online on an alternative tab, the my profile offers users the option to find locations on campus for them to manually top up their ID card if they would rather use cash. Once the user is logged into the site they can click on ‘Hello, insert students name’ to see their individual profile.
Sophie Bowers
Orders
Order Tab:
Previous Payments
This list allows users to view their current orders, showing them their status of process, this element will help the students stay organised by knowing their time scale for their projects.
The user can view their previous orders, the payments can be viewed in a list form, this element is kept simple to prevent the user from getting their past and previous orders confused.
This feature is present on the site to allow students to plan their time better, by doing this queue time in stores should be reduced as students will be better organised.
Students are renowned to have limited budgets at university by being able to view their previous orders students can keep track of their finances, ensuring they are budgeting their projects.
This element includes the feature to view past orders, students can keep on top of their finances by keeping track of how much they have spent at stores.
This feature will be live, when students order from the product section of the website, the order/ payment section will be updated. Previous payments will save the users card details to be efficient for later use.
Feedback and Evaluation: Login Window, User Profile & Orders
Positive Comments Constructive Comments Future Improvements
One good element about the student login in is that the layout is very clear and simple. Brunel is an international university, with many students from overseas, it’s very important that all students can understand the site using the tab intuitively.
The student profile could be further developed into a main page rather than a window. I think that the module section could be expanded, giving students to option to enter a calendar to better plan their module deadlines.
The login window is in the style of Brunel’s main site. The colour pallet of this login window is the same tones as Brunel’s evision site, which all students know and recognise. This is important for students to trust a new website.
The order window is very concise, I this could later be expanded to a whole window. The module options could be extended, showing all the possible deadlines within a module, so that I can plan my time leading up to the deadline.
One improvement I would suggest for the order window is that the previous orders link to the product page of the website, so that I can re-buy items I have previously ordered. I think the order page could also suggest products, sometimes I don’t know what I’m looking for so this could be quite helpful, especially at periods of the year when I am stressed.
Sophie Bowers
The Products page displays the various products available at the stores, along with their price and if they are in stock so students can order them. Essentially it is the core of the online shop.
Filters The filter option makes it easier for the user to narrow down what product they are looking for. The categories organise the different options for ease of use. The ability to check multiple boxes in the filters can narrow down the results further. It makes it easier for users to find exactly what they want from Stores. The Modules category gives students advice as to what products they could find useful for certain projects.
Product Description Each product has an image, short description and price. The interactive elements are the quantity and add to basket button. The plus and minus buttons remove the need to type a quantity. A brief summary of the product helps the user know its use and capabilities. Having all the products on one page rather than separate individual pages prevents the need to keep changing webpages.
User Experience [HOW] Rationale [WHY] Key Features
Search Bar The search bar gives the users a chance to find exactly what they want if they know or want to know if Stores stocks it. Being able to search for specific products adds ease and efficiency to the user’s shopping experience. It also immediately answers the question of whether the product is stocked or not.
Out of Stock When an item is out of stock, the display is different so the user can clearly differentiate. It also prevents the user buying a product that is out of stock. If an item is out of stock, it is useful for the user to know so they can purchase an alternative. It is also handy to know it usually is stocked and could be kept in mind for the user’s future projects.
The 50% opacity fades out the product with the clear text to inform the user that the product is out of stock more clearly than just text.
Nadine Rutt
User Experience [HOW] Rationale [WHY] Key Features
User Feedback Improvements Sort By Menu The drop down sort by menu gives the user the option to order the products.
The sort by means the user can find the product they are looking for by ordering the products according to their personal preference. The low to high price option means the user can find the lowest possible price for a type of product, saving them money. Students always love a bargain price. At the same time they my search high to low to find a high quality product.
Added to Basket Button Once an item has been added to basket, the button changes colour.
Search Initially the search bar was just the search icon with a white space. To make it more clear and user friendly, a light rectangle in the background adds a more defined area for search and the word ‘search’ makes its purpose even more clear. Filters The filters was originally a drop down menu from the top. This was changed to be a permanent bar on the left hand side so the settings can be seen and changed more easily. Also, a module filter category was added to make it easier for students to find out what products might be useful to them for their projects. Product information The details about the products used to be under the image but a slightly darker background was added to show clearly what information belonged to each image.
The change in colour clearly highlights that the item has been viewed and added to their basket.
Nadine Rutt
Basket pop up box This section of the stores website allows users to review their order and complete their purchase. User Experience Rationale [WHY] Key FeaUser feedback
Selected products and key information are displayed to the user in the basket tab. This makes it easier to review previous selections quickly at a glance without going into detail. The key features displayed are the item or service, alongside additional features such as colour and size.
It might be better to show some more detail about what you have added to your basket - while still keeping it clear
These buttons have a clear function and you are unlikely to press them by mistake
The red cross is easily identified as ‘cancel’ due to its connections with colour psychology. The button allows users to delete items from their basket completely, and review the updated total etc. Staff intranet
Student intranet
Basket: x
Your basket
Medium and interaction: The basket page is in the form of a pop up box, rather than a seperate tab. This medium is the most beneficial for users, as it allows the cumulative collection of products and services selected to be viewed throughout, whilst still browsing options. Interaction with the basket quantities, and the ability to view, update and review the current total, makes it easier to keep track of the users choices without having to leave the current position on another page which can be stressful on e-commerce
Final recommendations: Although user feedback has been mostly positive, there are some elements which would be beneficial to develop for an improved final outcome. For example, an additional pop up question confirmation box when users decide to cancel an order line would ensure that selections are not deleted by mistake. Similarly, more feedback in the form of a payment process pop up when users click to pay, would reassure users that their payment is actually going through, although this would be managed by a third party student card system.
A5 Eco notepad / Colour: Green
3
+
£03.00
x
Qty: -
1
+
£04.50
x
Qty: -
Qty: -
STORES
Copic marker
/ Colour: C3
A4 Printing
/ Landscape: 24pgs
1
+
£03.60
x
A4 Binding
College of Engineering, Design and 1 / Colour: Red Qty: Physical Sciences
+
£01.50
x
Total: £12.60
Home
Products
Ask Minal
Home /
Continue to checkout
Doc Check
Basket (6) / Hello Carlos
Live Queue
The user has the ability to alter the quantities of products whilst inside the basket pop up box by using the plus and minus button options. This option is quicker for users to alter their selection without having to return to the product page. The price NEW and quantity update with the users ARRIVALS selections. Combining quantities of the same product makes the This is really helpful basket clearer to view. rather than having to back and find things again if you change your mind.
The cumulative basket total is visible before taking the user to checkout. This ensures that there are no surprises to SALEat the checkout, customers as theITEMS information is available throguhout. The checkout button is a clear format so that the function is obvious to Where usersto before payment. find us
Emma McBride
Final checkout pop up box Overall user feedback: Female Physiotherapy Bsc Age 21
“I really prefer the way it is a pop up box rather than a seperate page because in the past I have had experiences with losing things in my basket when I go back to browse other items. As long as it stays open like that it is perfect.”
Users have the option of returning to their basket list to alter choices before paying. This button gives users the freedom to control their selection up until the last minute, if they change their mind. Although it is not a full button, the underline shows it is a clear clickable link.
An image summary of selection is available at the checkout page. This makes the information easier to process at the last minute and gives the user less to read before deciding to pay.
Staff intranet
Checkout review:
Student intranet
x
Checkout
Male Aerospace Phd Age 27
“Everything is clearly communicated and easy to view at a glance last minute. It would be even better if it showed a timer or stock updates so I know how long I have left to browse before things go out of stock or other people buy them. Overall the design is clean.”
Return to your basket 6 items @ £12.60 Standard collection: 2/3 days
STORES
Pay securely
Home
Products
Ask Minal
Doc Check
Home /
Basket (6) / Hello Carlos
Staff intranet
Student intranet
Checkout feedback: “Feedback is most important to me, the printers in the library do not give much feedback and it makes the experience stressful. I like the way that the amount of time it will take it clear before I pay and I get a reference and message straight away - that’s reassuring when I’m under
The payment button is a clear format so that the function is obvious to users before their account is debited. The use of the phrase ‘pay securely’ also ensure users that their payment is securely processed when they proceed.
College of Engineering, Design and Physical Sciences
Live Queue
Female International Business Ba Age 22
I like this as it gives me a last option to double check what I am going to buy - seeing images is a lot quicker than re-reading text if you are in a rush too
x
Checkout
6 items @ £12.60
STORES
NEW College of Engineering, Design and ARRIVALS Physical Sciences
Standard collection: 2/3 days
SALE ITEMS
Payment successful! Your order reference is #3144590 Check your inbox for a confirmation and collection information email shortly
Home Home /
Live Queue
Products
Ask Minal
Done Where to Doc Check find us
User feedback was added to the pop up box, which appears at the end of a payment. Feedback is important for user trust, and reassurance - for understanding the next stage of the service. This features the reference number so users can track their orders in case of problems, and instructions on the next action. This is the best option for the end of the payment process - having feedback makes me feel assured that my order has actually gone through and I know what to expect next
Basket (6) / Hello Carlos
Emma McBride
This page provides an area where students can communicate with Minal to recieve more information and recommendations . User Experience [HOW] Rationale [WHY] Key Features Future Improvements
This area is the heart of the page. It is a chat window that connects students to Minal, allowing them to ask questions and get more personalised feedback. A simple layout, reminiscent of chat windows used by most operating systems for texting or instant messaging. The layout follows the classic Brunel heading above content box with the names abouve each message box. It also uses the Brunel web colours which are used elsewhere in our webpages. Clear area for entering text, information on chat partner typing, and a big button for the ‘send’ button. The section that allows for text input is broad and open, allowing for entry of large amounts of text without need for scrolling. This is useful for detailed messages.
The FAQs section has a familiar layout, with the question titles dropping down into a description of the answers. Going forward, some of the answers provided here could link into other pages (product pages, doc check etc.) Another additional function could be using keywords mentioned in the chat to change the topics that show up first on this list, so that Minal can reference it for faster answering. Entering an email address here sends a chat log to the student automatically when either user terminates the chat. Recieving a chat log will enable the student to look back over the conversation to check the details and advice. Here is a list of items that Minal has bought up in th chat in the form of recommendations. They can be collated for adding to the basket of the student. The items here link into a quick product view as shown on the following page.
Torin Lee
User Experience [HOW] Rationale [WHY] Key Features Future Improvements Upon clicking on a product on the chat page, it pops up in a quick product view page.
The tabs are homogenous between all of the pages in the group’s design propsal. They provide fast navigation between the four main pages of the stores site.
A pop up quick view product page is utilised here to stop the student from going onto another page and losing the chat connection. Products can be viewed and added to basket, ready for checkout when the chat has ended and been logged.
Each tab is coloured with a colour already used in the Brunel website. The tabs are square to match the design of the elements in the rest of the design. The tab elements show that the tabs are very much sections of the Stores site, and not the wider Brunel website.
The pop up features a large image for clarity, a product description and drop down option for colours, sizes etc. A quantity can be chosen, a price is shown based on the input parameters, and the items can be added to the basket.
Clicking on the items here, which appear when bought up in the chat, will bring up the same pop up as shown above, again to stop the student from exiting the page and losing the chat connection. The choice of colours, square corners and the shaded triangle blocks used in these pages is designed to blend seamlessly with Brunel’s existing UX designs, and build upon them, increasing clarity and usability
Torin Lee
This section of the stores website is to allow the user (most likely a student) to prepare their document for Minal to print. User Experience [HOW]
This is the general layout for all the pages on the website. The individual tabs represent a different service available at Stores. The website is in keeping with the Brunel style as it will be incorporated into the Student and Staff Intranet.
Rationale [WHY] Key Features Printing CD Set-up Printing Paper Set-up This section is where the user can upload the document that they have prepared for printing or binding.
The image of papers informs the user that this is where paper documents must be uploaded. CLICK ON THE BUTTON ON WEBSITE. The button, to move onto the next page, is clear and contrasting with the background colour to draw the users attention to it. It also reduces confusion on what button to press.
How to set up Paper Doc This “how to” section provides a step by step guidance of how to set up the document before submitting it onto the site. Not many students especially first years know how to set up the document correctly for printing.
This is the section where CD’s can be printed. A template for the users design will be provided to ensure that it fits perfectly. The image informs the user that it is for CD printing. The submission system has changed from providing work on a CD to online submissions, but because the service is still available this section has still been provided to the user. The image informs the user that it is for CD printing. The button adjacent to the image is clear and stands out as to reduce confusion for the user of where they have to click to move onto the next stage.
How to set up CD This section provides information on how to set up the CD document for printing. By clicking on the image it will take the user to the next page, which will provide information on how to set up the document.
Yaagni Patel
User Feedback Improvements Making the Doc Spec more detailed would help Minal fully understand what needs to be printed and bound. Adding a notes section for Minal also allows the student to explain any custom prints to avoid confusion.
User Experience [HOW] Rationale [WHY] Key Features Preview This preview page is used to view the document that the user has uploaded into the site. Previewing the document reassures the user that the correct document has been uploaded. It is common in most print settings, therefore it takes up the majority of the page.
Extras The zoom in and out button can allow the user or Minal to view the document in more detail incase there is a problem on the page. The browse button is what the user will click on to upload the document to the site. This button is the same format the the other buttons to inform the user that they can click on it. The blue contrasts with the white to make it clear that it is a button.
Document Spec The document specification is to ensure that the user has selected the correct criteria for how they want thier document printed and bound. Tick boxes are displayed to ensure the use has read all the information on the page and filled in all the blank spaces. It prevents the user from skipping steps in the process.
Checklist The checklist ensures that the user has completed all the steps to ensure Minal can print the correct document and bind it perfectly. The question mark button at the corner is for the user to press if they do not know what the items on the checkllist mean.
Extras The notes section is for the user to help communicate specifically how they would like thier document printed. For example, if the user would like a custom size or specific colour for heat binding. The total cost ammount is displayed at the bottom in clear large font to ensure the user does not miss it. The user can then submit their document and have the option to pay by card instead of cash.
Yaagni Patel