Solar RPF, Inc is located in California. They specialize in sales and installation of residential solar products. The old website was not updated so their clients could not find useful product information. Therefore, Solar RPF, Inc kept losing their clients.
- Business Goal: Keep their clients, increase their sales and recruit new clients.
- User Goal: Find and buy product information easily
- My Role: UX/UI Designer
- Tools: Adobe Illustrator, Adobe Photoshop
- Date: 2013
You will read the design process on user research, personas and scenario, storyboards and task flows, information architecture and interaction design, ideation, wireframes, and usability test, and final design.
User Research, Personas and Scenario, Storyboards and Task Flows
At first, I made a strategic plan for this website, started by user experience research. I used some research skills, such as survey, observation, focus groups, etc. Based on the research data, I made the personas and scenario for the primary user group and the second user group. Then I drew several storyboards based on these scenarios, analyzed the task flows from these storyboards to the best understanding of the user needs.
Information Architecture and Interaction Design
Then I made the scoping plan, which defined the function specifications and content requirements for this website. Based on the scoping plan, I moved forward to make the structure plan, which required my skills of interaction design and information architecture.
Ideation, Wireframes and Usability Test
After this structure plan was done, I started to work on skeleton plan for this website. I used my skills of interface design, navigation design, and information design, processes from brainstorming, ideation to wireframes. Then I let the users test the usability of these wireframes, adjusted later.
I’d like to use wireframes to test because without pictures, color, style etc. disturbed, users would focus on content, layout, and function. The writers and developers also can contribute to wireframes on content and functions.
Finally, I worked on the surface plan: visual web design to make this website more aesthetically pleasurable; design specification documentation for the web developer.
I learn that running usability tests on wireframes can save time in the design process. The users, writers, and developers can contribute their effort on wireframes. When wireframes finished, the writers, developers, and designer can continue developing the website at the same time. For example, the writers could move on polished and final content according to wireframe. The developers could start to build the website function, and the designers could move on user interface design.