01. Introduction
For the second project I took on for Thinkful, I was tasked with finding a new client and building a mobile website for them. I chose Gregory Malphurs, a rising artist in the Los Angeles area. He was in need of a website presence and one in which he could showcase his artwork. The goals were both simple and complex:
- Have the focus be on the artwork and not the design of the site
- Enable users to capture artwork and place it on their walls for visualization
- Implement an easy and quick purchase experience
Not many artists have a website that allows for this simplicity and ease of use, but still have a robust feature set. Therein lie our mission… develop a full featured mobile site that appeals to the target audience and keep it simple enough for the most novice of users to navigate.
My Role
I led the project, beginning with user research and implementing the design of prototypes that were ready for hand off to developers. As with Bussy, I played the role of user researcher, designer, and project manager, leading all UX/UI efforts. This time I used design sprints and the agile method of work, which led to quick turnarounds times, ideation, and iteration.
The Problem, Audience, and Solution
The problem I was faced with was to create a sophisticated website for a target group that may not have the technical expertise to navigate such a site.
This target audience was affluent, older in demographic, and had disposable income for an art hobby. However, they may not have the highest technical acumen.
Thus, the solution we developed for them was to:
- make navigation drop dead easy, with clearly defined categories and individual artwork views
- prompt the user’s actions through step by step instructions when facing a more advanced feature
- allow them to purchase art in a simple three step process
02. The Research Phase
The research phase for the portfolio site was done in 3 major phases:
User Surveys
A site map and basic page sketches were presented to target users. The navigation was clear and posed no difficulties for the audience. However, the more robust “View in Room” feature was lost on them. It was simply too complicated as initially proposed. Last, it became clear that the checkout process should have no more than three screens to complete.
Key Insights
These included:
- Keep the navigation simple and clear… By adding more options, usability was decreased.
- For the “View in Room” functionality, include step by step instructions on each page. This decreased user abandonment by 56%.
- Continue to promote simplicity and the use of only three steps in the checkout process. This decreased cart abandonment by 18%.
Personas
A sample persona was created, outlining the drives, goals, needs, and hesitation/pain points of our target audience. Their drive was to collect fantastic new artwork to their collection. Their goals included being able to see the artwork in their home or business. Their needs were one of simplicity and the hesitation/pain points were their lack of technological abilities.
Competitive Analysis
Competitive analysis was undertaken and completed, researching the sites of other similar artists in both the LA area and across North America. There were good and bad sites, but none offered an ability to view the artwork on a wall of their choosing and the checkout/purchase process was too involved. These were two areas that opportunity presented itself for the site to stand out from the rest.
Saatchi Art was the first competitor researched. They had nice looking art, with emphasis placed on the art, not the design around it. However, it was difficult to navigate to these pieces and find what you were looking for. Gregory’s site should have this clean display, but also easy to use and navigate categories to promote finding the art.
The Other Art Fair was the second competitor analyzed. They had more artists and the navigation was simple, but there was too much selection and too many featured artists. Gregory’s site should emphasize only his own art and his very best pieces in order to put his best foot forward in front of the user.
The last competitor was Annie Pox. As a site dedicated to only her work, this is the closest site to learn from. She had great categories and navigation and each piece was emphasized village images. However, there was no “view in room” feature and it was hard to visualize her art within your own collection.
03. The Define Phase
The portfolio site also went through a “define” phase which consisted of user stories, user flows, paper prototypes, and wireframes:
User Stories
User stories were developed and the MVP came into clarity. A home, categories, individual artwork, about, and contact screens were deemed necessary. And, the “View in Room” and purchase features would be included within this MVP.
User Flow
A user flow was created. This detailed many things, from the project overview to the business requirements, and from user stories to the actual user flow. This succinctly gathered all research done to this point into one document as an overview.
Paper Prototypes
Sketched paper prototypes were drawn, highlighting the categories and art screens, along with the “View in Room” and purchase functionality. The shape and form of these features began to take shape for the first time.
Wireframes
Finally, wireframes were initiated based on all research and feedback that had been received thus far. This concluded the “Define” phase and led directly into the “Design” initiative.
04. The Design Phase
Next, the design of the mobile site finally began to take shape. This was done by starting with lo-fidelity prototypes that – upon usability testing and iteration – led naturally to the final, hi-fidelity screens:
Lo-fidelity Prototypes
Lo-fidelity prototypes were created based on all research, user testing, and basic sketching that had preceded it. Done in Figma, this allowed for rapid iterations of work to be done and changes made on the fly for usability and accessibility purposes.
Usability Testing & Design Iterations
These iterations were based on usability testing that was performed. What became apparent was that the “View in Room” feature would need to be as simple as possible and required instructions along with a step by step implementation process in order to be valuable. Instead of first choosing artwork and then proceeding to the more complicated picture taking and placement features, it was determined that the artwork would already be selected for the user so that a picture and placement was all that was necessary. This functionality was broken down into three steps, each of which contained simple instructions on what to do next.
Hi-Fidelity prototypes
From these revised lo-fidelity prototypes, hi-fidelity prototypes were created. These were pixel perfect, accurate final designs which would be provided to the developers for implementation. One last round of usability testing was done with a clickable prototype and fine tuning adjustments made.
05. Results
Sometimes the process of research and design can be the most interesting part of a project. Discovering different viewpoints on features and functionality – ones that you may not have seen at first – can be both surprising, eye opening, and make the final product that much more desirable.
The results of the user testing, defining, and designing was a mobile site that featured and focused on the artist’s work itself and allowed the user to see the artwork as it would be in their own environment. The checkout process was narrowed down to just three screens and could be completed in less than five minutes. The MVP reflected this and all that was left was to develop the site’s features and functionality as directed.
Want to learn more or get started on your own project? Feel free to email me at anytime »
