Case study: Jon Beck Photography
Role: User Research, User Flow, Lo-fi, Hi-fi Prototype, Visual Design
Tools: Adobe Photoshop, Adobe Illustrator, Brackets (HTML, CSS)
Year: 2018
Summary
For this case study, the creative brief was to design and build a portfolio branded website for a photography client. What was provided was some overview information of the background of the client, their target demographics, what information was to be presented on the site, and a brief task flow that the client would require.
Client Goal Hierarchy
01 / Promote and Fascinate Audience with Work Portfolio
02 / Setting up a unique and distinct brand identity
03 / Attract users to browse/purchase works
04 / Prompt user to use services/take part in workshops
05 / Allow potential clients to reach out easily
Competitor’s Analysis
As outlined in the brief, there were two sites of references provided by the ficticious client. From here, a competitor’s analysis was conducted. This helped to identify how some of the strengths and weakness of the client’s competitors could be applied to the design of Jon Beck’s site.
Competitor’s Analysis Summary
As a conclusion from conducting the competitor’s analysis, both competitor sites that were analysed both had their merits and flaws. Ryan Edy’s website is more visually appealing and contained minimal technical issues and was mobile responsive. Meanwhile, for Nicolas Tarier Photography’s site, the website is comparatively lacking more visually and does not have a very in-depth navigation hierarchy. This site also faces numeral technical issues in areas such as accessibility where it did not meet a number of web standards. Visually, there are certain aspects of both sites that might not entice users, where pages are too cluttered and there are too much to scan through, creating too many stimuli.
Both sites were also lacking in terms of Search Engine Optimization (SEO) through an analysis of the written content of the site. Only more specific search terms rank #1 for both sites, but not for generic keywords. Typical keywords for the subject of photography are highly saturated within search engines, so SEO efforts should be improved in order for the site to be able to stand out from the rest and gain more traffic.
User Persona
The next step of the research is to identify potential users of the website and generate their persona to gain more high-level insights behind the users’ perspectives and through defining their goals and needs, curate a better-informed information architecture for the ideal user journeys. The persona was derived from the client’s demographic targeting, young working adults that were technology savvy.
User Scenario
Jillian is a Junior Creative Director from a medium-sized design and advertising agency. As creative director, she is responsible for the ideation and creation of visual concepts in response to her agency client’s briefs and relays them to stakeholders both internally and externally. Her job scope covers both digital and print platforms e.g. eDMs, social media ads, website, mobile collaterals, marketing, press and print materials. Given the nature of her job scope, Jillian is well-versed in terms of internet skills and is frequently updated with the latest web and design trends.
In Jillian’s free time, she likes to embark on solo travels to foster her photography skills, which is her hobby. Her father was an avid photographer in his younger days, and he had mentored her as she grew up. Jillian uses Instagram to document her photography work as a portfolio and has occasionally taken on freelance gigs from users that have come across her work. Jillian is best at portrait and landscape photography as she believes that these styles of photography are best able to reflect her personal style and perspectives.
Despite Jillian’s success in the graphic design industry, she wants to venture more into photography as she loves to gain inspiration through her camera lens. To do so, she also frequently browses through other photographers’ works to gain inspiration and to appreciate the world through the eyes of others.
User Interface & Design System
On top of identifying the user flows and information architecture, one of the client’s goals was to present a cohesive visual identity for the website. Hence, to clearly define the visual component of the website, a few mood boards were curated using the clients’ works.
Lo-fi Mockups
With the user and design requirements set, it was time to come up with the wireframes for the website. The wireframe takes into consideration the needs and goals of the client and the users. Notes were taken for each justification of design and layout choice. The site is to be responsive as well, thus wireframes were done up across for desktop, tablet and mobile.
Feedback on Lo-fi Prototype
After the lo-fi prototypes were completed, they were uploaded on my classroom portal to collate feedback from my other classmates that were working on briefs of their own.
Overall, feedback was positive, some of the highlighted improvements were:
1. Bump up the featured works section as the client’s work should be used to grab the user’s attention first.
2. Incorporate merchandise section within the homepage so users will know that there is such a feature within the branded site.
Hi-fi Mockups
With consideration of the feedback from my classmates, it was time to make some changes and inject some color into the mockups.
Working Prototype
After the full-color design comp was completed, it was uploaded for my classmates to review remotely through the online forum again. Most of the reviews were favourable, with feedback that the sections were clearly laid out and easy to navigate, and that the color scheme was easy to look at.
The site is hosted on:
https://rubytanzx.github.io/jonbeck/
Post Mortem
At the end of this project, although there wasn’t any tangible measure of the results, it was a great case study to identify the steps of a full project lifecycle. Having played a part in this case study as a UX researcher, UI & visual designer, as well as developer, really enabled me to immerse and understand how each of these roles plays a part in creating a product, and the challenges involved.
As a UX researcher, it was important to identify user goals through actual evidenced based feedback, rather than just my own ideas. This project could have been further improved by soliciting feedback from real end-users that were not involved in similar processes (in which case were my classmates that were working on similar briefs), which could have helped to identify even more in-depth pain points and challenges a typical user might face.
As a UI designer, most of the scope revolves around trying to make a stylistic choice with the given assets, picking out what makes the most cohesive style that allows the clients’ work to stand out, and building a uniform design system throughout.
As a developer, it was helpful that wireframes and design notes were created to help build the website from scratch starting from a skeleton of the elements that are needed, then actually fitting in the assets after the build. It is also through building the site that made me realize that the designer’s perspective should take into technical limitations that the developers are bound by, as certain layouts were a little harder to put together in the build.
Last but not least, there were definitely areas in which the user testing process could have been more in-depth, by simulating certain user performed tasks could have been helpful in better improving the final product.