Responsive Product Design — A Case Study
Employer: Frazer Consultants
Services: UX Design & Product Development
Year Completed: 2018
Problem
After the Grayson theme was built, our next project was to create a new responsive obituary page. This was the key to allowing all of our “responsive” sites to be fully responsive without the need for a separate mobile site. The new responsive obituary page had to utilize the same functionality as the current page while allowing all the content to be easily viewed and flow effortlessly on any device.
Role
I was able to have a more comprehensive role with this project including planning and strategic thinking, designing, user testing, task writing, and bug/development testing. Again with this project, I worked with two other designers who helped mainly with concepting and testing and took lead on the interface design.
Solution
By utilizing a card-like design the new obituary page was responsive and encouraged more engagement by showcasing more condolences, photos, and other content on the screen than the previous design. Another change we made was that all the information was now accessible on one screen instead of having it split up into multiple tabs. Considering a majority of our clients are older and aren’t too proficient with technology, this helps everyone view and access all the information.
The page features the following sections: obituary, events, tribute fund (crowdfunding), and tribute wall. The obituary section includes the full written obituary along with any memorial contributions desired. Within the events section are the events and services happening for that individual listed in chronological order with a map. Tribute fund is a way to raise money to help cover funeral expenses. This section allows for donating money as well as showing current funding status to the desired goal. Finally, the tribute wall allows for submitting a post that could include a message, photo or video. Other post options include adding a candle or a comforting symbol.
Full Design
Approach
From the initial brief, we began brainstorming and thinking through various ideas on how we could make our obituary better, easier to use and be responsive. We dissected our current obit and started creating new sketches and mockups that we thought would work as a new responsive obituary. After we had a mockup established, we began some testing and got input from the higher-ups. We kept iterating on the design, getting feedback and were pretty happy with the design. One day while making some edits, we stepped back and really evaluated the design. Turns out it was very similar to the current obituary page just more cleaned up.
After this realization, we wondered what we could do to take this page a step further and make it more interactive and draw more engagement. While perusing the internet, we stumbled upon this little company called Pinterest and got inspired by the wall of posts. How could we incorporate this wall into our design?
A week before development was supposed to start on the new obit, we rushed into our boss’s office and pleaded for more time to develop this idea. He gave us seven days to figure it out and present the fleshed out concept.
After the seven days, we presented the idea and got approval to continue on and finish out the design. This new design was much more engaging, easier to use and a more radical design which would show our customers that we are an innovative company that designs with them in mind.
Once we began finalizing the design, we started running user tests to see how the design stacked up against the previous design. We tested a bunch of people varying in ages and came to find out it was a successful design.
Learnings
This project ended up being way larger and more complex than we had initially thought. We had the main concept solidified but what ended up being more complex and time-consuming was understanding how everything in our admin panel linked up with the different elements on the page. There were a lot of variable sections we had to account for such as having a location that is four lines long next to one that was one line long, or if someone added 30 photos — how that would be displayed. In retrospect, we should have better assessed and listed out every component of the old design so we could have been more efficient in creating the new obit.
View this project and more of my work on my portfolio!
