SmithPics
A responsive website for a local business.
Role:
UX/UI Designer, Logo Design
Timeline:
80 Hours
Tools:
Figma, Whimsical
Briefing
The project overview.
SmithPics is an existing photography company that needed a new responsive website. The goal was to improve its online presence to show prospective clients that their needs and wants would be better served here than with a competitor.
Stakeholder’s Goals and Problems
Goals:
Be an established Photographer
Show realistic looking photos
Attract clients with specific ideas
Expand financially
Problems:
Lack of marketing and outreach
Unclear customer expectations
Research
Finding the focus of the project.
Looking at competitors
I took a look at 5 of the stakeholder’s competitors’ websites and questioned: what features work well on these websites that can be used for SmithPics?
The results were: A clear portfolio, easy to understand services, reviews, information about the photographer, and contact information. Links to an active Instagram are also standard.
1-on-1 Interview feedback
All need photographers for multiple types of photoshoots.
All used personal references to pick who they book with.
All used Instagram to research photographers.
All said that high-quality photos were the first priority.
All said that a good connection with the photographer was the priority during the photoshoot.
Defining the User
User Persona
Information Architecture
Roadmap
I explored how I might prioritize features so that they would best address the problems and goals of the user.
Site Map
Using my Roadmap I wanted to see how I might best organize the features of this website with the hierarchy of priority in mind.
Sketches
Before I began designing, I wanted to brainstorm some ideas based on my information up to this point. I went through 6 rough sketches of UI layouts. This allowed me to explore some different ideas of how the site map would translate to the visual design.
Wireframes
After my collection of data and brainstorming ideas, I began working on wireframes that would later be made responsive. I went through multiple interactions because I had to keep going back to the goals of the stakeholder. The brand identity played a major role in the revisions I made in order to make the feel of the website correct.
UI Design
Designing the brand and visual elements.
The keywords provided by the stakeholder were: Realistic, Natural, Approachable, Satisfied, Conversational, Modern, Blue, Gray, and Fun. Using these words I wanted to collect a variety of images that could help inspire the correct look and feel of the website. Once I had completed the mood board, I turned to a redesign of the logo that gave off an effective impression to the prospective customer.
Mood Board and Logo Design
Style Guide
UI Design
Here I began to use the style elements to fill in the responsive wireframes. As I was building this out, I continuously checked to make sure I was addressing the customers’ primary needs of a portfolio and some sort of personal connection to the photographer.
UI Kit for developers
Testing the full design
Hi-Fi Prototype
A Hi-Fi prototype was used in testing with 5 participants to check the effectiveness of address the key problems and goals discovered from my initial research:
Are users about to determine the quality and variety of the photos?
Are users able to clearly understand the services and rates offered by the stakeholder?
Are users able to get a reasonable impression of the stakeholder’s personality?
Are users clear on how they would contact the stakeholder, or connect with him on social media?
What is the overall impression of the brand?
Affinity Map
I organized all the feedback given by the participants according to the corresponding features or elements.
Overall the testing was successful with room for minor improvements.
Conclusion
Reflection & Next Steps
After the design revisions, I presented the design to the stakeholder. They were pleased with the results and so now it was time to pass over the deliverables!
I learned that there is likely to be some reasonable back-and-forth with stakeholders over what you want vs what they want. I also discovered a lot of feedback in my research (like a personal connection between customer and photographer) that I felt could be extended beyond just the design of this website. I shared all my research data with the stakeholder in case it could benefit their business. A common piece of feedback from the research was focused on utilizing Instagram, and so I also suggested to the stakeholder that using social media more could help their business, too.