Lane Crawford Creative Database
Help teams easily seek creative talent for collaborative opportunities
July - August 2015 (1.5 months)
Project Leader, UX Researcher, UI/UX Designer, Front-End & Back-End Developer
Project management, contextual inquiry, journey mapping, information architecture, wire-framing
Photoshop/Illustrator, HTML (bootstrap), CSS, PHP, jQuery (Masonry)
Whilst working in the Branding, Marketing and Creative division at Lane Crawford, a design-centric luxury retail company in Hong Kong, I was working on updating a database of creative talent that the team constantly worked with or wanted to collaborate with for future projects. I recognized the difficulty that the sub-teams faced in searching through the database due to the lack of visuals and the need to click through links to access portfolios.
Realizing that an Excel file was not an ideal format for the task, I initiated a project to redesign Lane Crawford’s creative database by transferring the information into a web app with an intuitive interface and back-end system for teams to update in the future.
I interviewed different members of the Branding, Marketing and Creative sub-teams by going through their workflow, particularly when it came to finding creative talent to collaborate with. At the time, they were working on an editorial project that would require a fashion photographer that could address specific stylistic needs.
I wrote down notes regarding their workflow and condensed this into a visual map of the process it takes to find a photographer and uncovered a number of pain-points and opportunities.
Time constraint and information overload was a big problem during the process, teams were trying to find creatives but couldn’t because the spreadsheet was too unwieldy. If users wanted to look for a 'photographer' with the sub-category 'fashion' and location 'Hong Kong', they would need to go first find photographer and visually scan for what they need.
The lack of visible images also meant that users would have to click on the portfolio link in Excel and this would bring them to their website but not every artist had a website and if they did, it was hard to keep track of which websites they had visited and follow up on collaborative opportunities.
As a result of this poor user experience, teams were spending a lot of time trying to find people for creative projects. Even though the spreadsheet was well maintained, teams did not know how to properly access all the information that was being presented to them.
Since teams are constantly looking for design-focused collaborative opportunities, be it fine art or fashion or photography, they ultimately needed a database that could show them the creatives' work visually without having to switch between multiple modalities.
I looked into existing applications that could function as a visual database but because it was necessary to install a bunch of different programs, I saw that it was not possible because some teams were using Macs whilst some where using PC. I decided that a custom web-based solution would be the most appropriate given the users' needs - teams could easily go to the website to access the information, send links to each other, collaborate across platforms and have the information synced to the web automatically when any changes were made.
I sketched out possible solutions, validated with people on different sub-teams whilst iterating based on user feedback.
When I arrived at the second iteration of sketches, I had a clearer sense of what users would want out of a web app and how it could integrate into their workflow. I wrote down the features that were suggested to me during the user feedback session and pitched the current thinking to my supervisor. She thought a web app like this would really streamline the workflow and wanted me to move forward with the project after consulting with the Chief Creative Officer but I needed to provide more details about how things would work so she could get the project approved.
User Flow & Wireframing
Based on the features that were suggested to me during user testing, I created a general overview of the information architecture and the user flow so I could present a clearer sense of the different pages and information that the website would provide and check whether this was what users needed.
After consulting with the different stakeholders, we established that the core functionality would be the ability to search as well as do multiple category tagging then filter down these items so that the items that match those tags show up as thumbnails.
The size of the database meant that this would result in a large amount of information and it would be difficult to get an overview of all the artists that were in the database, which is why I suggested an index page that contains an A-Z of all artists for users to search for alphabetically.
During further user interviews, I found that a lot of people noted that there were art pieces and projects that the company had previously collaborated with but they did not know how to keep track of them so a stretch goal was to create an 'art archive' where past collaborations could be listed and viewed.
Based on the established user flow and new suggestions, I created wireframes of the final layouts based on the sketches I made initially and incorporated the art archive and index page.
I presented the wireframes and received positive feedback from my supervisor and the Chief Creative Officer, which meant that the project had been approved and I had to figure out how to implement from a high-fidelity, technical standpoint such as setting up the server requirements and deciding what web framework to use.
High Fidelity Prototyping & Rapid Iteration
I began to work on translating the wireframes into a functional prototype by coding the front-end and back-end for the web app using Bootstrap, CSS, JS/jQuery, PHP and MySQL. There were significant technical challenges throughout the way as I had never worked on such a high scale full-stack web development project before. Some of the features that I had initially intended were difficult to implement so I had to compromise certain features in the MVP, especially considering the time constraints and the fact that this was a side project.
Once I had created an initial functional, coded version of the app with demo content, I did some user testing. As I watched users use the initial version, I found that some people needed more visual cues to understand how to search through the database.
For example, only the artist's name appeared when users scrolled each thumbnail and some people needed indicators about what type of artist it was if they were not using the search function or if had forgotten what they had searched for so I added clickable tags at the bottom of the artist's name.
This was also evident when users were in the artist's individual page - the title only contained the name of the artist but people commented that would've been helpful to have contextual information in the form of tags to summarize what the artist was about and if they were tagged as 'Sculpture' artist and they wanted to look at other 'Sculpture' artists, they could easily click on the tag and see other artists that have been tagged with 'Sculpture'. As such, I incorporated this into the final iteration.
When the screen layouts were finalized and I fixed all coding-related bugs, I worked with another intern to transfer the information from the Excel file to the web app. Most of the functions continued to work despite the large size of the database but I realized that the initial plan to use paginators - where each page would only show ten thumbnails and users would have to click to the next page to access more - was not user-friendly given the size of the database. During user testing, I found that a lot of them wanted to just skim through everything quickly so I decided to incorporate an infinity scroll function. In addition, the categories for all the artists had also expanded significantly when real content was used so I made the sidebar headers toggle-able in order to prevent clutter; users could click on the header to expand the categories and then click on it again to minimize it.
The final product was a fully functional website where users could search through the portfolio and generate search results with tags and by clicking into the thumbnail, they could access a thumbnail portfolio integrated into the website as well as information such as contact information, website, biography when they click on the artists’ name. I was also able to achieve the stretch goal of creating an A-Z index page and an art archive with multiple tagging sorted by category, year and location but the screens for these have been omitted from this case study due to sensitive information about exact artists that the company has collaborated with.
By paying attention to user needs and constantly iterating based on users’ feedback, the team was super happy with the end result, with colleagues commeting that
- Don't be afraid to initiate a project - if something is broken, fix it: I was initially in charge of managing creative collaborations, which is why I had to help update and edit the Excel sheet. I experienced the difficulty of managing the spreadsheet and found out a lot of teams were also dissatisfied with the workflow, which is why I decided to initiate a project to redesign the database completely and this paid off because I was actually able to make an impact within the company rather than simply doing intern work
- Be proactive but also collaborative: As this was a self-initiated project, I had to manage my own workflow and set hard deadlines for myself. I had to be extremely proactive, from communicating with my supervisor, gathering user feedback to reaching out for people for help when needed even if they were in a completely different department like the tech department. The feedback, help, insights and encouragement I received from everyone was invaluable and brought me to complete the initial project goals as well as the stretch goals
- Validate design assumptions with the user: The balance between aesthetics and usability was important because sometimes things that seemed functional from an aesthetic standpoint was not functional from a usability standpoint, a notion that was made apparent through user testing
- Aim for an MVP that has functions users really need: One of the key issues faced was trying to reconcile what the users wanted and what was possible to create within such a short amount of time because this was a side project I was doing alongside other intern work. I ended up creating a minimal viable product first before moving on to adding features that were nice to have but not necessarily crucial to the user’s workflow
- Don't be afraid to learn on the job: Some of the functions I had in mind were not feasible within such a short period of time and there were a lot of technical difficulties along the way but because it was a solo project where I was in charge of designing and coding, I had to learn to pick up the necessary skills within a short period of time using online tutorials