Matthew
Featherstone
Case study: NOMON
Gnomon, noun: the projecting piece on a sundial
that shows the time by the position of its shadow.
My Role
My role in my UX case study was to design and develop this watch collecting application, including research, ideation, wire framing, prototyping, and user testing. You will also see how I addressed various design challenges and implemented solutions that ultimately enhance the user experience. All while attempting to capture the emotional aspects behind watch collecting.
Secondary
Research Summary
Firstly, I conducted secondary research around the idea of collecting, why humans collect and the psychology behind collecting. These are some core aspects of collections and collectors.
-
Collecting begins at an early age.
-
Connecting memories to a particular piece.
-
Collectors enjoy sharing knowledge to build connections with others.
-
Collecting evokes nostalgia and memories, driving the emotional aspect of the hobby.
-
40% of the global population collects, indicating a substantial demographic.
This research further developed my hypothesis for the application while also grounding some fundamental ideas, such as the idea of memories and nostalgia in a collection.
If you wish to see my secondary research paper download the PDF below.
User Interviews Research
After the secondary research surrounding the psychology of collecting, I looked into Primary User Research and the first step was to gain some qualitative data through user interviews.
This qualitative data gained through user interviews cemented the hypothesis that this watch collecting application should focus on the history and the provenance of each watch and be a tool to capture the history to pass along to new collectors.
firstly I screened 20 potential interviewees through private social media pages. From there I interviewed 5 out of the 20 for this primary user research.
-
The history of the watch is a significant aspect of collecting, encompassing both technological advancements and personal stories.
-
Another Key point revealed in user interviewing was the importance of understanding where the watch came from, if purchasing from a seller or second hand.
-
Watch collecting often begins in childhood, as a result of a family member's passion for watches. Many items in a collection have a direct connection to a grandparent or parent, either as an heirloom or through a shared interest in a particular brand or model.
-
Interestingly social connections or a sort of forum in this application is not needed, as majority of their social connections are done through private Facebook pages.
Please investigate my user interview files below, including transcripts, interview questions and screeners.
Empathy Maps
Personas
Main Tools Used Throughout This Project
With the watch collecting application NOMON introduction over, I am excited to present this project, I'm confident it demonstrates my skills and passion for UX design.
Let me take you through my process.
How might we...
Create an interface to capture nostalgia and memories which are connected to a watch?
How might we...
Create an application to story tell or keep alive a particular milestone event which is associated with their watch.
How might we...
Document why a watch is important in terms of horology and technology.
Initial Ideation Sketches
Now I started design the layout and organisation of the application.
-
The PIN PAD login page is a true classic design which is familiar to users and preforms as expected
-
The Home Page, Vertical scrolling was the first ideation also the icons at the top of the screen. This wasn't the best idea as its unfamiliar interface.
-
The Individual watch page is strong design, the back icon at the top is a familiar, coupled to the vertical scrolling interface.
The login and individual watch page are a familiar and consistent design with other application. Which in turn create an easy to use application with a small learning curve.
The questions for the home page are the vertically scrolling, maybe horizontal scrolling to view the collection is a better way to approach this, plus moving the icons down from the top to the Botton is a familiar and common design choice, in turn creating a more familiar and user friendly product.
Wire Frames
After the sketching and initial ideation stage
I moved into XD and created a series of wireframes.
Following the user Red Routes, the below wireframes start to map out different designs, interfaces and the usability of these.
Design System
The Next step was to design a design system to add consistency, structure and communication across the application.
-
I chose simple and humanist typeface that improves legibility at both small and large sizes. The colour palette consists of Sepia and Dark Blue colours which are mature yet modern.
-
The Sepia colour promotes nostalgia and memories very fitting toward the application.
-
I implemented icons that are friendly and familiar to other applications, lessening the learning curve and allowing a wasy transition into learning the NOMON application.
-
The PIN PAD login page is a true classic design which is familiar to users and preforms as expected
-
The Home Page, Vertical scrolling was the first ideation also the icons at the top of the screen. This wasn't the best idea as its unfamiliar interface.
-
The Individual watch page is strong design, the back icon at the top is a familiar, coupled to the vertical scrolling interface.
Thematic Analysis
The next step after the User Interviews was to synthesis the qualitative data in a thematic analysis.
I started with colour coordinating each user and making notes on each piece of information for why and how they collect, what they get out of it and what is important to their collecting.
-
Below You’ll see that the history and provenance is the most important and most talked about aspect of watch collections.
-
This includes the history of a parent, grandparent or family member.
-
Also the memories from their childhood, for example as young child seeing their hero or idol wear a specific watch.
-
Next we have the emotions tied to watches, this is usually due to a watch being purchased at the time of a significant life event.
Through thematic analysis the application should continue down the line of History, Provenance and the emotional connection to watches and a watch collection
Please open the below post it note image for a close look.
Research Summary
Through understand the psychology behind collecting then learning and understand watch collectors through User Interview research, empathy maps and personas.
My hypothesis for the watch collecting application is concrete.
-
Watch collectors are passionate about the history and provenance of their pieces.
-
Watch collectors like all collectors have a sense of nostalgia within their collection.
-
Watch collectors purchase important pieces during milestone events.
-
Finally, watch collectors enjoy the technology aspect being watches.
These are the three key pillars that have been shown to me during the user research process and these key pillars are what this application are built upon.
Competition Analysis
I conducted research on three potential competitors and found that their applications were primarily geared towards cataloging and organizing watch collections in a digital interface.
Although Chrono 24 had the best way to identify and add an item, this was through a method where the user would type and a popup would appear, as the user typed the list of products shortened and finally showed the correct piece, this is a very simple and clear approach.
Notably, none of the competitors' applications were designed to emphasize the emotional connection that collectors have with their pieces, nor did they incorporate historical and nostalgic elements.
High Fidelity Screens
After all the research, wire frames and creating a design system. I then moved into designing the high fidelity wire frames, using the fonts, icons and colour sequence detailed in the design system overlaying onto the previous low fidelity wire frames with some small usability updates.
You’ll see and Ill point out the small and subtle changes between the Low and high fidelity wireframes below.
PIN PAD Login
-
The Pin Pad features a semi-transparent white circle to reduce visual strain, with bold dark blue lettering for strong contrast.
-
The four hollow circles above the pin pad turn solid upon tapping a character, mimicking the UX of a traditional Pin Pad.
-
Call-to-action buttons feature solid white with blue lettering or solid blue with white lettering for clear next-step indication and reduced cognitive load.
-
The MFA security section follows a traditional mobile MFA process, providing a familiar and user-friendly experience for an otherwise complex process.
Viewing a Watch
-
The Home Page has a few changes from the low fidelity wire frames
-
I moved the Icons from the top of the screen to the bottom, for a more familiar and traditional design.
-
The personalized greeting at the top, along with the familiar account icon on the right, creates a friendly welcome to the application.
-
To avoid contrast issues with different backgrounds or watch images, each watch features a slightly transparent white word bubble containing the watch's name.
-
The home screen uses a familiar horizontal scrolling motion for users to view the entire collection.
-
On the individual watch page, the scrolling motion is vertical, which is a traditional way of searching for more information on a piece.
Remove/Transfer a Watch
-
To either remove or transfer a watch, the process starts by tapping the hamburger menu and selecting the desired option.
-
Then a popup window shows to confirm this is the correct action the user would like to execute.
-
The transfer watch process requires an email address to send the watch's digital information.
-
All the processes end with a confirmation popup to ensure that the user intends to proceed with the chosen action.
First Prototype For Moderated Usability Tests
The below is a video of the prototype made through XD that was the first and initial prototype used on 5 moderated testers for usability and accessibility.
The objective of conducting these 5 moderated usability tests was to evaluate the usability and accessibility of the critical paths or "red routes" within the application, as well as to determine the overall level of user satisfaction during the process.
Post Usability Test Analysis
Following the completion of the 5 moderated usability tests, a few areas requiring improvement were identified in order to enhance the application's ease of use and simplify the user experience.
-
Firstly the PIN PAD for the prototype needed to be improved, both the feel and the interaction was missing from the initial prototype.
-
Next the login button needed to be designed with a higher level of contrast, to more clearly show the next logical step.
-
Users initially attempted to transfer, remove, or edit a watch on the individual watch page, but this had to be done through the hamburger menu.
-
By adding icons in the individual watch page to allow for this, this would create a strong user experience.
-
Users complained that going through the hamburger menu to transfer or remove a watch took too long plus they weren’t sure which watch they were changing.
-
Finally also to due with the remove/transfer users complained that reading the popup was too much in terms of cognitive load, by having a step before where you could choose which watch to remove or transfer this would be easier.
Final Prototype,
PIN PAD Process
I welcome you to view the final videos below, of my updated and revised prototype. To showcase each red route in detail, I have divided the prototype into different sections.
The following video presents a demonstration of the PIN PAD process, highlighting its responsiveness and tactile experience.
Login Process
The following video presents a comprehensive demonstration of the Process process, which showcases the significant changes made to enhance its functionality, usability found in user testing. Specifically, the video highlights the application's improved MFA process, which I believe is more user-friendly and easier to navigate.
Home and Individual Watch Pages
The upcoming video provides an in-depth overview of the home page and individual watch page, which illustrates the application's ability to capture the history, nostalgia, and provenance of each watch. While addressing some small usability issues found through initial testing. I hope this demonstration will give you a comprehensive understanding of the application's unique features and capabilities.
Add a Watch Process
The following video demonstrates the step-by-step process of adding a watch, from start to finish. I believe this will provide you with a clear and comprehensive understanding of the process, and showcase the application's user-friendly design and intuitive interface.
Transfer a Watch
In this penultimate video, I provide a detailed demonstration of how a user can successfully transfer ownership of a watch to another user within the application. I trust this presentation will give you a complete understanding of this process, and underscore the application's versatility and robust functionality.
Remove a Watch
The final video of my prototype presentation demonstrates how a user can seamlessly remove a watch from their collection within the application. I believe this video showcases the application's intuitive design and simple user interface.
I am confident that the videos effectively demonstrate NOMON’s exceptional usability and user experience, which is designed to capture the memories and nostalgia associated with watch collecting. I have also taken care to provide users with a variety of features, functionalities, and options to ensure maximum flexibility and customisation. Thank you for taking the time to view my prototypes, and I hope you have gained valuable insights into the application's unique features and capabilities.
If I had continued working...
In reflecting on this case study, I would like to mention a possible feature that I would have included had I continued working on the application. Specifically, I would have integrated a feature that would allow users to connect with their friends and view their watch collections, as well as learn about the stories behind them. While I believe that the decision to avoid creating meet-ups or groups was wise, I think that including a social element that facilitates interactions between friends and their collections would have been a valuable addition to the application.
Problem and Solution
The problem is despite the growing popularity of watch collecting, there is a lack of a comprehensive applications that truly captures the essence of watch collecting. There is no application that's captures the emotional connections between a collector and their watch collection.
Watch collectors tend to be in the older demographic and deeply passionate about watches, I tried to neatly create an application that mirrors the needs of the target demographic while also enhancing the watch collecting experience.
The Solution is to create an intuitive, user-friendly, and visually appealing mobile application that allows watch enthusiasts to easily track and manage their collections, while also keeping the watches story alive.
Interactable Prototype
This Link is the web usable cloud based prototype
'How Might We' Problem Statements
Next, I approached the ‘How might we’ Problem Statements of the application. with the knowledge learned through the research process I put together three questions which in essence capture the main driving force behind a watch collector and the reasons they collect.
Introduction
NOMON is a watch collecting application. With a focus on the nostalgia and the history behind each watch. NOMON allows users to store and save important aspects of watch collecting, such as why the watch was purchase, photographs of the watch and photographs of owners. With the aim to keep stories alive and pass on the history, provenance and nostalgia of each watch to the next owner.
Ideation
Next, I will guide you through my ideation process, which includes building the application and designing the interface.
The process begins with creating 'How Might We' problem statements, followed by developing the site map or site architecture. This is further followed by creating user flows and identifying the red routes within the application. Lastly, a thorough competitor analysis is conducted.
After this comes the initial ideation sketches and then on to developing low fidelity wireframes. A brief summary of guerrilla usability interviews will be provided, which will be followed by the development of the design system. Finally, I will present the high fidelity screens and the process of narrowing down the overall design.
Final Prototype, Usability Testing and Design
In the following section, I will elaborate on the final stages of my UX case study. Firstly, the initial prototype was designed in Adobe XD, as shown below. The prototype was then subjected to usability testing to identify any pain points or missed opportunities.
Based on the results of the usability testing, the pain points were addressed, and the design was updated accordingly.
Subsequently, the final prototype was developed, as demonstrated toward the end of the page. The final prototype is a fully functional and testable product, built using ProtoPie and designed in Adobe XD.
Conclusion
Guerilla Usability Testing
I conducted a brief Guerrilla Usability test session with five participants in a public space to evaluate the wireframes for a application.
The purpose of the testing was to assess the user experience and gather feedback on the page design and flow.
All five participants were able to successfully sign in and log in to the application, but they expressed difficulty in understanding the homepage, which requires a redesign. The process of adding a watch and uploading a story about it was found to be straightforward. However, users faced challenges in editing the watch history and noted that the hamburger menu could benefit from a redesign. Additionally, users expressed concerns about the lack of visual contrast between pages, which led to confusion as many pages appeared too similar.
Firstly, redesign the homepage to make it more user-friendly and easier to navigate. Secondly, improve the process of editing watch history or information. Lastly, enhance the visual contrast between pages to differentiate them and reduce confusion for users.
Reflections and Learnings
This case study has provided me with a valuable opportunity to expand my knowledge of UX design. Through this experience, I have learned that one of the most effective ways to achieve good design is through direct engagement with users. By conversing with watch collectors and learning about their motivations and pain points, I gained valuable insights that ultimately informed the development of the application. Conducting interviews and having conversations with users helped me to empathise with their perspective and to develop an application that effectively captures the essence, nostalgia, and memories associated with collecting watches. This project has shown me the importance of user-centered design and reinforced the value of designing for the user experience.
Personally, I found the entire UX design process for this application to be highly engaging and enjoyable, from initial research and user interviews to wireframing and prototyping. The interviews and conversations were particularly challenging but rewarding, as they helped me to push the boundaries of my personal growth as a UX designer. In the end, I believe that these experiences not only contributed to the development of a strong design for the application but also strengthened my confidence as a UX designer.
Thank you for the opportunity to review this case study.
User Research
This section of the case study presents my comprehensive research on collecting and watch collectors. It begins with a detailed secondary research followed by primary user interviews, thematic analysis, empathy maps, and personas.
User Flows + Red Routes
-
User research revealed the importance of making a PIN PAD login, essential to secure their digital catalog.
-
Adding watches is a crucial aspect of the application, as collectors frequently expand their collections.
-
Editing the information is next. A key point was the idea that a new owner can't change the history, this is crucial in keeping the core memories and nostalgia alive. They can only edit what they have added.
-
Next was viewing a watch, as viewing the history and legacy of a watch is the idea that this application is built on this is a crucial step and route within the application.
-
The Final route was the transfer and removal of a watch as watch collectors don't usually sell or remove watches this isn't key, but it does happen so it's important.
.png)
Site Map
This Site Map portrays the layout of the application, Starting with the PIN PAD login page, then moving on to all the other aspects of the application.
The application branches from the main home page, then the application sprouts into each red route from the main home page.
This layout creates a simple and user friends layout layout as there is only one way to get to all the other parts of the application.
Final Prototype and Usability Testing
The individual pages on the right were identified as requiring updates and revisions through the initial usability testing sessions. These enhancements were aimed at improving the user experience and ensuring greater accessibility. The revised pages ultimately achieved these goals.
These pages depict all of the updates and issues addressed in the upcoming series of videos showcasing the final prototype, which was then retested with 5 different testers for another round of usability testing.
All five testers unanimously agreed that the overall usability had significantly improved, and they expressed high levels of satisfaction with how the application flowed and responded to their inputs. Furthermore, they attested to the application's ability to effectively capture the essence of watch collecting by evoking memories and nostalgia through the photos and provenance section.
All this resulted in a strong user experience and enhanced accessibility.
Add a Watch
-
Add a watch starts at the home page, as does all the different aspects of this application.
-
The user then taps the "Addition" icon, which was chosen based on usability research as the clearest and most familiar icon to represent adding a new watch.
-
To find the exact watch model, the user can expand a list by tapping the top button and types to narrow down the options until the correct watch is displayed. this idea was mirrored from the competitor research.
-
Next is the watch information, including serial number, place of purchase, purchase price, and date of purchase.
-
After finding the watch, the user navigates to a page where they can express why and how the watch is significant to them, and the messages in the popup disappear after being tapped.
-
The messages aim to initiate a conversation with the user, encouraging them to build upon it and start creating a history for the watch.
-
Finally, users have the option to add and upload photos to store in the application, neatly organising each photo with its respective watch.
-
Also, all the next buttons are a deep blue with white writing to clearly portray the next step in this process.